Entradas relacionadas en blogger

Colocar entradas relacionadas con miniatura en blogger es una forma de crear enlaces a otras entradas del blog que se relacionan con el artículo que se está leyendo. También es otra entradas más sin hablar del de posicionamiento de seorimícuaro. Porque además de crear buen contenido, también debemos buscar que el blog se vea bien, yo en busco las dos cosas pero me gusta compartir lo que aprendo y lo que voy poniendo en práctica. Hoy sin seorimícuaro quiero compartirles como realicé las entradas relacionadas en miniatura para Mi Blog en Blogger.

Este código es el que utilizo también en mi blog de Agua y Sig (que a propósito tengo tiempo que no publico por estar trabajándole al posicionamiento de seorimícuaro). En este momento no recuerdo que blogs consulté, recuerdo que el código inicial que tenía era de Jmiur, no recuerdo bien si utilicé algo del Potro, pero si coloqué los estilos como los de Oloman.

Paso 1. entes del </head> pegamos el siguiente código.

<!-- Entradas relacionadas con miniatura. Script y Estilo -->
<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;*/
color:#EB0F0F;
text-align:center;
}
#related-posts a:hover{
/*color:black;*/
color:#EB0F0F;
text-align:center;
}
#related-posts a:hover {
/*background-color:#d4eaf2;*/
background-color:#B3CA88;
}
#related-posts img {
  /* las propiedades de las miniaturas */
  height: 72px;
  padding: 5px;
  width: 72px;
border: 2px;
background-color:#000;
float:center;
}
</style>
<script type='text/javascript'>
//<![CDATA[
//Script by Aneesh of www.bloggerplugins.org
//Released on August 19th August 2009
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZqpiYjPwXQHwXMq6FmYl4XkQucIYf1oL74nnMAZE5ReXkGKnUbAlHkl4G6jlfxv74u3w-JCsw2_N0BE2P8aUdWMcnSa5DA2d_BIYzKxjPbCFjwfCed8A4_g-jD6m_pdFU1dqtXkT-rJI/s400/noimage.png';
}
if(relatedTitles[relatedTitlesNum].length>80) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 80)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}}}}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs() {
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))) {
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
}}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px #d4eaf2;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:72px;height:72px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:105px;padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 10px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
if (r < relatedTitles.length - 1) {r++;} else {r = 0;}
i++;
}
document.write('</div>');
}
//]]>
</script>
</b:if>

Paso 2. Busca la línea de código siguiente:<div class='post-footer-line post-footer-line-2'/>. Pega el siguiente código.

<!-- Entradas relacionadas con miniatura -->
<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>
<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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5; <!-- numero de entradas relacionadas -->
var relatedpoststitle=&quot;Posts relacionados&quot;; <!-- titulo post relacionados -->
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

Obtendrá el siguiente resultado al final de cada Post.