Índice de posts con miniaturas por medio de etiquetas para Blogger

Ya se que me van a matar tod@s las que hicieron el tutorial de “Como hacer un indice de posts con etiquetas“  pero para gustos colores, y que mejor dar una variedad de tutoriales y que tengan que escoger y no quedarme con las ganas de intentarlo.

Estoy enamoradisima de este tutorial porque después que hagamos esto no tenemos que preocuparnos por nada ya que todo se va poniendo automáticamente en la pagina de indice de post, no tendremos que preocuparnos por estar yendo y viniendo a no ser que le quieras hacer un cambio de color o ponerle algún arreglo especial al indice.

En el post anterior en donde te enseñaba como hacerlo por medio de las etiquetas es genial para blogs que tienen post sin imágenes pero si lo que quieres es darle una vista previa de lo que trata tu post este tutorial es ideal, por ejemplo para blogs de DIY o de los que tienen una tienda Online mejor dicho este tutorial es ideal si quieres que tu lector se cautive solo por una imagen al irse al Indice de tu blog.

Lo mejor de lo mejor de este tutorial es que si eres de esos blogs que tienen tropecientasmil etiquetas podrás escoger que etiquetas poner y cuales no, mientras que en el primer tutorial las etiquetas se ponían automáticamente sin discriminar las que anteriormente pusimos pero que no tienen la menor relevancia. Pongo un ejemplo para explicarme mejor:

Supongamos que soy de las que tenga esa mala maña de poner mas de tres etiquetas en cada entrada, digamos que estoy haciendo un post de DIY y de etiquetas le pongo (diy, costura, doityourself) si han hecho el primer post y tienes mas de 20 etiquetas te abra pasado que algunos post en el índice de post te saldrían repetidos y es por lo anterior porque usas varias etiquetas en un solo post. Yo siempre aconsejo poner solo una etiqueta porque tendremos mas orden en el blog y luego no estaremos bregando.

Pues con este tutorial solucionaremos este problema, escogeremos las etiquetas que queramos que se muestre y listo, sin problema los post que vayamos haciendo se pondrán automáticamente en el indice de post con las mismas medidas, ordenaditos con la imagen y el titulo.

Recuerda que si en algun momento llegases a cambiar los valores del ancho del diseño de tu blog puede que se distorsionen las medidas de este post, pero nada que no se pueda solucionar.

Ahora si vamos con el tutorial que es tan sencillo que hasta da risa. Y queda monisimo!

Vamos

a Edilicio de plantilla HTML <> Abrimos la ventana de artilugios CTRL+F<> Buscamos este código:

</Head>

Y después de ello pegamos el siguiente código;

<!– inicio de indice de entradas en miniatura –>

<script>

//<![CDATA[

function tb911rpGallery(root) {

var entries = root.feed.entry || [];

var html = [‘<div class=”tb911rp-gallery nopin” title=”Get this from www.ingeniodiy.es“>’];

for (var i = 0; i < entries.length; ++i) {

var post = entries[i];

var postTitle = post.title.$t;

var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : ‘http://3.bp.blogspot.com/-sWtp_qRPNT8/UZYmQq5sAdI/AAAAAAAAEec/7YDbpK4Q6g8/s72-c/default+image.png’;

var newImgUrl = orgImgUrl.replace(‘s72-c’, ‘s’ + tb911rpg_thumbSize + ‘-c’);

var links = post.link || [];

for (var j = 0; j < links.length; ++j) {

if (links[j].rel == ‘alternate’) break;

}

var postUrl = links[j].href;

var imgTag = ‘<img src=”‘ + newImgUrl + ‘” width=”‘ + tb911rpg_thumbSize + ‘” height=”‘ + tb911rpg_thumbSize + ‘”/>’;

var pTitle = tb911rpg_showTitle ? ‘<span class=”ptitle”>’ + postTitle + ‘</span>’ : ”;

var item = ‘<a href=”‘ + postUrl + ‘” target=”_blank” title=”‘ + postTitle + ‘”>’ + imgTag + pTitle + ‘</a>’;

html.push(‘<div class=”tb911-item”>’, item, ‘</div>’);

}

html.push(‘</div>’);

document.write(html.join(“”));

}

//]]>

 

</script>

<!– final de indice de entradas en miniatura –>

Ahora vamos a darle forma en CSS y buscamos este código:

]]></b:skin>

Antes de ello pegamos lo siguiente:

/* Indice de todas las entradas*/

 

—————————————–

 

.tb911rp-gallery {padding:10px; clear:both;}

.tb911rp-gallery:after {content: “”;display: table;clear: both;}

.tb911rp-gallery .tb911-item a {

position: relative;

float:left;

margin: 0 15px 15px 0 !important;

text-decoration:none;}

.tb911rp-gallery .tb911-item .ptitle {background: rgba(0, 0, 0, 0.5);

background: #7f7f7f\9; /*color del fondo del titulo*/

display: block;

clear: left;

font-size: 11px; /*Tamaño que fuente*/

line-height:1.3em;

height: 2.6em;

position: absolute;

text-align: left;  /*alineacion de la fuente*/

bottom: 10%;  /*alineacion de la barra del titulo*/

color:#fff;  /*color de la fuente*/

padding:2px 5px;

word-wrap: break-word;

overflow:hidden;}

.tb911rp-gallery a img {background: #eee;

float: left;

padding: 5px;

box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);

-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);

transition: background-color 0.4s;

-webkit-transition: background-color 0.4s;

-moz-transition: background-color 0.4s;}

.tb911rp-gallery a:hover img {background: #e8e8e8;} /*color del borde de la imagen al pasar el raton por encima*/

 

Nos vamos a panel de control <> Paginas <> Nueva Pagina. Se nos abriráun editor de entradas y le damos la opciónHTML y dentro de ella pegamos el siguiente código

Esta es la etiqueta de DIY, entonces le pondré de titulo

Listado de post DIY

<script>

var tb911rpg_thumbSize = 150;

var tb911rpg_showTitle = true;

</script>

<script src=”/feeds/posts/summary/-/DIY?max-results=500&alt=json-in-script&callback=tb911rpGallery”></script>

Ahora supongamos que queremos poner otra etiqueta que se llame Blogging

Listado de post Blogging

<script>

var tb911rpg_thumbSize = 150;

var tb911rpg_showTitle = true;

</script>

<script src=”/feeds/posts/summary/-/Blogging?max-results=500&alt=json-in-script&callback=tb911rpGallery”></script>

 

Lo que esta en rojo lo cambiamos por le valor del ancho y el alto que le quieras dar a la miniatura

Lo que esta en naranja lo cambiamos por la etiqueta que quieras mostrar en el Indice

Lo que esta en verde el numero de post que quieras que aparezcan

Lo que esta en rosa lo cambiamos por la dirección del blog

Todo esta en que pongas bien la etiqueta, tal y como la escribes al hacer la entrada, si tiene una mayúscula tendrás que ponerla, si tiene un punto también, porque o sino no te sale el índice de esa etiqueta. Si quieres poner mas etiquetas pues vuelves a poner el mismo código cambiando siempre el nombre de la etiqueta.