Postagens Recentes
Autor: Fernando Ambrosio | Publicado: 2011-12-05T00:00:00-02:00

Em mais uma visita ao blog do Abu Farhan, encontrei este Widget de postagens recentes em cascata que você pode ver ao lado. É muito legal e fácil de se colocar no blog, veja como colocar.

Tem duas maneiras de se colocar este Widget, uma muito fácil e outra um pouco mais difícil. Vamos começar com a muito fácil.

Coloque um Widget Html/JavaScript no local em que você achar melhor.





Depois copie o código abaixo e cole no widget.



&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;style type="text/css" media="screen"&gt; &lt;!-- #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://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x; 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: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; } --&gt; &lt;/style&gt; &lt;script language='JavaScript'&gt; 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 = "comments"; showPostDate = true; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 10; home_page = "http://www.raudhatulmuhibbin.org/"; limitspy=4 intervalspy=4000 &lt;/script&gt; &lt;div id="spylist"&gt; &lt;script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'&gt;&lt;/script&gt; &lt;/div&gt;
Agora altere o link que está em vermelho, coloque o endereço do seu blog e salve o widget.

Está pronto, mas caso o Abu Farhan remova os arquivos do local onde estão hospedados seu widget vai parar de funcionar, ai você será obrigado a fazer do modo um pouco mais difícil como descrito abaixo.

Modo um pouco mais difícil.

1º Passo: Faça o download dos arquivos JavaScript clicando nas imagens abaixo.

  

2º Passo: Hospede os arquivos em um local na web, eu recomendo o Webs, confira como hospedar arquivos no Webs na postagem do Mundo Blogger. Após hospedar os arquivos copie os links do arquivo e guarde para usarmos no próximo passo.

3º Passo: Adicione um Widget Html/JavaScript no local que você desejar.



4º Passo: Copie o código abaixo e cole dentro do Widget que você colocou na sua página.



&lt;script src="http://ENDERÇO_DO_SEU_ARQUIVO_Jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;style type="text/css" media="screen"&gt; &lt;!-- #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://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x; 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: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; } --&gt; &lt;/style&gt; &lt;script language='JavaScript'&gt; 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 = "comments"; showPostDate = true; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 10; home_page = "http://www.SEU_BLOG.COM/"; limitspy=4 intervalspy=4000 &lt;/script&gt; &lt;div id="spylist"&gt; &lt;script src='ENDEREÇO_DO_SEU_ARQUIVO/recentpostthumbspy-min.js' type='text/javascript'&gt;&lt;/script&gt; &lt;/div&gt;
Só altere os códigos que estão destacados com cores (Vermelho e Azul).

Entendendo os códigos:

Códigos para aumentar a largura das postagens que vão aparecer no widget.

#spylist ul{ width:220px;

#spylist li { width:208px;

Os links das imagens que estão em Azul aparecem nas postagens que não tem imagem apenas textos, altere caso queira suas próprias imagens. 

Estes dois códigos alteram o tamanho da miniatura da imagem.

thumbwidth = 70;&nbsp;&nbsp;&nbsp; Largura da miniatura

thumbheight = 70;&nbsp;&nbsp; Altura da miniatura

Este código altera a quantidade de postagens que vão ficar aparecendo.

numposts = 10;&nbsp;&nbsp;&nbsp;&nbsp; Neste caso vai aparecer as últimas dez postagens

Coloque aqui o endereço do seu blog.

home_page = "http://www.SEU_BLOG.COM/";



Sobraram apenas dois links que são os dos arquivos javascript que você hospedou na web substitua-os na ordem correta



5º Passo: Salve o Widget e confira no seu blog.