Entradas relacionadas con miniaturas

Ahora que se está poniendo de moda el gadget de Linkwithin, he recordado que vi en Agosto un script de Blogger Widgets, que basado en la idea de las clásicas entradas relacionadas mediante enlaces de texto, desarrollaba un poco más la cosa incluyendo una imagen en miniatura. Como lo del Linkwithin es poco configurable por no decir nada y cualquier día lo hacen de pago o nos meten algo que no nos guste, más vale estar preparados con un sistema alternativo que bien podría ser este y que salvo por su rendimiento, es prácticamente igual que el otro.


La relación de estas entradas con la del post dónde se muestra, no está tan lograda como con Linkwithin. Esto es porque este sistema se guía exclusivamente de las etiquetas para encontrar las similitudes. Pero bueno, cumple bastante bien su función de ofrecer entradas relacionadas y, como se ha dicho, puede servir de alternativa.

Para instalarlo sin depender de scripts en alojamientos externos, he incluido el susodicho de manera que quedará en nuestra plantilla. Comenzamos en Diseño > Edición de HTML y pinchamos en "Expandir plantillas de artilugios". Localizamos el </head> y justo antes copiamos el script y el código para configuración CSS, que por su extensión, ocultamos pero dejamos disponible pinchando aquí.

<!-- 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;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</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/AVvXsEioPyvXf5TL9O3V0ZkrJibdRXDQs4sTuvWtKQW_-tM-1Upktj__AJqxk-1zCicrUCrWAOtPKc1_HWH6TKtMOkxf4UDS3WIL7krKRzVILFPqzyZys0amUxqECkICEGNvutLQnb7UArTYYx0/s400/noimage.png';
}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
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:72px;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: 12px; 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>
<!-- Entradas relacionadas con miniatura. Script y Estilo -->

Una vez hecho esto, seguimos hacia abajo y buscamos el lugar dónde queremos que aparezcan los enlaces. Allí pondremos el siguiente código. Lo normal será que lo pongamos en el pie del post (post-footer) y si tenemos plantillas clásicas, dentro de post-footer post-footer-line-3. Si tenemos ya algo metido ahí, pues lo colocamos a continuación para que esto salga lo último.

<!-- 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;
var relatedpoststitle=&quot;Posts relacionados&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Entradas relacionadas con miniatura -->

Si guardamos, ya tendremos disponible nuestro nuevo artilugio. No podremos apreciar los cambios con Vista Previa, porque tanto en el script como en la parte HTML, se ha incluido una condición para que sólo sea visible en las entradas individuales (item). Habrá que acceder a una entrada cualquiera para poder verlo en funcionamiento.

En esta última parte de código, var maxresults sirve para indicar el número de entradas relacionadas que queremos mostrar y var relatedpoststitle, para el texto que queremos mostrar delante de ellas. Las características de fuente, fondo y efecto hover, se puede configurar desde la primera parte del primer código facilitado aquí.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter