Páginas

15/1/13

Poner artículos relacionados en Blogger


En esta ocasión os comparto como poner artículos relacionados en miniaturas en nuestro blog. De esta forma cuando vean una entrada publicada de nuestro blog podrán ver también las miniaturas de otras publicaciones. Para realizar esto tendremos que ir a Diseño, Edición HTML. Recordad hacer una copia de seguridad de la plantilla del blog por si acaso, desde la opción que aparece a la derecha llamada Crear copia de seguridad/Restablecer.


Al hacer clic para abrir la plantilla HTML, nos aparecerá el siguiente mensaje, haremos clic en continuar.


El siguiente paso será expandir las plantillas de artilugios, así que marcaremos la casilla. Presionaremos las teclas Conrol+F(a la vez)y nos aparecerá una barra adicional de búsqueda.


Ahora en la barra de búsqueda pondremos </head> a continuación copiáis el código que os dejo.



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




Ahora lo pegaremos justo antes de </head>



De nuevo en la barra de búsqueda adicional pegaremos el siguiente código.

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

Si este no funciona probar con este otro.

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

continuación de este código pegaremos este otro.





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

<!-- Articulos relacionados con miniaturas -->




Podréis cambiar la cantidad de entradas relacionadas, ya que con este código solo nos aparecerán 4, para poder modificarlas copiar en la barra adicional de búsqueda var maxresults=4; y cambia el numero 4 por a o 6.

Por ultimo solo hay que guardar la plantilla haciendo clic en Guardar plantilla. Para ver cómo queda solo tenéis que hacer clic en el título de una nueva entrada y los veréis justo debajo de ella.

Este tutorial lo encontré en este blog:



Si algún código no funciona me dejáis un comentario y lo repondré lo antes posible.

Me habéis dicho que no funciona en el nuevo diseño de plantilla que ha puesto ahora actualizado blogger, si esto os sucede podéis utilizar: 
                   



11 comentarios :

  1. Muy bueno el tuto, pero desafortunadamente no me funciono :S espero me puedas ayudar , seguí el tuto paso a paso, he intentado con otros que tienen el mismo procedimiento y nada.
    gracias.

    ResponderEliminar
    Respuestas
    1. Hola Dany C como respuesta a tú pregunta pueden pasar dos cosas, dependiendo de que plantilla se utiliza no aparecen los artículos relacionados el porque no lo se pero es así esta puede ser tu causa, la otra es que se haya estropeado la plantilla del blog me explico el HTML de la plantilla la única opción que queda es que utilices otro tutorial diferente para poner artículos relacionados pero ya me has dicho que has probado más o utilizar linkwithin que no suele dar problemas, siento no poder ayudarte más un saludo.

      Eliminar
    2. Dany, si Lucía me permite, estos códigos trabajan a partir de 2 cosas las etiquetas y el feed, así que es importante que estés usando etiquetas en tu blog y que el feed sea público.
      Yo con otro código lo probé en mi blog de pruebas y me estaba volviendo loco, no iba y era por eso, pues ese blog no es público.

      Luego no me gustaba como quedaba porque el que estaba probando no usaba miniaturas y así acabé en este otro blog (que guardo para el futuro).

      este me va genial, ahora a adaptar las CSS y listo.

      Un saludo.

      Eliminar
    3. Muchas gracias en Tumás por tu comentario siempre esta bien otra opinion y si es con solucion mejor que mejor

      Eliminar
  2. Hola Lucia, gracias por el articulo, pero resulta que a mi no me sale por ninguna arte ninguno de los dos últimos código!

    Y he visto tu impresión de pantalla para transcribir palabras cercanas a este código y sus combinaciones nada... en fin seguiré buscando...
    Abrazos

    ResponderEliminar
  3. Respuestas
    1. Ya respondí a tu pregunta en el bog que tienes espero te sirva la respuesta un saludo

      Eliminar
  4. Funciona a la perfección, ¡y mucho mejor que Link Within!
    Solo una cuestión ¿cómo aumento el tamaño de las imágenes en miniatura?

    Gracias (:

    ResponderEliminar
    Respuestas
    1. Hola Photonica gracias por visitar mi blog, a tú pregunta no se como agrandar las imágenes mira en el enlace que hay al final del tutorial donde encontré como poner articulos relacionados puede que entre los comentarios de la publicación este la solución a tu pregunta. Yo personalmente no lo modificaría puede que resulten demasiado grandes un saludo.

      Eliminar
  5. Muchismas gracias fue con cuidado pero no fue dificil!!!gracias por ser de bendicion para muchos blogeros como yo!!!!Abrazos y FELIZ DIA..

    ResponderEliminar
    Respuestas
    1. Gracias por la visita me alegra que fuera mas fácil de lo que parece un saludo

      Eliminar