Conforme eu tinha anunciado, encontrei um script de posts recentes com imagens, (thumbnails) no blog da Marianne, que foi o primeiro passo para que pudesse fazer( pelo menos, tentar) um script de posts por categoria. Aqui venho usando o widget disponibilizado pela Rô em seu blog antigo e modificado pelo Compulsivo abaixo da área dos posts. Por ele ter sido feito no Yahoo Pipes, seu carregamento era lento e em alguns navegadores, não funcionava de jeito nenhum... No IE, nem dava sinal.O código, recentposts_thumb.js, que peguei no blog da Marianne, foi publicado no blog do Anhvo, cuja linguagem é incompreensível para mim, já que ele é vitnamita, esse código mostra os posts recentes com imagens, e então, eu comecei a brincar com o script mesmo sem saber como essa linguagem funciona, acabei modificando-o, justamente usando comparações e analogias vistos em outros scripts. Primeiramente vou descrever o que eu fiz, para depois dar o tutorial.
Ao tentar decifrar o script, me deparei na parte do endereço de feed, que estava assim:
document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\">A parte do endereço de feed é essa:[ "+home_page+"feeds/posts/default], e eu já tinha publicado como obter um feed por categoria, logo, fiz a seguinte troca:
document.write("<script src=\""+home_page+"feeds/posts/default/-/"+label+"?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\">
Onde + label+ é a variável que representa o marcador escolhido. Então renomeei o código para tagposts_thumb1.js.
O próximo passo era acrescentar no código do widget a variável label:
Antes:
numposts = 2;
home_page = "URL DO SEU BLOG";
numposts = 2;
home_page = "URL DO SEU BLOG";
Depois:
numposts = 2;
label = "MARCADOR";
home_page = "URL DO SEU BLOG";
numposts = 2;
label = "MARCADOR";
home_page = "URL DO SEU BLOG";
Os primeiros resultados podem ser vistos no meu blog de testes!
E agora, sem mais delongas, vamos ao tutorial do...
... Widget de posts por categoria com imagens:
1 - Antes de tudo: Vá em lay-out => Editar HTML => Faça um backup do seu template! Cautela e caldo de galinha não faz mal à ninguém... exceto à galinha!
2 - Baixe o arquivo tagposts_thumb1.js num servidor de sua preferência (eu uso o Skydriver, aprenda a usá-lo, a Juliana explica!)
3 - Copie e cole o código seguinte criando um widget nos elementos de páginas na seção lay-out de seu blog, onde você quiser. Como eu estou emulando um template magazine, o legal é criar antes duas colunas abaixo da área das postagens, conforme descrito no Bloggerbuster, ou nesse post do Estimulanet.Com
<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 = 2;
label = "MARCADOR";
home_page = "URL DO SEU BLOG";
</script>
<script src="URL-DO-ARQUIVO-tagposts_thumb1.js" type="text/javascript"></script>
<div style="text-align: right; ">
<span style=" background: #eee;">>>Veja mais em <a style="font-weight: bold;" href="http://NOME-DO-SEU-BLOG.blogspot.com/search/label/NOME-DO-MARCADOR">MARCADOR</a>
<<</span></div> 4 - Agora explicando passo a passo cada parte do código, como diria Jack o Estripador:
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. Para um estilo magazine o ideal são dois)
label = "MARCADOR";
(Aqui, no negrito, coloque o marcador escolhido)
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="URL-DO-ARQUIVO-tagposts_thumb1.js" type="text/javascript"></script>
(Em negrito, coloque a URL do arquivo tagposts_thumb1.js que você hospedou antes)
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.
h) Essa última parte eu acrescentei, caso você queira colocar um link para que o leitor possa pesquisar outras postagens no marcador determinado.
<div style="text-align: right; ">
<span style=" background: #eee;">>>Veja mais em
<a style="font-weight: bold;"
href="http://NOME-DO-SEU-BLOG.blogspot.com/search/label/NOME-DO-MARCADOR">MARCADOR
</a><<</span></div> Onde estiver em negrito, substitua com o nome do seu blog, nome do marcador e marcador, respectivamente. Se achar desnecessário, pode até apagá-la, eu a coloquei mais para dar um charme no widget.
Em tempo, sou um principiante em códigos, se alguém encontrar algum erro, alguma coisa desnecessária, um código mais simples ou um um novo script, dê um toque. Eu vou agradecer!
Observação: Como será que se faz aquelas caixas para se oferecer widgets direto para o blog? Copiar e colar ninguém merece!!!
Atualização: o valor icon que aparece duas vezes no código original acima usava os símbolos [•] e [→], e eu não sabia o que representavam. Pesquisando aqui, descobri que se tratam de carácteres especiais de tabela.
