Últimas entradas por categorías con imagen en miniatura blogger

Algunas veces queremos tener todo muy organizado para que nuestros lectores puedan encontrar con mayor facilidad los temas de su interés, y es ahí cuando en lugar de poner un gadget con las últimas entradas queremos poner sí las últimas entradas pero por categorías, de manera que puedas mostrar las últimas entradas por cada etiqueta que quieras y además mostrar la miniatura de dicho elemento.

Para poner en tu blog este gadget de últimas entradas por categorías realizaremos estos sencillos pasos:
1.- Entra en Diseño | Edición de HTML y antes de ]]> 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 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/AVvXsEjhunNpb8OYefdpxwVkGW2RpACLZZTfKrT2OMHG0d7B9D3sYez6t2Wr43bWGBt984-i6nKegJzyXx2Aws7Iiw5TCsjoZ8qDesCqnGuPfFJiZIQFULE8w25uyoAO1rxAGNdwEVtO-NzBIbU/';}

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


En donde dice Nombre-de-la-etiqueta va el nombre de la etiqueta que quieres mostrar, tal como es, respetando mayúsculas y minúsculas. En el caso que la etiqueta contenga espacios o acentos lo mejor es que ingreses a la etiqueta y te fijes en la URL que aparece en la barra de direcciones del navegador, al final de la URL vendrá el nombre de la etiqueta tal como debe ponerse, por ejemplo, si tuviera espacios se vería así:


http://Nombre-de-mi-blog.blogspot.com/search/label/Nombre%20etiqueta


También dentro de éste último código hay unas áreas que podemos personalizar, true significa que lo mostrará y false que no lo mostrará.


var numposts ← Número de entradas a mostrar

var showpostthumbnails ← Mostrar o no las miniaturas

var displaymore ← Mostrar o no el enlace para leer más

var displayseparator ← Mostrar o no un separador

var showcommentnum ← Mostrar o no el número de comentarios

var showpostdate ← Mostrar o no la fecha de las entradas

var showpostsummary ← Mostrar o no el resumen de las entradas

var numchars ← Número de caracteres en los resúmenes


Y en el segundo código hay una URL en color naranja, esa es la imagen que se mostrará cuando la entrada no contenga ninguna imagen, puedes cambiarla por otra imagen si lo deseas.

Recuerda que el gadget muestra las ultimas entradas de una etiqueta en particular, por lo tanto, si quieres mostrar las últimas entradas de otras etiquetas entonces sólo tienes que repetir el paso #3 por cada categoría adicional que quieras agregar.