Mostrar os Titulos dos Posts e Miniaturas das Imagens

Recebemos um comentário pedindo para falar sobre como fazer uma pagina mostrando os marcadores do blog, mas exibindo apenas os títulos das postagens e uma miniatura da imagem publicada, então fizemos uma adaptação de outro código utilizado para Lista aleatória das postagens recentes do blog.

Mas o código que vamos mostrar pode ser utilizado também para mostrar uma lista de seus posts mais recentes com as miniaturas das imagens ao lado dos títulos das postagens, como fazemos em nossa pagina de postagens recentes.

Esse código pode ser utilizado numa das paginas extras do seu blog ou até mesmo em um gadget de HTML/javascript, porém é mais recomendado utilizar como uma pagina senão pode fazer seu blog ficar mais lento devido ao tempo para carregar os códigos e imagens.

Adicione uma pagina extra no seu blog e coloque o seguinte código:

<style type="text/css">
.arquivos a{color: #000000;padding: 5px;margin: 20px 5px; border: 1px solid #999;}
.arquivos a:hover{color: #009;border: 1px dashed #000;background-color: #FFC;}
</style> <div class="arquivos"><script type="text/javascript">
numposts = 5
imgr = new Array();
imgr[0] = "http://img185.imageshack.us/img185/6717/dicasg.gif";
showRandomImg = true;
aBold = true;
icon = " ";
text = "no";
showPostDate = false;
summaryPost = 60;
summaryColor = "#0000ff";
icon2 = " ";
label = "";
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s =s.join("");
s = s.substring(0,chop-1);
return s;
} function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img= new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;
document.write('<a title="Leia mais..." style="display:block; text-decoration:none" href="'+posturl+'"><img style="float:left;border:none;margin-right:5px" src="'+img[i]+'" width="80" height="80"/><font style="font-size:120%"'+posttitle+' '+cmtext+ '</font><br/><div style="clear:both"></div></a>');
j++;
}
}
document.write("<script src=\"http://www.frasescurtas.com.br/feeds/posts/default/-/Auto Ajuda?start-index=1&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></div>

Você precisa alterar algumas partes do código para configurar o seu blog neste javascript:

Aparência dos links
.arquivos a{color: #000000;padding: 5px;margin: 20px 5px;border: 1px solid #999;}
.arquivos a:hover{color: #009;border: 1px dashed #000;background-color: #FFC;}

Isso é uma formatação em CSS normal, você pode ver aqui mais detalhes sobre: Alterar cores dos links - CSS e assim poderá mudar a aparência para que combine melhor com seu layout.

Quantidade de Posts Mostrados:
numposts = 5 – apenas altere o numero 5 para a quantidade que desejar, claro desde que tenha postagens suficientes neste marcador.

Postagens sem imagens
imgr[0] = "http://img185.imageshack.us/img185/6717/dicasg.gif"; aqui você deve colocar um endereço de imagem para utilizar se o post não tiver imagens, ou seja, ela só parece se não houver miniatura disponível. Caso tenha duvidas sobre o endereço da imagem, veja aqui: Imagem não aparece no Blog ou Site

Endereço do Blog ou do Marcador
<script src=\"http://www.dicasparablogs.com.br/feeds/posts/default/-/Imagem de Fundo?start-index=1&orderby=published&alt=json-in-script&callback=showrecentposts

Tenha muito cuidado para alterar esse código, pois qualquer diferença ele não funciona, inclusive as letras maiúsculas no nome do marcador. Portanto altere o trecho:
http://www.frasescurtas.com.br/feeds/posts/default/-/Auto Ajuda

Assim por exemplo:
http://www.dicasparablogs.com.br/feeds/posts/default/-/Imagem de Fundo

Tamanho da miniatura ao lado do titulo do post
width="80" height="80" simplesmente altere esses valores como quiser, lembrando que width é largura e height é altura da imagem.


Uma coisa importante sobre esse código é que para utilizar em uma postagem ou pagina extra, veja na pagina de criar postagens a configuração opções, ela deve estar marcado para Interpretar HTML digitado e não Mostrar HTML literalmente.

Veja outras formas de mostrar links de outras postagens no seu blog e assim fazer as pessoas ficarem mais tempo em suas paginas:

LinkWithin - Mostrar assuntos relacionados no blog
Outbrain - Classificação com estrelas nas postagens
E também como resolver o problema das Miniaturas das Imagens não aparecem

Esperamos que gostem e achem boas utilidades para esse código no seu blogger. Lembramos apenas que caso resolva utilizar isso como um gadget ele deixará a pagina do seu blog um pouco mais lento.

Veja mais Dicas e Tutoriais: > Acessórios > Códigos > Configurações Avançadas > Ferramentas