29 de set de 2009

Widget de posts recentes com efeito


Encontrei um blog com dicas bem legais para o Blogger e postarei aqui nos próximos dias todas elas.

A primeira da série é esta, um widget com as últimas postagens do blog com efeito. É bem fácil coloca-lo, é só copiar o código abaixo e colar no HTML/Javascript. Coloque o endereço de seu blog no local indicado com a cor verde e salve.



<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:320px;/*largura do widget*/
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:320px;/*largura do widget*/
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;/*aqui o fundo do widget*/
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:15px;
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 = 3005;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://NOMEDOSEUBLOG.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://dl.getdropbox.com/u/1367826/recentpostthumbspy-min.js" type="text/javascript"></script>
</div>



Créditos: Abu Farhan

19 comentários:

  1. Boa noite Elke adorei sua dica só um comentário gostaria de saber si for possível é claro ingeri minhas postagem antigas nesse código Javascript.
    poderia trocar o link do Blog por outro link das postagem? agradecido desde já e uma boa noite.

    ResponderExcluir
  2. Oi...
    Tentei colocar o código, mas não aparecem as figuras das postagens. Só aquela imagem cinza, que indica não haver imagens.
    O que pode estar acontecendo?

    ResponderExcluir
  3. ... js perfeito e é um "show" seu blog, Parabéns.

    ResponderExcluir
  4. Boa tarde, Elke!
    Recentemente criei o Click Amigo (meu segundo blog). Estava procurando uma maneira de colocar, na side bar os posts recentes do Quiosque Azul (meu primeiro blog). Ficou fantástico! Muito obrigado pela ajuda!
    Depois tentei fazer no Quiosque Azul o mesmo processo. Funcionou, mas infelizmente deu problema no meu menu de abas ( = deixou de funcionar). Ainda sou um verdadeiro aprendiz da arte de blogar e acredito que isso deve ter ocorrido devido a chamada que tenho, neste blog, para a biblioteca JQuery. Talvez um conflito de 'scripts', não? (meio perdido...*rs!).
    Felicidades + Saúde + Paz!
    Grande abraço, Renato

    ResponderExcluir
  5. quando utilizei esse código a função leia mais nas postagens parou de funcionar, o que pode ter dado errado?

    ResponderExcluir
  6. isso so funciona pra sites que
    tem feed o meu blog nao tem
    e nao ta dando pra criar por
    causa do template que da um erro
    na hora de criar

    ResponderExcluir
  7. Muito filé, esse matou a paú.. show...show...

    valeu e tudo de bom, somos abençoados por existir pessoas assim como vc...
    parabens!!!!

    ResponderExcluir
  8. Como faço para aumentar a largura do widget?

    ResponderExcluir
  9. @Glauco Félix Teixeira Landim para as imagens aparecerem é preciso que vc suba as mesmas direto no editor do Blogger (onde vc escreve). Beijos

    ResponderExcluir
  10. @Luciano Isso é conflito de script. Tente outro código para o leia mais. Beijos

    ResponderExcluir
  11. Ameiiii...
    Dá um baita visual ao Blog!!!
    Configurei pra ficar como eu queria e está funcionando perfeitamente!

    Abração.

    ResponderExcluir
  12. Oi rainha !
    Aqui não funciona mais no meu blog!

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube