domingo, 25 de octubre de 2009

Articulos relacionados con miniaturas para Blogger

Este gran artilugio mejora ostentosamente la usabilidad de un blog en Blogger, al permitir imágenes junto los vínculos de los artículos relacionados a un post desarrollada en bloggerplugins, esta es una versión con pocas mejoras, se cambian algunos parámetros y se remueve código oculto (un par de vínculos con display:hidden), además de agregar una imagen en español cuando un post no tiene imágenes.

Primero que nada vamos a Edicion HTML y marcamos Expandir plantillas de artilugios.

Localizamos </head> y justo antes pegamos el siguiente código:
<!-- Articulos relacionados con miniaturas -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>

#related-posts {
margin:0;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px; /*  Se puede usar para centrar el contenido */
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia;
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]='http://lh4.ggpht.com/_NNS6r_z4aeg/SuOQIOq8y3I/AAAAAAAAN_o/hD-YGKj_QFg/sinimagen.jpg';

}

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>
<!-- fin artículos relacionados -->

Ahora buscamos <div class='post-footer-line post-footer-line-1'>
puede estar definida en algunas plantillas como <p class='post-footer-line post-footer-line-1'>.

Pegamos justo despues:
<!-- Articulos relacionados con miniaturas -->

<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>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;Artículos relacionados&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
<div style='clear:both'/></div>
</b:if>

<!-- Articulos relacionados con miniaturas -->

La plantilla normal y más pequeña de Blogger sólo puede contener  4 espacios, así pues

var maxresults controla el número número máximo de cuadros, en CGnauta está ajustada a 6, pero para ello se requiere un espacio mínimo de 500 px en el ancho del post, si se pasan del ancho, los cuaros se apilaran ordenadamente.

La condicionante <b:if cond='data:blog.pageType == &quot;item&quot;'> puesta encerrando el estilo y el script, cerradas con <b:/if> sólo se cargará en páginas interiores optimizando el tamaño de la página renderizada.

Los artículos relacionados están activados en mi sitio y pueden verse abajo.

Comentarios y Consultas

Los mensajes son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

21 comentarios:

  1. Si no quiero mostrar las miniaturas.. ¿Que parte del codigo tengo que borrar?

    ResponderEliminar
  2. Pues no se que resultados imprevistos daría, pero sería remover <img style="width:72px;height:72px;border:0px;" src="'+thumburl[r]+'"/><br/>

    Pero mejor te recomiendo:http://www.blogmundi.com/2007/10/17/posts-relacionados-en-blogger/

    ResponderEliminar
  3. exelente funcionado gracias por compartir exelente trabajo

    ResponderEliminar
  4. Muchisimas gracias, funciona perfectamente. Un rato he paso configurandolo a mi gusto y quedo perfecto.
    Un saludo

    ResponderEliminar
  5. hola disculpa, queria saber si me podrias ayudar,el caso es que al ponerlo en mi blog funcionaba perfectamente,pero al poner nuevas entradas,las imagenes en miniatura,de dichas entradas,no aparecen, y hace que se deforme un poco la barra de articulos relacionados.

    saludos.

    ResponderEliminar
  6. Mándame la plantilla al correo del sitio y se la instalo.

    ResponderEliminar
  7. Mmmm...bueno parece que si funciona,pero no con ciertas imagenes,en algunas entradas sale la imagen con miniatura,en otras no.

    ResponderEliminar
  8. Con el tiempo y con un buen etiquetado aparecerán todas correctamente.

    ResponderEliminar
  9. Hola y muchas gracias por este widget pero mi pregunta es si se puede modificar para mostrar domas las imagenes? como articulos relacionados solo con imagenes?
    Gracias y Saludos

    ResponderEliminar
  10. En el Script borra:

    <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>

    Y con eso ya no aparece el texto.

    ResponderEliminar
  11. Hola, maaravilloso tutorial, pero sabrías decirme cómo hago para poder centrarlo?

    ResponderEliminar
  12. Solamente agrega a #related-posts la regla:

    margin:0 auto 0 auto;

    ResponderEliminar
  13. graciasss
    a mi me sirvió mucho este post
    tengo una consulta
    quiero que "artículos relacionados" tenga el mismo font y color que el resto de mi blog
    como lo hago?

    ResponderEliminar
  14. Cambia la propiedad color de las reglas css al color que necesites por ejemplo color:#cc0000;

    Reglas a cambiar:

    #relacion-posts a

    Es para el color del texto normal

    #relacion-posts a:hover

    Para el color del texto al poner el cursor sobre este.

    #relacion-posts h2

    Para el color del título.

    ResponderEliminar
  15. A mi no me funciono e hise todo correctamente, porque puede pasar esto?. Gracias.

    ResponderEliminar
  16. Quizás debas hacer ensayos en otro blog, aunque no sé si pueda ser el script de Disqus el que interfiera, pues como puedes ver, mi blog tiene implementado el script.

    ResponderEliminar
  17. Habria alguna posiblidad de implementar las entradas relacionadas en la sidebar?

    ResponderEliminar
  18. No lo sé nunca lo he probado como sugieres, algunos datos podrían no funcionar al estar fuera de post-body.

    ResponderEliminar
  19. No logro ubicar éstas líneas, no aparecen en mi blog

    "div class='post-footer-line post-footer-line-1'>

    "p class='post-footer-line post-footer-line-1'>.

    ResponderEliminar
  20. puedes buscarlo solo como post-footer-line post-footer-line-1, recuerda expandir los artilugios.

    ResponderEliminar

Samurai Jack (2017), episodio 10 "Final"

Samurai Jack (2017)Jack se enfrenta por fin con Aku, todos tratan de ayudar al samurai y la sorpresa vendrá del pasado.

[Leer artículo...]

Noragami entra en paro indefinido

Noragami es suspendida temporalmenteUna de las autoras no puede continuar con su trabajo al frente del manga y se ha decidido meter la historia en hiatus, lo que puede significar...

[Leer artículo...]

Tales of Zestiria y su final Yuri

El final de Tales the Zestiria The XLas aventuras de Sorey llega a su fin con un final de lo más raro que he visto hasta ahora.

[Leer artículo...]

Warau Salesman New (2017) El vendedor sonriente

Warau Salesman New (2017) EstrenosSatoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.

Anexos

Bitacoras.com