Últimas entradas por etiquetas o categorías e imagen de miniatura - Blogger

A veces tenemos varias categorías en nuestro blog, como por ejemplo las mías, que tengo diseño web, programación, trucos de blogger...

Y queremos ordenarlas un poco a la hora de mostrarlas en portada o queremos mostrar sólo alguna en especial.

Pues para esto tenemos este truco para mostrar las últimas entradas de una etiqueta en concreto, y podemos usarla en el lugar de la página que queramos y tantas veces por categorías queramos.

Yo la uso por ejemplo, (a día de hoy y con el template que estoy usando ahora) en la columna central de la portada de mi blog. Quedando algo como esto:

En el cual estoy mostrando en el centro, mis últimas entradas escritas sobre Google.

Para hacer esto, tenemos que hacer algunos pasos:

1. Entra en Diseño | Edición de HTML y antes de ]]></b:skin> pega lo siguiente:

/* Últimas entradas por categorías
--------------------------------- */ 
img.label_thumb{
float:left;
border:1px solid #8f8f8f; /* Borde de las miniaturas */
margin-right:10px !important;
height:55px; /* Alto de las miniaturas */
width:55px; /* Ancho de las 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. Luego antes de </head> pega 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/AVvXsEgzOh9T3C1nssXFqb3Qk-tpgFCeMBtUi_DuX5fPWe2txnTzoX0F4gK8cKtUZk5NDdGXFn9x7LyCS_kbFVcU4neNsVChEhL0vgAEoECkqIPcO-kgOXu60E21-SEtIP7nCNNONM_4vkyZt0M/';}
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 elige el sitio donde quieras que esté las últimas entradas, para esto entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega esto:

<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/-/Nombre-de-la-etiqueta?published&alt=json-in-script&callback=labelthumbs"></script>

Donde dice /Nombre-de-la-etiqueta/ en color rojo, debes poner el nombre de la etiqueta de la cual quieres que aparezcan las últimas entradas.

Una vez guardado, ya puedes ver como queda en tu blog.

¡Espero que os haya servido!

Si te gustó no olvides ayudarme a seguir creciendo compartiéndolo en tus redes sociales favoritas. ¡Gracias!

Más articulos

Tweet

Escrito por Unknown

Si tienes alguna otra duda, o quieres comentar algo sobre el tema, te animo a que dejes un comentario. También puedes visitar nuestro foro. ¡Un saludo!