Tips para Blogger! Entradas Relacionadas con miniaturas + Tutorial

Muy buenos días-tardes-noches, dependiendo del huso horario desde que me estás leyendo y bienvenid@s a ésta entrada que promete ser el inicio de unos cuantos tips y trucos que me he conseguido en Internet, que me han ayudado muchísimo a la hora de mejorar mi blog. Por favor lee hasta el final, ya que necesito de tu ayuda.

Dedico esta primera entrada de la nueva sección a Isabella, que abrió su blog recientemente y fue la que me inspiró para recopilar estas ideas, siempre con miras a hacer de nuestros blogs un espacio más personalizado.

Antes de empezar, quiero dejar claro que mucho de lo que publicaré en esta sección no es de mi autoría, sin embargo siempre procuraré colocar los créditos de los respectivos dueños. Generalmente, los tips son para Blogger, ya que es la plataforma que he usado hasta ahora y no he visto cómo funcionan los demás (perdónenme, usuarios de WordPress). También es importante tener claro que los pasos deben ser seguidos cuidadosamente y aprovechar aquello de “copiar y pegar” para evitar errores, te recomiendo leer el tutorial COMPLETO antes de empezar a modificar tu plantilla. Aclarado esto, empecemos!

El objeto de este tutorial es el de mostrar una lista de entradas relacionadas al final de cada post, cada una con una imagen en miniatura. Esto te ayudará a aumentar el tráfico en tu blog, ya que le ofreces al lector contenido parecido al que acaba de leer. Los pasos son los siguientes:

Paso 0: Por seguridad, te recomiendo guardar tu plantilla actual, ya que si no te funciona o no te gusta lo que cambiaste, puedas volver a su estado anterior mediante unos cuantos clicks. Este paso aplica para todos los tutoriales futuros. Para hacer un respaldo de tu plantilla:

• En el menú de la izquierda, haz click en “Plantilla”.

• Haz click en el siguiente botón (lo conseguirás en la esquina superior derecha de tu dashboard):

• Te aparecerá la imagen que sigue. Haz click en el botón naranja y guárdala en un lugar que recuerdes.

Paso 1: Ya que tengas el respaldo guardado, vamos a lo que vinimos. Para empezar, haz click en botón “Edición de HTML”

Paso 2: Te aparecerá ésta amenazadora pantallita, da click en “Continuar”

Paso 3: En la próxima pantalla que aparezca, marca la casilla “Expandir plantillas de artilugios”

Paso 4: ATENCIÓN! A partir de aquí, ten sumo cuidado. Trabaja con tranquilidad y confianza. Haremos una búsqueda en el código. Presiona Ctrl + F en tu teclado. Esto abrirá un cuadrito que lucirá algo como este (así se verá si usas Firefox)

Paso 5: En ese cuadrito pega lo siguiente y dale Enter

</head>

Paso 6: Y reemplázalo por

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:ifcond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSDQ0yPWvOKmFJCQ8PiFwyFL2Vtks8nR8srSl51alajb5PCkc39_33vVK-6ljJtJLJW-X1nzq_79RLZYPOkAIx9_kq5sc5x8E9b8BZvhyphenhyphentFXTbT0S8ULngtmS2SsFHDTS7Xr1MqTG4nL0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Entradas relacionadas";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

Paso 7: Ahora, busca lo siguiente

<div class='post-footer-line post-footer-line-1'>

Si no la consigues, prueba con esta

<p class='post-footer-line post-footer-line-1'>

Paso 8: Inmediatamente DESPUÉS de esa línea, pega lo siguiente

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript''/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>

Paso 9: Puedes ajustar el número máximo de entradas relacionadas que se muestran, editando esta línea

var maxresults=5;

Pero también debes cambiar la siguiente línea, tomando en cuenta que el número aquí debe ser uno más que el número que pongas en la línea que cambiaste arriba

max-results=6

Paso 10: Para editar el título que aparece antes de las miniaturas, cambia lo que aparece entre las comillas en esta línea

var relatedpoststitle="Entradas Relacionadas";

Paso 11: Para cambiar la imagen que aparece cuando no hay miniatura disponible, cambia el enlace a la imagen en esta línea

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSDQ0yPWvOKmFJCQ8PiFwyFL2Vtks8nR8srSl51alajb5PCkc39_33vVK-6ljJtJLJW-X1nzq_79RLZYPOkAIx9_kq5sc5x8E9b8BZvhyphenhyphentFXTbT0S8ULngtmS2SsFHDTS7Xr1MqTG4nL0/s400/noimage.png";

Paso 12: Para cambiar el color de la línea que separa las miniaturas, cambia esta línea

var splittercolor="#d4eaf2";

Paso 13: Guarda tu plantilla, cierra el cuadro de edición y revisa tu blog. Al final de cualquier entrada que abras, aparecerán las miniaturas.

Si nada de esto te funciona o te genera un problema, NO ENTRES EN PÁNICO. Simplemente déjame un comentario, o un mensaje en Facebook o Twitter, que yo te respondo lo más pronto posible.

Todo el código pertenece a Blogger Plugins y puedes encontrar el tutorial original siguiendo este link.

Espero que les haya gustado. Pronto tendré más tutoriales. Por favor, déjenme sus comentarios.

Como les dije al principio, necesito la ayuda de todos ustedes para nombrar esta sección. Me gustaría que me dejaran sus ideas en la página de Facebook y lo someteremos a votación. Cuento con ustedes. Un beso,

Denise
Twitter