Hasta ahora muchos usan el gadget de Linkwithin, pero este presenta la limitación de solo mostrar hasta 5 entradas y depender de una plataforma externa. Aquí les traemos el mismo truco maravilloso para la visualización de los post o entradas relacionadas debajo de cada una de las entradas de su blog, junto con miniaturas, pero totalmente independiente. Los artículos relacionados son elegidos entre otros de la misma categoría / etiqueta. Con este hack muchos de sus lectores se mantendrá en su sitio durante largos períodos de tiempo en los que ven los mensajes de interés relacionados.
Pasos para Añadir el widget de Mensajes Relacionados a Blogger / Blogspot
Paso 1. Ir a Panel de control >> Diseño Blogger HTML >> Editar;
Paso 2. Marque la casilla "Expandir plantilla de artilugios" ;
Paso 3. Buscar con (Ctrl + F) este trozo de código:
</head>
Paso 4. Copia y pega el siguiente código justo antes de / por encima de
</head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<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, “Times New Roman”, 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/AVvXsEjdcfM5_ntgZ5yQwuo2PKaly6WnIR2w5O2fanqdBfk_PWrfxWvGMjGopsrM_rmGQQ5gCIKmWZDazOFIw9ntU_J9R1N9bBzeh-1qNL8682MwubrmqZKbnrcCkaTolE7lVZ6e0WVVG74fOZK1/s1600/noimage.png";
var maxresults=5 ;
var splittercolor="#d4eaf2";
var relatedpoststitle="You might also like these posts";
</script>
<script src='https://dl.dropbox.com/u/14895124/Javascript/related-posts-with-thumbnails-for-blogger%5B1%5D.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Nota:
para cambiar la imagen predeterminada cuando no hay imágenes disponibles, sustituir el URL en azul con otra de su elección.
-para la visualización de más de 5 mensajes, cambie el valor de "5 maxResults var = 5;"
-eliminar el código de color violeta si desea que los mensajes relacionados que se mostrará en la página principal también
Paso 5. Ahora busca el siguiente código:
<div class='post-footer-line post-footer-line-1'>
Si no lo encuentra, a continuación, busque la siguiente:
<p class='post-footer-line post-footer-line-1'>
O:
<data:post.body/>
Paso 6. Copia y pega el siguiente código justo después de cualquiera de estas líneas
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwvt_zTvZ_OcJaakhM4PrRvj_sNKXG5jLlo1n1aeBbI5mm_pnG6W4qSYc9ex-TXG9HOLuh-m4kPQXN6P1G-Gy42utDPJyU1sQKuir0Oxa9cU7JUBEstjc7c-XhD4c65pU4Vp8VRvoqOwry/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
Nota: - cambiar el valor 6 de max-results = 6 con el número de mensajes que desea que se muestren.
- Si desea que los mensajes relacionados que se mostrará en la página principal también, eliminar el código decolor violeta.
Paso 7. Guarde la plantilla
