Cursos 24 Horas - Cursos 100% Online com Certificado

Destacando os artigos no blogger - Artigos Rotativos

10 Comentários Autor : Notícia e blog 04 setembro 2009


Este Gadget exibe um slide com miniaturas de imagem das postagens  rotativamente um efeito bonito que da grande destaque as postagens novas e anteriores. Este é mais um post da serie JQuery para Blogger veja como fazer este Gadget no seu Blog . Eu tenho também um demo que mostra este incrível efeito.


1.Faça login no Blogger


2.Vá para Layout->Elementos da página->Adicionar um Gadget->HTML/JavaScript


4.Como conteúdo coloque o código abaixo modificando de acordo com a nota no final:<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<style media="screen" type="text/css">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:10px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language="JavaScript">

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "Comentário";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://www.noticiaeblog.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src="http://api.ning.com/files/uJb*JkdxkQvSDJymgYDZ9eEcCSefPowmglXT8jTuRoMH5qsDH*2S3-qlzg2f43Gc8xH-fkVWbMYPQ0siiq9Gm2KCtus3HZ2V/recentpostthumbspymin2.js" type="text/javascript"></script>
</div>
Nota:O código em vermelho é a URL do seu Blog coloque a url do seu Blog ;-)


5.Salve


Pronto seu Gadget de artigos rotativos está pronto ele selecionará aleatóriamente as postagens que vão aparecer


Update: Todos os erros corrigidos.
Referência: Abu-farhan

    10 Comentários

    Geriel Barros disse...
    19 de setembro de 2009 21:05 #

    Oi amigo eu estou com problemas com esse "Destacando os artigos no blogger - Artigos Rotativos " , eu coloquei no blog aqueles "Artigos em destaque em forma de slide Blogger/Blogspot " estava tudo bem quando eu fui colocar "Destacando os artigos no blogger - Artigos Rotativos" os Slides parou ,não se movimenta mais ...mais os Artigos em destaque está tudo normal . será que está dando algum tipo de conflito .. ?? tem como vc ver se consegue consertar isso ?
    eu tentei um monte de formas aki mais não consegui =/.. vlw meu chapa .

    Notícia e blog disse...
    20 de setembro de 2009 09:39 #

    @Geriel Barros Eu também tentei aqui mesmo no blog tentar evitar esses conflitos mais não obtive sucesso. Quando houver solução eu volto a informar.
    Mais valeu pelo alerta!

    []'s Notícia e blog

    Os passatempo da Carracita disse...
    5 de abril de 2010 15:31 #

    Gostava muito de utilizar esta funcionalidade no meu blog, procurei muito por este script, pois gostei demais da forma como apresenta as nossas postagens. Já coloquei em dois dos meus blogs /blogger e aparece sempre um espaço em branco sem mostrar coisa alguma. Que pode estar errado.Gostava muito que me ajuda-se adorava poder colocar os meus artigos de forma rotativa. Obrigada

    Os passatempo da Carracita disse...
    5 de abril de 2010 18:30 #

    Cosguir por a funcionar colocando o script como se fosse uma postagem. Assim funciona. Adicionado com gadjet HTML/JAVA SCRIPT não aarece nada apenas um espaço em branco. Que pode estar mal? Pode ajudar? Obrigada

    Notícia e blog disse...
    5 de abril de 2010 18:39 #

    @Os passatempo da Carracita, qual a url do seu blog?

    Os passatempo da Carracita disse...
    5 de abril de 2010 19:19 #

    http://www.carracita.blogspot.com

    O script esta colocado na sidebar,se visitar apenas vê logo em cima, um espaço em branco

    Notícia e blog disse...
    5 de abril de 2010 19:30 #

    @Os passatempo da Carracita tente retirar um destes trechos do seu template <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

    Os passatempo da Carracita disse...
    5 de abril de 2010 19:57 #

    Só existia só mesmo um, retirei mas não resultou.

    Badtom disse...
    8 de abril de 2010 04:09 #

    O recentpostthumbspymin2.js deve ta off, mas na sua demo ta tudo ok. pode enviar o código da demo? ou atualizar com o codigo da demo http://demo-abu-farhan.blogspot.com/

    godrow disse...
    29 de outubro de 2011 21:44 #

    Valeu esta super dica, ja tinha tentado vaaaarios e este foi muito facil, obrigado

    Postar um comentário

    Deixe seu comentário aqui
    Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.