Tutorial: Artículos relacionados con imagen en miniatura

esejoker468

1
Pi
Marketing
Verificación en dos pasos desactivada
Desde
16 Ene 2011
Mensajes
5.845
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: Articulos relacionados con imagen en miniatura
 
Última edición:

vicarlone

1
Pi
Redactor
Verificación en dos pasos desactivada
¡Excelente comerciante!
Desde
6 Abr 2009
Mensajes
10.487
Excelente aporte! Gracias :)
 

Desmond

Beta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios!
Desde
30 Nov 2011
Mensajes
81
lo probé y no funcionó
 

CES Angel

Préstamo
Gamma
SEO
Verificación en dos pasos desactivada
Desde
29 Dic 2011
Mensajes
205
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

Iota
Diseñador
Verificación en dos pasos desactivada
Desde
15 Ene 2010
Mensajes
2.415
Muy bueno el tuto, gracias se agradece!
 

letasgon

Delta
Verificación en dos pasos desactivada
Desde
21 Dic 2011
Mensajes
606
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

1
Pi
Redactor
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
14 Mar 2011
Mensajes
5.761
Buen aporte!
 

DMRAN

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

Zeta
Verificación en dos pasos desactivada
Desde
17 Nov 2011
Mensajes
1.983
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

Dseda
Redactor
Verificación en dos pasos desactivada
Desde
7 Abr 2010
Mensajes
1.159
gracias por el aporte :encouragement:
 

letasgon

Delta
Verificación en dos pasos desactivada
Desde
21 Dic 2011
Mensajes
606
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 desactivada
Desde
16 Ene 2011
Mensajes
5.845
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
 
T

trabajosweb

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

roning

Gamma
Diseñador
Verificación en dos pasos desactivada
Desde
31 Dic 2011
Mensajes
229
Huyyy muchas gracias, es lo que estaba buscando desde hace tiempo.
 

txk13

Beta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios!
Desde
5 Dic 2011
Mensajes
61
Muchas gracias por el aporte!:encouragement:
 

Torrecus

Dseda
Domainer
Verificación en dos pasos desactivada
Desde
31 Jul 2011
Mensajes
1.198
Excelente aporte, lo revisaré más adelante.
 

Zetta

Gamma
Programador
Verificación en dos pasos desactivada
Desde
27 Ago 2011
Mensajes
325
Se agradece el aporte :encouragement:
 

Luzka

Zeta
Verificación en dos pasos desactivada
Desde
17 Nov 2011
Mensajes
1.983
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
 

Crea una cuenta o accede para comentar

Debes ser un miembro para poder comentar

Crear cuenta

Crea una cuenta en nuestra comunidad

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba