Entradas relacionadas con imagen

domingo, 9 de mayo de 2010
Hace un tiempo agregamos en nuestro blog unos bloques de entradas relacionadas al final de cada post, gracias al truco ofrecido por Eduardo, de Pazos Blogger.


La verdad es que se trata de una opción muy interesante y sencilla de añadir en tu blog, así que a continuación te mostramos los pasos que debes seguir para conseguirlo:

1.  Nos dirigimos a Diseño>Edición de HTML y expandimos los artilugios. Tras esto buscamos el código  </head>, y encima pegamos lo siguiente:

<!-- Comienzo Entradas relacionadas -->
<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:20px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Segoe UI, Lucida Grande, Arial;
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://i825.photobucket.com/albums/zz180/latrucoteca/Verentrada.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:13px;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>
<!-- Final Entradas relacionadas-->
2. Después busca la siguiente parte:
<div class='post-footer-line post-footer-line-1'>
Y tras ello agrega el siguiente bloque:

<!-- Comienzo entradas relacionadas con imagenes -->

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

<!-- Final entradas relacionadas con imagenes -->

3. Por último puedes modificar la parte de rojo por el número de entradas relacionadas que desees que aparezcan, y ya tendrás disponibles estos interesantes elementos al final de cada entrada de tu blog.

Un saludo!
dar de alta en buscadores
Seguros generales

26 comentarios:

  • Felix Casanova

    Gracias, ya quería aplicarlo sin ayuda de servicios externos.

    Un abrazo

  • La Trucoteca

    Felix
    Nos alegra que te haya gustado este "truquito" :)
    Por cierto, ya hemos visto esa entrevista y por ahí nos hemos pasado :D :D
    ¡Muchísimos saludos!

  • chicashot1

    excelente me quedo divino muchas gracias

  • La Trucoteca

    Chicashot1, nos alegramos de que te haya quedado bien ;)

    Un saludo!

  • Daniel

    Hola!!

    excelente el truco, sólo un problemita...

    hay forma de cambiar el formato del titulo?

    Es que me aparece en negrilla y mayúscula y desentona con el resto del blog :(

    muchas gracias por la respuesta!!

  • La Trucoteca

    Daniel, si quieres que no salga en negrita, elimina esta línea: font-weight: bold;
    Respecto a las mayúsculas, no te debería aparecer así (a no ser que tengas algo como text-transform: uppercase en tu plantilla)

    ¡Saludos!

  • RocksNRules

    Que tal!

    Los títulos de las entradas no me salen completos, ¿cómo hago para aumentar el número de letras que aparecen?

    http://rocksnrulestv.blogspot.com


    Un saludo

  • -

    Que grosoo ! Gracias amigo, te pasaste con el aporte, hace rato venia buscandolo y en ninguno funcionaba pero este si !! Gracias :)!

  • Cesar

    Hola que tal, gracias por la información
    me sirvió de muchisimo, pero abrá alguna forma de cambiar en color de letra, ya que mi blog tiene fondo negro,y quisiera que las letras de entradas relacionadas salgan de color blanco.
    http://conocetodocom.blogspot.com/
    Gracias....

  • Brugalo

    Hola, hice todo pero no me apareció nada, ¿ Tarda en aparecer o sale hay nomás que guardas los cambios? Gracias

  • ıł[·N¡¯|¯®Õ·]łı

    A mi me sale por arriba de la entrada, como hago para que aparezca abajo?
    Saludos y gracias por el tuto.

  • ıł[·N¡¯|¯®Õ·]łı

    @CESAR,

    YO LO LOGRE CAMBIANDO ESTO :

    #related-posts h2{
    font-size: 1.6em;
    font-weight: bold;
    color: black; <-- POR white

    Saldos.

  • Evento y Gestión, Charo García.

    Hola, me pasa como a Brugalo, no me aparece nada, ¿qué puedo estar haciendo mal?

    www.eventoygestion.net

  • La Trucoteca

    Hola Charo. Pues puede que no aparezca porque haya problemas con las nuevas plantillas, pero ahora hemos visto que tienes puesto el gadget de LinkWithin para las entradas relacionadas (que es una alternativa también), así que no podemos ver que pasaba :/

    Saludos!

  • Brugalo

    Charo, yo lo solucione porque me faltaba hacer esto, entra a: Configuración--> Feed del sitio--> Permitir feeds del blog--> y Selecciona "Completo"

    Automáticamente me apareció, avisame si te funciono! Saludos :)

  • AIRON

    no me funciona, chequea que puede estar mal

  • Rosa

    Gracias, hasta ahora ponía las entradas relacionadas "a mano", y esto me pareció una buena idea... perono no aparece nada ¿alguna idea?

    saludos

  • Niños en mochila

    Mucha gracias por el tutorial. He podido insertarlo sin ningun problema.

    Solo una pregunta: ¿Se puede cambiar el tamaño? Es que solamente voy a mostrar 3 entradas relacionadas y quedan un poco pequeñas, además de cortarse los títulos.

  • Margarita

    Hola disculpa pero no he podido instalarlo, la primera parte lo puse por arriba de head espero que eso no sea el problema, pero viendo los comentarios tal vez no se me instale por la plantilla de mi blog http://hallyudream.blogspot.com/ Que puedo hacer??

  • Eddy

    hey gracias!! me ha servido de maravilla, mejor q el linkwithin o como sea xD!! un saludo

  • Laura

    Muchas gracias por el tutorial.
    Yo quería saber si sólo aparecen las entradas relacionadas en los post individuales o hay alguna forma de que se vean en la portada del blog.
    Gracias!!

  • Construya Facil

    Muy facil de implementar de la forma que lo explicas,

    podrias explicar como implementarlo de esta forma?

    http://vagabundia.blogspot.com/2011/05/entradas-relacionadas-con-slider.html#comment-form

    la verdad no he logrado entenderlo muy bien,

    gracias.

  • Chris Aramayo

    Es verdad Brugalo a mi tampoco me aparecia nada y puse lo del feed... y listo...

  • Eliseo Insfran

    Muy bueno yo lo inplementé en mi blog

  • blog

    gracias por el codigo, voy a ver como hago para que las vistas en miniatura sean mas grandes

  • JhOn Portilla

    Hola, gracias por este truco. Pero tengo una duda en la parte del primer codigo hay una linea que dice
    "thumburl[relatedTitlesNum]='http://i825.photobucket.com/albums/zz180/latrucoteca/Verentrada.png';"

    Es una URL, pero como hago yo para cambiarla y poner una relacionada con mi blog'??

    Gracias

  • Ir Arriba