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:
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 != "item"'>No hay nada que editar acá.
<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>
Paso 2
<div class='post-related'>Aquí cambia solo lo que señale con negrita que es el texto que aparecerá en el título.
<div class='title-box'>
<h4>Puede que te interesen:</h4>
</div>
<b:loop values='data:post.labels' var='label'>
<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'>var defaultnoimage="http://i.imgur.com/TdxRZn5.png";
var maxresults=3; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>
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!
Por ultimo busca y pega arriba de ]]></b:skin> el siguiente código:
.post-related {Ahora solo debes personalizarlo como más te guste y listo ♥
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;
}
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.
No olvides que puedes escribirme a sol.pourcel@gmail.com por cualquier duda que tengas.
o bien en la edición HTML pegar esto: