Tema: Artículos Relacionados con imagen en miniatura

Muy bueno, gracias.

Muchísimas gracias! Intenté con varios y o no me andaban o no me gustaban. Este es excelente, muy personalizable. Nuevamente, gracias por el aporte!

Gracias por el tutorial. Se agradece.

Gracias por compartir compañero, seguro que le daré uso a uno de mis otros blogs

ya me lo ponga a hacer gracias!

Hola, disculpa esto también funciona con miniaturas de videos, o solo imágenes?
a y otra es como le cambio el tamaño de letra al texto?
saludos

Iniciado por esejoker468

Que onda betas!

Hoy quiero compartir este tutorial para poner Articulos Relacionados con imagen en miniatura en Blogger. Me e decidido a poner este Tutorial, ya que muchos aun utilizan en LinkWithin, y aparte de que tiene algunos errores, te deja un molesto link a su pagina.

E visto muchos tutoriales de Articulos Relacionados en Blogger, pero la mayoría solo muestra una lista de articulos sin Imagen en Miniatura.

El resultado sera el siguiente, el cual se mostrara al final de cada entrada:

Aqui les dejo los pasos para que puedan poner sus Articulos relacionados con imagen en miniatura:

Primero debes buscar el siguiente codigo:

Código HTML:

</head>

Cuando encuentres ese codigo, debes pegar el siguiente, justo arriba:

Código HTML:

<!-- Articulos relacionados con miniaturas -->
<b:if cond='data:blog.pageType == "item"'>
<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:[URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=d4eaf2]#d4eaf2[/URL]
}

</style>

<script type='text/javascript'>
//<=!=[=C=D=A=T=A=[

//Script by Aneesh of [url]www.bloggerplugins.org[/url]
//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 [URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=d4eaf2]#d4eaf2[/URL]"');
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 -->

Despues, ve y busca el siguiente codigo (Debes marcar la casilla de Expandir artilugios):

Código HTML:

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

Y justo abajo, pegamos este otro:

Código HTML:

<!-- Articulos relacionados con miniaturas -->

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6&quot;=' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=4;
var relatedpoststitle="Articulos Relacionados";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

<!-- Articulos relacionados con miniaturas -->

Para editar el numero de post a mostrar, solo hay que editar esta linea: var maxresults=4; (cambiando el 4 por el numero de entradas a mostrar)

Espero y les sea de ayuda esta información, ya que es muy importante tener los Artículos Relacionados para que la gente pase mas tiempo en tu blog.


Fuente: Articulos relacionados con imagen en miniatura

Excelente, gracias por compartirlo!

Iniciado por locomian

Hola, disculpa esto también funciona con miniaturas de videos, o solo imágenes?
a y otra es como le cambio el tamaño de letra al texto?
saludos

Es solo para miniatura de imágenes.

Revisa el CSS y hay podrás editar el tamaño del texto.

Interesante! gracias