Como poner en blogger las entradas relacionadas

Hola soñadores! ¿Cómo están? El día de hoy les traigo un tutorial bastante fácil de como hacer para que al final de las entrada se muestren las entradas relacionadas a esta con imagen miniatura. 

Funciona mediante un script que hace que aparezca al azar tres entradas con la misma etiqueta de la que tu estas viendo. 

Aquí les dejo una imagen de ejemplo de como es el resultado:

Como pueden ver aparecen tres entradas al azar de la misma etiqueta que nuestra entrada, si hay alguna entrada sin ninguna imagen, como pueden ver, aparece una imagen que dice imagen no disponible, y si con esa etiqueta no tienen tres entradas publicadas y solo tienen dos o una, aparece solo la cantidad de entradas que tienen publicadas.

Para tenerlo en tu blog solo debes seguir estos tres sencillos pasos:

Paso 1

Ve a la edición HTML de tu plantilla, alli con CTRL + F busca </head> arriba pega lo siguiente:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-related {display: none;}
</style>
</b:if>
<script type='text/javascript'>//<![CDATA[
// Post relacionados
var classicMode = false ;var summary = 40;var indent = 3;imgr = new Array();imgr[0] = "http://i.imgur.com/TdxRZn5.png";showRandomImg = true;aBold = true;summaryPost = 170;
summaryTitle = 25;numposts1 = 6;numposts2 = 8;var classicMode = false ;var summary = 50;var indent = 3;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 {if(typeof(defaultnoimage) !== 'undefined')thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="http://i.imgur.com/TdxRZn5.png";}}
if(relatedTitles[relatedTitlesNum].length>40) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 50)+"...";
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(current) {for(var i = 0; i < relatedUrls.length; i++){if((relatedUrls[i]==current)||(!relatedTitles[i])){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--;}}var r = Math.floor((relatedTitles.length - 1) * Math.random());var i = 0;while (i < relatedTitles.length && i < 20 && i<maxresults) {tmb = thumburl[r].replace('s72-c/','s300-c/');document.write('<div class="item-related"><a href="' + relatedUrls[r] + '"><img width="100%" height="50" src="'+tmb+'"/></a><h4><a href="' + relatedUrls[r] + '">'+relatedTitles[r]+'</a></h4></div>');i++;if (r < relatedTitles.length - 1) {r++;} else {r=0;}} relatedUrls.splice(0,relatedUrls.length); thumburl.splice(0,thumburl.length); relatedTitles.splice(0,relatedTitles.length);}
//]]>
</script>

No hay nada que editar acá.

Paso 2

Ahora de nuevo con CTRL + F busca post-footer-line-2 van a aparecer dos, a nosotros solo nos interesa la segunda, debajo pega lo siguiente:

<div class='post-related'>
<div class='title-box'>
<h4>Puede que te interesen:</h4>
</div>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/" + 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'>var  defaultnoimage="http://i.imgur.com/TdxRZn5.png";
var maxresults=3; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>

Aquí cambia solo lo que señale con negrita que es el texto que aparecerá en el título.

Si no encuentras post-footer-line-2 puedes agregar debajo de  <div class='post-footer'> o
abajo de post-footer-line-1

<div class='post-footer-line post-footer-line-2'> El código </div>

 El resultado de esto depende siempre de como esté compuesta tu plantilla!

Paso 3

Por ultimo busca y pega arriba de ]]></b:skin>  el siguiente código:

.post-related {
  overflow:hidden;
  margin-top:40px;
  width: 650px; /* debes modificarlo teniendo en cuenta el ancho de tus entradas */
}
.title-box h4 {
  background: #222222; /* color del título */
  top: 10px;
  font-family: 'Arial'; /* fuente del titulo */
  font-size: 20px; /* tamaño de la fuente */
  color: #FFFFFF; /* color de la fuente */
  letter-spacing: 3px; /* espacio entre letras */
  line-height: 1.5; /* tamaño de la cajita */
  font-weight: bold; /* fuente en negrita */
  text-align: center;
  text-transform: uppercase; /* letras en mayúsculas */ }
.item-related {
  background: #FAFAFA; /* color del fondo del contenedor de imágenes */
  width:30%; /* entre mayor sea el porcentaje mayor será el tamaño de las miniaturas */
  float:left;
  margin-bottom: 20px;
  padding: 10.8px;
  border-bottom: 25px #222222 solid; /* borde negro de abajo */
}
.item-related:hover {
  background: #E3E3E3; /* color del fondo hover del contenedor de imágenes  */
} .item-related img {
  margin-top:20px;
  width:100%;
  height:auto;
  -webkit-transition: .2s;
  -webkit-filter: grayscale(1); /* imágenes en blanco y negro */
}
.item-related:hover img {
  -webkit-transition: .2s;
  -webkit-filter: grayscale(0);
}
.item-related h4 a {
  display: block;
  margin-top:10px;
  width: 100%;
  max-height:32px; /* Evita que el texto se vuelva muy largo */
  color: #222; /* color de los títulos de las entradas */
  font-size: 14px; /* tamaño de la fuente */
  font-weight: bold; /* texto en negrita */
  text-transform: lowercase; /* texto en minúsculas */
  letter-spacing: 1px; /* espacio entre letras */
  text-align: center; /* alinear texto en el centro */
  line-height: 1;
}

Ahora solo debes personalizarlo como más te guste y listo ♥

IMPORTANTE: Aparecerá la primer imagen del post. Tener en cuenta!
Si las imágenes del post son muy pequeñas no se mostraran.

Espero que les sea de ayuda el tutorial!
No olvides que puedes escribirme a sol.pourcel@gmail.com por cualquier duda que tengas.