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




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

lunes, 14 de diciembre de 2015

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

¿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 : '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>

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! :)

28 comentarios:

  1. Hola! Muchas gracias por este tutorial, el índice de post me encanta, intenté usarlo en mi blog pero no he podido hacerlo funcionar pero algo debo estar haciendo mal.
    Saludos - stclouds.blogspot.com

    ResponderEliminar
  2. Hola Carola!!
    Me encantaaaaa :D
    Encontré otro tutorial para hacerlo manualmente (estoy en ellos), pero el tuyo me parece más rápido, voy a probar, te digo y te lo comparto después!!
    Eres genial, besosssss <33333

    ResponderEliminar
    Respuestas
    1. Pues no me sale Carola. El script que va antes de head me daba problemas con el principio y el final. Le he borrado lo del empiece y el final, se me ha guardado la plantilla, he ido al índice, he colocado lo que has puesto, pero sale el código o en blanco O.o

      Eliminar
    2. Que raro Sandra, yo lo tengo instalado tal cual y me funciona. Voy a ver que puede haber salido mal! :(

      Eliminar
    3. No te preocupes, también es verdad que lo hice con prisas. Mañana que estoy libre lo miro más tranquilamente :D

      Eliminar
  3. Me gusta como queda, así que igual intento utilizar el código a ver si me sale. Muchísimas gracias.

    ResponderEliminar
  4. ¡HOla Carola!

    Buenisimo tutorial, me encantan estos tips para el blog y este indice para reseñas es algo que siempre me deja curiosa pero nunca he podido encontrar somo se hace, así que te doy las gracias por el post, voy a probarlo en mi blog y después te dio que tal salió

    Besotes

    ResponderEliminar
    Respuestas
    1. Me alegra que lo vayas a usar, ya me enseñas que tal :)

      Eliminar
  5. Guaaau, ¡llevaba tiempo buscando algo de este estilo! Va directo a mis favoritos para ponerme manos a la obra en cuanto empiece con el nuevo blog *-*

    ¡MILLONES DE GRACIAS CAROLA, Un besazo!

    ResponderEliminar
    Respuestas
    1. Ains me alegro mucho que te guste Elena!! :)
      Estoy ya con muchas ganitas de ver tu nuevo blog ^^

      Eliminar
    2. Hola Carola, hoy por fin me he puesto a ello y... ¡no consigo que funcione! >.< Me sale un hueco en blanco... ):

      Eliminar
    3. Te envío un correo a ver si lo solucionamos!

      Eliminar
  6. Mola, me lo guardo en marcadores por si algún día me da la locura :)

    ResponderEliminar
  7. Respuestas
    1. Prueba otra vez, siguiéndolo paso a paso y que no se te pase nada :)

      Eliminar
  8. puedes poner como haces los disños a los comentario pero tu blogler esta super lindo

    ResponderEliminar
  9. Soy tan patosa que no me resulta nada ;m; pero se ve divino!!!

    ResponderEliminar
  10. ¡Hola!

    Qué genial tu entrada!!! Además me encanta tu blog. Me quedo por aquí para futuras ayudas que pueda necesitar con el blog y el HTML xD jajajajaja

    un besote

    ResponderEliminar
  11. ¡Hola! Antes de nada muchas gracias por la entrada. Lo he hecho y sí me ha salido en una página pero luego quiero crear índices con otras tags en distintas páginas y, poniéndolo todo bien, no me sale. ¿Qué puedo estar haciendo mal? ¡Gracias!

    ResponderEliminar
    Respuestas
    1. Me alegra que te haya gustado! Asegúrate que escribes el nombre del tag exactamente igual con mayúsculas incluídas.

      Eliminar
    2. Ya lo pude solucionar y no se ni cómo jajaja pero bueno, lo importante es que funciona. Gracias de nuevo! :)

      Eliminar
  12. Me guardo este post en favoritos porque en un futuro me va a venir muy requete bien ;) Muchísimas gracias Carola. Me quedo por aquí para estar al tanto de todo!

    ResponderEliminar
  13. El código funciona bien en navegadores web de PC, pero para navegadores móviles no funciona. ¿Hay alguna opción para tener un tipo de índice distinto según el navegador?

    Muchas Gracias

    ResponderEliminar

Carola Marin - © 2016 Sleek Path
Blog de diseño, literatura, cine, series y mucho más.
Blogging tips