Post relacionados para Blogger

Post relacionados

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

Código

</head>

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

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'/>
</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

Código

var maxresults=5;

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é.

Source: bloggerplugins.org