Tutorial: Cómo agregar artículos relacionados con imagen en miniatura en Blogger

esejoker468 · 11 Ene 2012

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:

HTML:

</head>

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

HTML:

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

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

HTML:

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

Y justo abajo, pegamos este otro:

HTML:

<!-- 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;Articulos Relacionados&quot;;
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: Enlace eliminado

vicarlone · 11 Ene 2012

Excelente aporte! Gracias

Desmond · 11 Ene 2012

lo probé y no funcionó

Miguel43 · 11 Ene 2012

Algo falta que no se ve.

CES Angel · 11 Ene 2012

Si mis conocimientos no me fallan, creo que el script esta mal configurado y el código para agregar en el post-footer da error

Joseph · 11 Ene 2012

Muy bueno el tuto, gracias se agradece!

letasgon · 11 Ene 2012

Si mis conocimientos no me fallan, creo que el script esta mal configurado y el código para agregar en el post-footer da error

Yo hace poco, le pasé el código a Desmond en su post LinkWithin , le dí un script como el que muestra esejoker468 y a mí si me funciona.

LuisMorales · 11 Ene 2012

Buen aporte!

DMRAN · 11 Ene 2012

Muchas gracias esejoker, justamente estaba pensando añadirle esto a mi blog y me has ahorrado el tener que buscarlo por Google jaja
Muchas gracias:encouragement:

Luzka · 11 Ene 2012

Tengo un problemita, me parece excelente aporte pero no encuentro la línea

HTML:

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

:S No está en mi plantilla, en donde pego el segundo código? :ambivalence:

Gracias!

thejigg0695 · 11 Ene 2012

gracias por el aporte :encouragement:

letasgon · 11 Ene 2012

Prueba debajo de esta línea luzca, si es para aprender a hacer de todo.

HTML:

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

esejoker468 · 11 Ene 2012

Luzka dijo:
Tengo un problemita, me parece excelente aporte pero no encuentro la línea

HTML:

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

:S No está en mi plantilla, en donde pego el segundo código? :ambivalence:

Gracias!

Disculpen todos, olvide poner que la linea:

HTML:

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

Se debe buscar marcando la casilla de Expandir artilugios

disculpen

trabajosweb · 11 Ene 2012

Gracias por el aporte, mas adelante lo pongo en uno de mis blog. :encouragement:

roning · 12 Ene 2012

Huyyy muchas gracias, es lo que estaba buscando desde hace tiempo.

txk13 · 13 Ene 2012

Muchas gracias por el aporte!:encouragement:

dendurweb · 13 Ene 2012

Gracias por el aporte.

Torrecus · 13 Ene 2012

Excelente aporte, lo revisaré más adelante.

Zetta · 13 Ene 2012

Se agradece el aporte :encouragement:

Luzka · 15 Ene 2012

esejoker468 dijo:
Disculpen todos, olvide poner que la linea:

HTML:

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

Se debe buscar marcando la casilla de Expandir artilugios

disculpen

Si estaba buscando con los artilugios expandidos, pero, ni así

Pero esta segunda que me diste ya está, quedó perfecto, mil gracias por el aporte y tu atención!!!

Tutorial: Cómo agregar artículos relacionados con imagen en miniatura en Blogger

esejoker468 Siguiendo Seguidores 6

trabajosweb

esejoker468 Siguiendo

Seguidores

6