Entradas relacionadas en Blogger con Thumbnails

Entradas relacionadas en Blogger con Thumbnails

Hace algún tiempo atrás, escribí una entrada de cómo agregar un related post mediante LinkWithin, un servicio bastante bueno y muy popular basado en un widget.

En esta oportunidad enseñaré una alternativa bastante fiable mediante adición a la plantilla.

Vista previa del script:


¿Cómo añadirlo a Blogger?
Primero, vamos a ''Diseño | Edición HTML'', en donde marcamos ''Expandir plantillas de artilugios''. Buscaremos la siguiente zona: 
</head>

Arriba de esta, pegaremos el siguiente código:
<b:if cond='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="http://2.bp.blogspot.com/-R285B_Pf0q4/TbXKNLTdA8I/AAAAAAAAAzk/9cKeL67QAzc/s1600/sinimagen.jpg";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Entradas relacionadas:";
</script>
<script src='https://sites.google.com/a/blogsydescargas.co.cc/ayudabloggers/scripts2/posts-relacionados-blogger.js' type='text/javascript'/>
</b:if> 
Ahora busca la siguiente línea:
<div class='post-footer-line post-footer-line-1'> 
Si no la encuentras, busca esta otra:
<p class='post-footer-line post-footer-line-1'>

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

Si deseas cambiar la cantidad de entradas que se visualizarán reemplaza el número de la siguiente zona:
max-results=6

Si deseas reemplazar la imagen que aparecerá cuando una entrada no contenga ninguna, reemplaza la siguiente URL por la deseada:

http://2.bp.blogspot.com/-R285B_Pf0q4/TbXKNLTdA8I/AAAAAAAAAzk/9cKeL67QAzc/s1600/sinimagen.jpg
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Entradas relacionadas en Blogger con Thumbnails # - Entradas relacionadas en Blogger con Thumbnails
El pájaro de Twitter volando por el Blog # - El pájaro de Twitter volando por el Blog
Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger # - Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger
Plantilla para Blogger: Dione # - Plantilla para Blogger: Dione
Plantilla para Blogger: Ubuntu Blogger 1.0 # - Plantilla para Blogger: Ubuntu Blogger 1.0