miércoles, 23 de febrero de 2011

Posts Relacionados en Blogger

Incluir una lista con los enlaces más relevantes en nuestras entradas significa un aumento de páginas vistas, por lo que es una buena idea para que los usuarios visiten tus posts eficazmente.

Por defecto las plantillas clásicas de blogger no poseen esta función, tampoco las plantillas comunes, pero a pesar de no estar integrado, podemos añadirlo fácilmente

El resultado es el siguiente:


¿Cómo crear una sección de posts relacionados al final de cada entrada?

Primero debes ir a ''Diseño/Edición de HTML'', en donde deberás expandir los artilugios.

Después buscarás el código </head> y antes de éste, pegarás el siguiente:


<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBSucrE82HyIBBMu2bobvj3VYEt5QHH3gn37elCegLkSlJ6-vPnG5GkPTN5ywE47Nl8A01KnmPYeThQa4wchf4clp-mcxzaBl8dN88YfUjtuHsFQL10Qwej1pwJZoPFs3vNIGEZEJRHOo/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://sites.google.com/a/blogsydescargas.co.cc/ayudabloggers/scripts/postsrelacionadosblogger2.js' type='text/javascript'/>

El texto en color corresponde a la imagen que se mostrará como enumerador.

Ahora buscamos el siguiente código:
<div class='post-body> o <data:post.body/> 

y debajo de este, deberás pegar el siguiente código:


<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Posts Relacionados: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

Nota:
  • Para cambiar el número de posts relacionados, cambias max-results=5 por la cantidad que desees.

No hay comentarios:

Publicar un comentario