Tutorial: Como hacer tu propio índice de entradas con miniatura y título de la entrada

Si quieres una forma ordenada y directa de mostrar el contenido de tu blog, no hay mejor manera que crear tu propio Índice de entradas. Mostrará directamente las entradas más recientes de las categorías que tú elijas, acompañada de una imágen en miniatura y el título del post.

Con esta forma de organizar tus entradas por categorías, aquel que visite tu blog tendrá una idea muy clara sobre la temática de tu blog y sobre las diferentes secciones que publiques. Podrás tener un riconcito con tus entradas, muy sencillo, bien organizado y bonito. ¿Os apetece hacer uno? Es muy fácil como veréis a continuación.

Aprenderás a hacer algo como esto:

Listado de categoría Reseñas

Reseña: Evelina

De película: Un asunto real (A Royal affair)

Reseña: Orgullo y prejuicio

Reseña: Viajera (Outlander #3)

¿Queréis saber como hacer uno para vuestro blog?
Echad un vistazo al mio y si os convence leer todo para ver el tutorial entero.


Los pasos a seguir con los siguientes:

①  Primero de todo haced una copia de seguridad para no perder nada de nada. Después ve a Plantilla → Editar HTML y pega este código justo después de  </head> .

<script>
//<![CDATA[
function tb911rpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="tb911rp-gallery nopin" title="Get this from www.sleekpath.blogspot.com">'];
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 : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjqpdSWZ-IE1bZqWPW03yMOJGpq1Xkozfl-iZwp5A5vwvVR4COZg98Mnge7bvE9iT6lI3Bc5eMg5LFGdJ7yiN0ogwEpcjveNOXg1vmVsPEY6va9aV9mIlibalx3WKzZylt8eoJctAhyJGZ/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>

② A continuación vamos con el estilo CSS. Os he pegado aquí el estilo que uso yo en mi índice de posts pero podéis modificarlo a vuestro gusto. Pegad esto antes de </b:skin> .

/*Estilo de indice de 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 12px 15px 0 !important; text-decoration:none;}

.tb911rp-gallery .tb911-item .ptitle {
background: #f0f3f5 none repeat scroll 0 0; /*color del fondo del titulo*/
bottom: 3%;
clear: left;
color: #000000; /*color del titulo*/
display: block;
font-size: 12px; /*tamaño de la fuente del titulo*/
height: 3.5em;
line-height: 1.3em;
overflow: hidden;
padding: 7px;
position: absolute;
text-align: left; /*posicion del titulo*/
width: 90%;
word-wrap: break-word;
}

.tb911rp-gallery a img {
background: #eeeeee; /*color del fondo de las imagenes*/
float: left;
padding: 5px;
-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 fondo de las imagnes al pasar el raton por encima*/
padding: 5px;}
/*----------------------------------------- Final de estilo del indice de entradas*/

③ Y por último vamos con el script que pegaremos en nuestra página o entrada para que se vea el índice. Deberemos pegar un script por cada categoría. Puedes pegarlo dónde quieras: en una entrada, página o widget de html.

<script>
var tb911rpg_thumbSize = 150;
var tb911rpg_showTitle = true;
</script>
<script src="/feeds/posts/summary/-/NOMBRECATEGORIA?max-results=500&amp;alt=json-in-script&amp;callback=tb911rpGallery"></script>

Explicación del script:
① var tb911rpg_thumbSize = 150;  ← 150 es el tamaño de la miniatura (imágen) de la entrada, puedes cambiarlo al tamaño que quieras pero ten en cuenta que el CSS que he puesto está pensado para el tamaño de 150.  
② var tb911rpg_showTitle = true; ← True significa que muestra el título, si no quieres que se muestre el título sustituyelo por false.
③ max-results=500 ← Este es el número máximo de entradas que se muestran por etiquetas. Por ejemplo si queréis poner solo una entrada por etiqueta, pondríais un 1.

Ya sabéis que podéis ponerlo como más os guste. Si lo queréis solo con título, solo con la imágen o si queréis que solo salga una entrada por etiqueta. Eso ya es a gusto del consumidor, solo hay que ir jugando con el script hasta que te convenza el resultado.

Espero que os haya servido de ayuda y que os animéis a hacer uno. Dejadme en los comentarios que os ha parecido y si os animáis a hacerlo. ¡Nos leemos! :)