INDICES POR CATEGORÍAS CON MINIATURAS

CREAR INDICES CON MINIATURAS DE TODAS LAS ENTRADAS

Después de bucear por la red buscando alguna forma de hacer índices con miniaturas y no encontrar nada que se ajustara a mis necesidades, finalmente decidí hacer un experimento y este es el resultado. Se trata de un pequeño apaño para colocar un índice en una página o entrada. (En definitiva, se trata de un código creado por una neófita)

Por ejemplo, yo lo he puesto en una entrada que he convertido en la homepage, con el truquito de modificar la fecha de publicación,  además de aparecer  en el menú de inicio.

Para poner en tu blog este índice realizaremos estos sencillos 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.- el segundo paso es poner antes de </head> el siguiente 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/AVvXsEhjK3d8xE-vc-_uW__cLBcX_CQEBxWa0xfDQJNwHckDeckgrTP85JExE9l7CW4Ph0IPPrHL6sNWfag-zwIbfc0DLchq7lSZuN6aG8wM03YaW6hsMhnTg9BbVc-_b9PnjY1mhHeW5napQT0/';}
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>

Aquí hay una URL en color purpura, esa es la imagen que se mostrará cuando la entrada no contenga ninguna imagen, pero puedes cambiarla por otra imagen si lo deseas.

3.- Por último crea una nueva página o entrada y ahí pega esto:

<div style="text-align: justify;">

<span style="font-family: Arial, serif;"><span style="line-height: 19px;"><b>

Insertando imágenes: Slider y Acordeones, y otras galerías de imágenes</b></span></span></div>

<div style="text-align: justify;">

<script type="text/javascript">var numposts = 10;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

<script src="/feeds/posts/default/-/Slider y Acordeones?published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></script>

<script type="text/javascript">var numposts = 10;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

<script src="/feeds/posts/default/-/galería imágenes?published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></script></div>

<div style="text-align: justify;">

<span style="font-family: Arial, serif;"><span style="line-height: 19px;"><b>Distintas Formas de presentar las Entradas recientes y Posts relacionados</b></span></span></div>

<div style="text-align: justify;">

<script type="text/javascript">var numposts = 10;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

<script src="/feeds/posts/default/-/Post Recientes?published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></script>

<script type="text/javascript">var numposts = 10;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;overflow: hidden;</script>

<script src="/feeds/posts/default/-/Post Relacionados?published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></script></div>

<div style="text-align: justify;">

<span style="font-family: Arial, serif;"><span style="line-height: 19px;"><b>Multimedia: Introducir música, video, publicaciones, etc.</b></span></span></div>

<div style="text-align: justify;">

<script type="text/javascript">var numposts = 10;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

<script src="/feeds/posts/default/-/Multimedia?published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></script></div>

<div style="text-align: justify;">

<span style="font-family: Arial, serif;"><span style="line-height: 19px;"><b>Cómo hacer menús</b></span></span></div>

<div style="text-align: justify;">

<script type="text/javascript">var numposts = 10;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

<script src="/feeds/posts/default/-/Menú?published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></script></div>

<div style="text-align: justify;">

<span style="font-family: Arial, serif;"><span style="line-height: 19px;"><b>Elementos del diseño del blog</b></span></span></div>

<div style="text-align: justify;">

<script type="text/javascript">var numposts = 10;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

<script src="/feeds/posts/default/-/DISEÑO BLOG?published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></script></div>

<div style="text-align: justify;">

<span style="font-family: Arial, serif;"><span style="line-height: 19px;"><b>DISTINTOS GADGETS</b></span></span></div>

<div style="text-align: justify;">

<script type="text/javascript">var numposts = 10;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

<script src="/feeds/posts/default/-/GADGETS?published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></script></div>

<div style="text-align: justify;">

<br /></div>

En el texto subrayado 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://toolboxxblog.blogspot.com.es/search/label/DISE%C3%91O%20BLOG

Sin embargo yo la he puesto tal y como veis con ese código  en el html de la página y no me ha dado problemas, pero dejo las dos formas para tantear.

<script src="/feeds/posts/default/-/DISEÑO BLOG?published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></script></div>

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 (true, quiero mostrarlas)
var displaymore ← Mostrar o no el enlace para leer más (yo he puesto true para que se vea)
var displayseparator ← Mostrar o no un separador (true)
var showcommentnum ← Mostrar o no el número de comentarios (false, no quiero que se muestren)
var showpostdate ← Mostrar o no la fecha de las entradas (false)
var showpostsummary ← Mostrar o no el resumen de las entradas (true)
var numchars ← Número de caracteres en los resúmenes (yo he puesto por defecto 80)

Este es un código para indizar varias categorías de etiquetas distintas, pero si se ha de poner menos o más sólo tienes que quitar, o repetir por cada categoría adicional que quieras agregar el último trozo:

<div style="text-align: justify;">

<span style="font-family: Arial, serif;"><span style="line-height: 19px;"><b>Cómo hacer menús</b></span></span></div>

<div style="text-align: justify;">

<script type="text/javascript">var numposts = 10;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

<script src="/feeds/posts/default/-/Menú?published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></script></div>