Mil Trucos Blogger

“Post Relacionados” con imagen en miniatura

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Este truco es muy util si queremos alargar la visita de nuestros lectores ya que le mostrara otros post de tu blog que tal vez le interesen,el truco aplicado se vera asi:

Pasos
1. Buscamos en la plantilla el codigo

</head>

2. Ya ubicado este codigo pegamos arriba de este lo siguiente

<!-- Articulos relacionados con miniaturas -->
<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;
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 -->

3.  Luego buscamos este codigo

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

4. Abajo de el codigo anterior pegamos lo siguiente

<!-- 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;Post relacionados&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

<!-- Articulos relacionados con miniaturas -->

Por defecto el script solo te mostrara 4 entradas pero si quieres cambiarle el numero de entradas entonces al codigo var maxresults=4; le cambias el 4 por el numero que quieras ponerle.

 

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

26 Comentarios

  1. Abril 9, 2011    

    Esta es una sencilla forma de poner el famoso Post Relacionados :-o:-o

  2. Abril 10, 2011    

    Gracias amigo sirve de mucho ya lo coloque en todas mis webs

  3. Abril 10, 2011    

    @Jorge Luis

    Si amigo es un truco muy util,gracias a ti por visitar y comentar 😉

  4. Mayo 31, 2011    

    pues yo por más q lo he hecho tal cual…no me aparece cambio alguno!!

  5. Junio 1, 2011    

    @Paula El cambio se ve reflejado solo en las entradas y el truco si funciona,dejame la URL de tu blog para verificar cual es tu problema 😉

  6. GFR GFR
    Junio 9, 2011    

    Este comentario ha sido eliminado por el autor.

  7. Junio 10, 2011    

    @GFR Es raro que no te funcione,pasame tu plantilla para poder mirar cual es el problema.

  8. Anonymous Anonymous
    Junio 14, 2011    

    hola te comento que segui los pasos que sugieres para poner los post relacionados pero te comento que no se visualiza nada en mi blog, por qué ocurre esto? gracias por tu ayuda

    Moni

  9. Junio 15, 2011    

    @Anónimo Pues mira yo tengo este truco aplicado en este blog Blog Warez! y como te daras cuenta funciona muy bien.

  10. Junio 15, 2011    

    Pues muy seguramente el problema que tienen es que no les aparece en su pagina principal porque los cambios se ven reflejados solo en las entradas

  11. Anonymous Anonymous
    Julio 25, 2011    

    Hola podrias decirme como puedo poner que solo muestre por defecto una etiqueta especifica o label. Y que solo se muestre en una pagina estatica y no salga en el index. El personalizado ya le vi claro…gracias.

  12. Julio 25, 2011    

    @Anónimo Por favor se mas claro no te entiendo 🙁

  13. Agosto 23, 2011    

    Al fin uno que anda, y que es facil de colocar, muchas gracias de nuevo.

  14. Agosto 23, 2011    

    Fredd Hannay gracias por comentar y me alagre que el tutorial te haya gustado

  15. Diciembre 15, 2011    

    Gracias, me ha servido de mucho este truco.

    Ahora puedo mantener a mis lectores un poco mas en mi blog

  16. Diciembre 16, 2011    

    Jose Silvano Zavala Torres que bueno que te haya servido el truco,Saludos

  17. Febrero 24, 2012    

    Hola, a mi me pone entradas relacionadas debajo de los post pero no me sale nada más! ayuda!! >_<

    • Febrero 24, 2012    

      Elaine pues que raro porque la verdad el truco si sirve.

  18. Agosto 4, 2012    

    Hola, trate de agregarlo pero no encuentro el codigo:

    div class=’post-footer-line post-footer-line-1

    • Agosto 5, 2012    

      Lo buscastes con los artilugios expandidos?

  19. Enero 19, 2013    

    Hayder Juvinao como hago para que me salgue centrado y con las imagenes un poco mas grande!

  20. Mayo 17, 2013    

    he seguido tus pasos y no funciona
    mi blog es advent7d.blogspot.com

  21. Diciembre 22, 2013    

    No Me Funciono

  22. Anonymous Anonymous
    Mayo 3, 2014    

    No me sirvio

  23. Septiembre 25, 2014    

    No me funciona y lo e echo exactamente como has dicho.No se visualiza en ninguna entrada.
    http://www.dukanfacilescalera.blogspot.com

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo