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]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOmVd7_Z4pgtwxTF0mY3u25riEPND2TkVMXCQhVwEx1IOxo2m0BOE0MvqWXJPdDcm3kVvzSqD3oyrwkjJWsny3L8bfjGiTNOlD4e5JDhJKjJc1RIeArBxbzoobbcOruy6VtHdYZA/';

}

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 serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.

21 comentarios:

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

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

    ResponderBorrar
  3. exelente funcionado gracias por compartir exelente trabajo

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

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

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

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

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

    ResponderBorrar
  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

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

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

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

    margin:0 auto 0 auto;

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

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

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

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

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

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

    ResponderBorrar
  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'>.

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

    ResponderBorrar

El ascenso de Skywalker(2019)

Joker 2019Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

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