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

esejoker468 Siguiendo
Seguidores
8

1
Pi
Marketing
Verificación en dos pasos activada
Verificado por Binance
Suscripción a IA
Desde
16 Ene 2011
Mensajes
6.481
Edad
29
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:
Articulos-relacionados-con-imagen-en-miniatura.png

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
 
Última edición:

CES Angel

Préstamo
Gamma
SEO
Desde
29 Dic 2011
Mensajes
203
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 :(
 

letasgon

Delta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
21 Dic 2011
Mensajes
604
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.
 

DMRAN

Épsilon
Redactor
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
4 Jun 2011
Mensajes
938
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

Iota
Verificación en dos pasos activada
Desde
17 Nov 2011
Mensajes
2.031
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!
 

letasgon

Delta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
21 Dic 2011
Mensajes
604
Prueba debajo de esta línea luzca, si es para aprender a hacer de todo.

HTML:
<div class='post-footer-line post-footer-line-'>
 
Última edición:

esejoker468

1
Pi
Marketing
Verificación en dos pasos activada
Verificado por Binance
Suscripción a IA
Desde
16 Ene 2011
Mensajes
6.481
Edad
29
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
 

roning

Gamma
Diseñador
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
31 Dic 2011
Mensajes
228
Huyyy muchas gracias, es lo que estaba buscando desde hace tiempo.
 

Luzka

Iota
Verificación en dos pasos activada
Desde
17 Nov 2011
Mensajes
2.031
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í :p Pero esta segunda que me diste ya está, quedó perfecto, mil gracias por el aporte y tu atención!!! :D
 
Arriba