lunes, 3 de junio de 2013

Añadir un thumbnail en los títulos de las entradas de Blogger

Añadir un thumbnail en los títulos de las entradas de Blogger
Para acceder a distintos elementos, Blogger utiliza un sistema de etiquetas que permiten incluir contenido de manera dinámica y automática en el blog. Éstas etiquetas incluyen un valor denominado "data:", el cual funciona como prefijo para acceder a dicho contenido. En esta oportunidad aprovecharemos el valor "data:post.thumbnailUrl", para poder insertar un thumbnail de cada post de manera sencilla y sin necesidad de matarnos buscando scripts complicados.


Como es posible apreciar en la siguiente imagen, la imagen en miniatura que previsualiza el post se ve a la izquierda del título de cada entrada (Haz clic en la imagen para observar mejor):


El tutorial:
Advierto primeramente que la imagen no superará los 72 píxeles de alto y ancho, por lo que si intentamos aumentarlo la imagen se distorcionará, pero que podemos disminuir el tamaño sin problemas para poder adaptarla a nuestros títulos.

Paso Nro 1


En "Diseño | Edición HTML" deberás marcar "Expandir plantillas de artilugios". Posteriormente busca la siguiente línea:

<h3 class='post-title entry-title'>



Paso Nro 2


Abajo de ésta pega el siguiente código:

<img style="float:left;border:1px solid #ccc; background:none;padding:5px; width:72px;height:72px;" expr:src='data:post.thumbnailUrl'/>



Previsualiza la plantilla y si el cambio es exitoso, puedes guardar los cambios.

Consideraciones:
  • Si deseas cambiar la orientación de la imagen, entonces reemplaza "float:left" por "float:right".
  • Es posible eliminar el borde suprimiendo los atributos "border:1px solid #ccc" y "padding:5px;"
  • Si la imagen "choca" con el texto, puedes añadir un márgen para solucionarlo.
  • Para redimensionar la imagen, basta con editar los valores "width" y "height" por el ancho y el alto correspondientes.
Si la imagen se encuentra debajo del salto de página, entonces ésta no se mostrará.

2 comentarios:


  1. Just want to say your article is as amazing. The clearness in your post is just nice and i could assume you are an expert on this subject. Well with your permission allow me to grab your RSS feed to keep updated with forthcoming post. Thanks a million and please continue the enjoyable work. hotmail email sign in

    ResponderEliminar
  2. hola como pongo el titulo por debajo de la imagen

    ResponderEliminar