Llega el momento el la vida de todo blogger tener esta función entre sus herramientas de diseño, para obtener ese sentimiento de que lo estas haciendo bien.
Esta función permite a tus usuarios pasar de la primera hoja de tu blog, claro que pueden dar click en "post anteriores" pero, el usuario normal espera encontrar algo que le interese en no mas de 3 click. Por esto es necesario presentar al usuario con post de toda la vida de tu blog no solo solo primero 5 o 10, que claro que después de unos 10 post sin sentido el usuario se retiraría de tu blog.
Entremos al código de una buena vez, posicionaté en el panel de blogger y entra a la pestaña de Diseño luego en la opción de editar HTML.
Encuentra esta linea
E introduce esta otra antes de esta etiqueta
Código
<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/AVvXsEhgJzOWPOsuSBs6RAw8S7yrFgqG7r4X4JaNDY6XJzQrcMunrnj4KhV-ur1pKiGpqS4rM7YqyPnQDHHjjkB7MD7tTv4v3lhJNEXTag34TP4v5g1YkVAeqSU5K_Lj-DmLYRF1zEW25XuNMag/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
</b:if>
Después encuentra esta otra, no sin antes marcar la casilla de "
Expandir plantillas de artilugios"
Código
<div class='post-footer-line post-footer-line-1'>
E inmediatamente después introduce esto
Código
<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'></b:if></b:if>
Si todo marcha bien podrás observar que ya tienes 5 post relacionados en cada post que tienes en tu blog. ahora solo falta personalizarlo.
Cambiar el Texto "Related Posts" por uno de tu elección.
busca
Código
var relatedpoststitle="Related Posts";
Cambia
Related Posts por algo de tu gusto.
Cambia el numero de post relacionados que se muestran.
busca
cambia el número 5 por otro de tu elección.
Cambiar el color del separador
busca
Código
var splittercolor="#d4eaf2";
reemplaza el color en hexadecimal (#d4eaf2)por otro de tu agrado.
Puedes modificarlo mucho más,pero para eso necesitar entrar el código en java y ala estructura del CSS, si tiene alguna duda, problema o comentario. hazla en la sección de comentarios con mucho gusto te atenderé.
