Mostrar los post más populares de nuestro blog, el más reciente, o las etiquetas que cada uno contiene, son algunas de las herramientas que podemos usar para mostrarles a nuestros lectores que tipo de contenido tiene nuestro blog. Pero qué pasa cuando queremos decirles que hay más post con un tema similar al que acaban de leer, pues para esto sirven los post relacionados.
Existen varios sitios en donde se ofrece un widget para mostrar post relacionados dentro de nuestro blog, pero en su mayoría requieren que realicemos un registro muy tedioso y sobre todo no ofrecen una personalización libre, dándonos como resultado un widget feo que afectara la apariencia de nuestro blog.
Pero para esto hay una opción muy simple, la cual solo requiere agregar tres bloques de código dentro del HTML de nuestra plantilla de blogger y a su vez muy fácil de modificar para que de la apariencia que deseemos. Hay que aclarar que para tener un buen resultado la mayoría o todos los post de nuestro blog deben de coincidir en al menos una etiqueta.
Paso 1.- Ir a la opción "Tema", clic en "HTML", clic en el código de nuestro blog y presionar las teclas Ctrl + F, para que aparezca el recuadro de búsqueda y allí escribiremos "</head>" (Sin comillas) y colocaremos el cursor antes de esta etiqueta.
Clic sobre la imagen para ampliar.
Paso 2.- Pegar el siguiente código:
<!--Post relacionados-Parte 1-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/* Estilo CSS*/
#post_relacionados {margin:0;padding:0;}
#post_relacionados h4 {font-family:'Open Sans';font-weight:700;color:#4c4c4c;padding:0 0 0 5px;margin:0 0 10px 0;font-size:22px;float:left;letter-spacing: -1px;}
.postrelacionadosclase {background:#fff;color:#888;font-size:100%;font-weight:normal;line-height:150%;overflow:hidden;padding:0;}
#postrelacionados_img .news-text {display:none;}
ul#postrelacionados_img {margin:0;padding:0;}
ul#postrelacionados_img li {float:left;list-style: none outside none;margin:0 0 0 0;padding:0;overflow:hidden;width:25%;}
ul#postrelacionados_img li a {display:block;color:#3b9af3;}
ul#postrelacionados_img li a:hover{color:#6fb7f8;}
ul#postrelacionados_img li img {background-color:#fff;width:160px;height:90px;margin:0 5px 0 5px;padding:0px;vertical-align:middle;transition:all 5s ease-out;}
ul#postrelacionados_img li img:hover {opacity:0.9;}
ul#postrelacionados_img li a.relinkjdulx {background-image:none;
display:block;font-family:Arial;font-size:12px;font-weight:normal;overflow:hidden;padding:5px;text-transform:none;}
</style>
<script type='text/javascript'>
//<![CDATA[
//Post Relacionados
var relnojudul = 0;
var relmaxtampil = 4;
var numchars = 100;
var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="https://4.bp.blogspot.com/-HR08Pha7bd0/W4M4zQD0hxI/AAAAAAAAALI/zgGQiYhvwwMQkR4VGvEBAYRHFnnZjHu2gCLcBGAs/s1600/grey-howto4beginners.png"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<relmaxtampil){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><div class='overlayb'></div><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li>";document.write(q);r++;if(r==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
//]]>
</script>
</b:if>
<!--Post relacionados-Parte 1-->
La línea marcada en naranja la podemos modificar para que nos muestre más o menos miniaturas de los post relacionados, el valor por default esta en 4. La línea marcada en azul indica el número de caracteres del título de nuestro post que serán visibles, si nuestro post tiene un nombre mayor a 100 caracteres este no se mostrara por completo. Estos valores determinaran la apariencia de los post relacionados, asi que hay que tener cuidado en no asignar un valor muy grande.
Paso 3.- Ahora vamos a escribir en el recuadro de búsqueda “post-footer-line post-footer-line-3” (Sin comillas) y justo antes de la etiqueta "</b:includable>" colocaremos el cursor, tal y como se muestra en la siguiente imagen:
Clic sobre la imagen para ampliar.
Y a continuación pegaremos el siguiente código:
<!--Post relacionados-Parte 2-->
<b:if cond='data:blog.pageType == "item"'>
<div id='post_relacionados'>
<div class='postrelacionadosclase'>
<h4>
Posts Relacionados
</h4>
<div class='clear'/>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50"' type='text/javascript'/>
</b:loop>
<ul id='postrelacionados_img'>
<script type='text/javascript'>
artikelterkait();</script>
</ul>
</div>
</div>
<div style='clear:both;'/>
</b:if>
<!--Post relacionados-Parte 2-->
“post-footer-line post-footer-line-3”, indica la posición en la que queremos que nuestros post relacionados se muestren, si la ubicación que aquí se muestra no es de su preferencia, pueden escoger cualquier otra siempre y cuando recuerden que se debe pegar el código antes de la etiqueta de cierre "</b:includable>".
Paso 4.- Ahora vamos a buscar “</body>” (Sin comillas) y pegaremos antes de esa etiqueta el siguiente código:
<!--Post relacionados-Parte 3-->
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i<thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("post_relacionados",210);
</script>
</b:if>
<!--Post relacionados-Parte 3-->
Después de haber copiado todas las líneas de código anteriores ya solo nos queda guardar e ir a nuestro blog, entrar a alguno de nuestros post y al llegar al final podremos ver el resultado.
"GRACIAS POR TU VISITA"
Si te gusto este artículo sobre “Cómo poner post relacionados en tu Blog”, por favor compártelo con tus conocidos, en tus redes sociales y sobre todo no olvides dejar un comentario, todo esto me será de gran ayuda para seguir mejorando la calidad del blog.
No hay comentarios.:
Publicar un comentario