Ahora aquí este maravilloso método para mostrar el widget de Entradas relacionadas debajo de cada una de las entradas de su blog, con miniaturas. Los artículos relacionados son elegidos entre otros de la misma categoría / etiqueta. Con este truco muchos de sus lectores se mantendrán en su sitio durante largos períodos de tiempo mientras navegan por los enlaces de Entradas relacionadas.
Bueno ahora veamos como hacer para ponerlo en nuestro Blog.
Paso 1: Ir a Panel de control de Blogger >> Plantilla >> Edición de HTML
Paso 2. Marque la casilla "Expandir plantilla de artilugios".
Paso 3 Buscar con (Ctrl + F) la siguiente Línea:
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/AVvXsEje5f7iLbuU-fOI-ivSrJXalC7pLkMN6P1EiRIHedgI0pJjznq-2nWwz6sQ5VOZ25DbXDir1r9tV_faUj5IWdcITkkz4T_jQbNxsdV6WddfD55N0nCz7oUDkUaN5QYh5g2vp7ptNg0SHYf0/s1600/noimage.png";
var maxresults=5 ;
var splittercolor="#d4eaf2";
var relatedpoststitle="Entradas Relacionadas";
</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 el titulo del Widget, cambie el texto de color naranja por el que guste.
- Para cambiar la imagen predeterminada, cambie el URL de Rojo, con la URL de la imagen que guste.
- Para la visualización de más de 5 entradas, cambie el valor de "5 maxResults var = 5;"
- Quitar el código de color violeta si desea que el Widget se muestre en la página principal también
Paso 5. Ahora busca el siguiente código:
<data:post.body/>
Si usas el Diseñador de Plantillas Busca este:
<div class='post-footer-line post-footer-line-1'>
Paso 6. Copia y pega el siguiente código justo después de una 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/AVvXsEg1dHbw7CHJe-_y08P2mLbgmYj4t4eZwKzN4jgsfHXjZoB7md_4tmp7jVMwOPkevdgCo9KmJnEwcJvgNhCY_htQP6XaW4pqzv1sbn19mVWF8Rk53oRnPE1FEqXM-QTRxAjuLnsInQ5d_A8n/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 de color violeta.
Paso 7. Guarde la plantilla
Fuente: Generacion OPin
