Pesquisa personalizada

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).


Permalink:





Sobre o Autor:
Crazyseawolf Para saber mais sobre o autor deste blog, visite o seu perfil no Google+ ou este link . Para enviar uma mensagem, clique aqui . Para outras informações, leia o FAQ .



0 Comentando aqui :

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
 
 
Template Denim, criado por Darren Delaye, customizado por Crazyseawolf.