Postagem em destaque

08/12/1980, o dia em que o sonho acabou!

8 de dezembro de 1980. Uma data muito triste. Um dos maiores ícones da  cultura pop e do rock foi covardemente baleado com 5 tiros enquanto ...

quinta-feira, 21 de novembro de 2013

Como colocar widget de postagens recentes com imagens

Eu já tinha ensinado como colocar um widget de postagens recentes no Blogger, desta vez vou ensinar como colocar um outro widget semelhante e simples, mas agora com imagens (thumbnails).

Copie e cole o código abaixo em um gadget HTML/JavaScript (vá  em  painel de controle >> aba Layout >> clicar em Adicionar um gadget (onde quiser por os widgets) >> procurar por HTML/JavaScript. A vantagem desse código é que você pode colocar a  quantidade que quiser, ao invés das limitações impostas no gadget Feed, que só permite apenas 5.

<script language="JavaScript">
imgr = new Array();

imgr[0] = "URL DA 1ª IMAGEM";
imgr[1] = "URL DA 1ª IMAGEM";
imgr[2] = "URL DA 1ª IMAGEM";
imgr[3] = "URL DA 1ª IMAGEM";
imgr[4] = "URL DA 1ª IMAGEM";

showRandomImg = true;

tablewidth = 220;
cellspacing = 2;
borderColor = "#ffffff";
bgTD = "#ffffff";

imgwidth = 64;
imgheight = 64;

fntsize = 12;
acolor = "#00c";
aBold = true;
icon = "•";

text = "comentários";

showPostDate = false;

summaryPost = 100;
summaryFontsize = 11;
summaryColor = "#c00";
icon2 = "→";

numposts = 5;

home_page = "URL DO SEU BLOG";

</script>
<script src="https://googledrive.com/host/0BwU7Ti8M_XCUal96RnR1QmFNcHM/recentposts_thumb.js" type="text/javascript"></script>

a) Imagens aleatórias

imgr[0] = "URL DA 1ª IMAGEM";
imgr[1] = "URL DA 1ª IMAGEM";
imgr[2] = "URL DA 1ª IMAGEM";
imgr[3] = "URL DA 1ª IMAGEM";
imgr[4] = "URL DA 1ª IMAGEM";

showRandomImg = true;

Escolha 5 imagens e as hospede num servidor de imagens (Use o Picasa, de preferência, ou o próprio Skydrive). Quando você fizer um post sem imagem, o script irá colocar aleatoriamente uma dessas que estão armazenadas.

b) Tabela

tablewidth = 220;
(Ajuste aqui o comprimento da tabela de acordo com a sua barra lateral)
cellspacing = 2;
(Ajuste aqui o espaço entre as células)
borderColor = "#ffffff";
(Coloque aqui a cor da borda da tabela, que no caso está na cor branca)
bgTD = "#ffffff";
(Coloque aqui a cor de fundo da tabela)

c) Ajuste das imagens

imgwidth = 64;
(Comprimento da imagem)
imgheight = 64;
(Altura da imagem)

d) Fonte e cor do endereço do post

fntsize = 12;
(Tamanho da fonte)
acolor = "#00c";
( Cor do link)
aBold = true;
(Link disposto em negrito, se não quiser assim, coloque false no lugar de true)

e)Data do post

showPostDate = false;
(Do jeito que está, a data não vai ser mostrada. Se você quiser mostrá-la, coloque true no lugar de false)

f) Resumo do post


summaryPost = 100;
(Aqui coloque a quantidade de caracteres do resumo)
summaryFontsize = 11;
(Tamanho da fonte do resumo)
summaryColor = "#c00";
( Cor da fonte do resumo)

g) Outras configurações:

numposts = 2;
(Aqui coloque quantos posts você quer que apareça.)

home_page = "URL DO SEU BLOG";
(Em negrito, coloque a url do seu blog, não esquecendo de colocar / no final, exemplo: http://crazyseawolf.blogspot.com/)
</script>
<script src="https://googledrive.com/host/0BwU7Ti8M_XCUal96RnR1QmFNcHM/recentposts_thumb.js" type="text/javascript"></script>
(Em negrito, está a URL do arquivo recentposts_thumb1.js)

Um detalhe: os comprimentos (widths e heights) estão em px, e o código das cores em hexadecimal ( sempre começando com #), consulte tabela.

O script está hospedado no Google Drive, caso você queira hospedá-lo em um servidor de sua preferência, disponibilizo ele no formato doc. Basta copiar e colar no bloco de notas, e depois renomear a extensão ".txt" em ".js". Infelizmente o Blogger não permite o download de arquivos!

Obs.: Esse script é uma variação daqueles criados por Hans Oosting entre os anos de 2006 e 2007 e que foram "repipocados" pela web, sendo que eu os peguei anos atrás no blog Beautiful Beta, e usam json (Eu odeio jQuery).

Nenhum comentário:

Postar um comentário

Pessoal, comentem, críticas e elogios serão bem aceitos. E eu respondo, posso demorar mas respondo. Esse velho lobo do mar tarda mas não falha!!!!

Leia antes a minha Política de Comentários.

Se quiser deixar o link de uma postagem sua, utilize o código abaixo trocando o que está escrito em letra maiúscula:

<p><abbr><em><strong>SEU NOME</strong> - último post do blog... <a href="<strong>LINK-DA-POSTAGEM</strong>"><strong>TÍTULO DA POSTAGEM</strong></a></em></abbr><p>

Related Posts with Thumbnails
Google