sexta-feira, 5 de agosto de 2011

Colocar as últimas postagens separadas por categorias com imagens em miniatura



Esta é uma boa maneira de deixar nosso blog mais organizado para que nossos leitores possam encontrar temas relativos aos seus interesses com maior facilidade, se para isso quisermos, ao invés de colocarmos um gadget com as últimas postagens podemos separar as últimas postagens por categorias. Veja um exemplo no blog de testes.

Para isso, siga os seguintes passos:

1- Entre em Design > Editar HTML e antes de ]]></b:skin> cole o seguinte:

/* Últimas postagens por categorias
--------------------------------- */
img.label_thumb{
float:left;
border:1px solid #8f8f8f; /* Borda das miniaturas */
margin-right:10px !important;
height:55px; /* Altura das miniaturas */
width:55px; /* Largura das miniaturas */
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}
.label_with_thumbs a {}
.label_with_thumbs strong {padding-left:0px;}


2- Logo antes de </head> cole este script:

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;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!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM8Qp5j7g6jZt4ORls2cgFE2K6PaL9FKZYjUR9BTRqpp96zh0JlRDkCiZrlFrKLf19g4TUidHrvQwQEqj7GV-vfYwTQ3vRZ1iaqLcw2o5b7RD4MwXfKLp3L793OKqmF1Gwlv6hfczPdjc/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Ene";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Abr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Ago";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dic";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Más »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>


3- Por último vá em Design &gt; Adicionar Gadget &gt; HTML/Javascript e cole:


<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Nome-do-marcador?published&amp;alt=json-in-script&amp;callback=labelthumbs"></script>


Onde está escrito Nome do marcador coloque o nome do marcador ou categoria exatamente como ele estiver, com letras maiúsculas e minúsculas se tiver. Caso a etiqueta tenha acentos ou espaços, copie a URL que apareça na barra de endereços do navegador ao invés de colocar o nome do marcador, por exemplo se espaços ficará assim:

http://Nome-do-meu-blog.blogspot.com/search/label/Nome%20marcador

Podemos fazer várias alterações no último código, onde true significa mostrar e false que não mostrará:

var numposts ← Número de postagens a serem mostradas
var showpostthumbnails Mostrar ou não as miniaturas
var displaymore Mostrar ou não o link leia mais
var displayseparator Mostrar ou não um separador
var showcommentnum Mostrar ou não o número de comentários
var showpostdate Mostrar ou não a data das postagens
var showpostsummary Mostrar ou não o resumo das postagens
var numchars Número de caracteres nos resumos

Vale mencionar que o terceiro código serve apenas para uma categoria, portanto vc terá que adicioná-lo novamente para cada uma das categorias.

1 comentários:

jhon barbosa disse...

não consegui realizar isso não

Artigos Relacionados

Related Posts Plugin for WordPress, Blogger...