Como poner en blogger las entradas relacionadas

27 de febrero de 2017
poner en blogger 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:
poner en blogger entradas relacionadas ejemplos
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.

8 comentarios:

  1. Muchas gracias!

    ResponderBorrar
  2. Hola, ¿ Qué tal? me ha servido el tutorial, muchas gracias, lo único es que no se visualiza en la versión móvil. ¿ como sería posible visualizar los post relacionados en el móvil también? muchas gracias. Espero tu respuesta

    ResponderBorrar
    Respuestas
    1. Perdona la tardanza .. haré un tutorial al respecto. Saludos!

      Borrar
  3. Buenos días, Sol.
    Bien explicado y expuesto, aunque después de enredar durante días no me ha permitido dejarlo como yo quisiera. Me explico. Puedes verlo funcionando en mi blog. Y se ve en el móvil bien, el texto centrado, pero no en el pc, que aparece el texto a la izquierda y super estirado, lo que no permite saber bien de qué tema se trata.
    El paso 2, lo he colocado en el post-footer.line2 que aparece en primer lugar, porque si lo coloco en el segundo me aparece duplicado. Ahí es donde debería aparecer para quedar centrado todo.
    De todas formas, gracias por tu aporte.
    Un saludo

    ResponderBorrar
  4. Me olvidé de pasarte el blog donde lo he implementado.
    https://curioson.blogspot.com/2019/11/lexico-de-la-montana-palentina-area-del.html

    ResponderBorrar
    Respuestas
    1. Te deje un comentario en tu blog! No estoy segura si entendí bien o ya estaba solucionado porque pasó demasiado tiempo.. pero cualquier cosa puedes escribirme a mi correo y veo que ocurre.

      Borrar
  5. ¿Qué pasa si no aparece lo del paso 2?
    post-footer-line-2

    ResponderBorrar
    Respuestas
    1. Es complicado decirlo sin saber como es tu plantilla.. si me pasas el link de tu blog puedo ver que está ocurriendo. Puedes escribirme sol.pourcel@gmail.com.. Saludos!

      Borrar
Muchas gracias por dedicarle tu tiempo a mi blog! Espero que la entrada te haya gustado y no dudes en dejar tu opinión en un comentario ♥ (Por favor no dejes spam)