martes, 5 de febrero de 2013

Entradas relacionadas en blogger

Colocar entradas relacionadas con miniatura en blogger es una forma de crear enlaces a otras entradas del blog que se relacionan con el artículo que se está leyendo. También es otra entradas más sin hablar del de posicionamiento de seorimícuaro. Porque además de crear buen contenido, también debemos buscar que el blog se vea bien, yo en busco las dos cosas pero me gusta compartir lo que aprendo y lo que voy poniendo en práctica. Hoy sin seorimícuaro quiero compartirles como realicé las entradas relacionadas en miniatura para Mi Blog en Blogger.

Este código es el que utilizo también en mi blog de Agua y Sig (que a propósito tengo tiempo que no publico por estar trabajándole al posicionamiento de seorimícuaro). En este momento no recuerdo que blogs consulté, recuerdo que el código inicial que tenía era de Jmiur, no recuerdo bien si utilicé algo del Potro, pero si coloqué los estilos como los de Oloman.

Paso 1. entes del </head> pegamos el siguiente código.

<!-- Entradas relacionadas con miniatura. Script y Estilo -->
<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, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;

}
#related-posts a{
/*color:black;*/
color:#EB0F0F;
text-align:center;
}
#related-posts a:hover{
/*color:black;*/
color:#EB0F0F;
text-align:center;

}
#related-posts a:hover {
/*background-color:#d4eaf2;*/
background-color:#B3CA88;
}
#related-posts img {
  /* las propiedades de las miniaturas */
  height: 72px;
  padding: 5px;
  width: 72px;
border: 2px;
background-color:#000;
float:center;
}

</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]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZqpiYjPwXQHwXMq6FmYl4XkQucIYf1oL74nnMAZE5ReXkGKnUbAlHkl4G6jlfxv74u3w-JCsw2_N0BE2P8aUdWMcnSa5DA2d_BIYzKxjPbCFjwfCed8A4_g-jD6m_pdFU1dqtXkT-rJI/s400/noimage.png';
}
if(relatedTitles[relatedTitlesNum].length>80) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 80)+"...";
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:105px;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: 10px; 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>


Paso 2. Busca la línea de código siguiente:<div class='post-footer-line post-footer-line-2'/>. Pega el siguiente código.

<!-- Entradas relacionadas con miniatura -->
<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><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5; <!-- numero de entradas relacionadas -->
var relatedpoststitle=&quot;Posts relacionados&quot;; <!-- titulo post relacionados -->
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>


Obtendrá el siguiente resultado al final de cada Post.

entradas-relacionadas

9 comentarios:

  1. No funciona el codigo, xq creo q sus scripts estan caidos u.u
    arreglalo porfa

    ResponderEliminar
    Respuestas
    1. Hola Ganardiner, ese es el script que yo estoy utilizando y me funciona, revisalo bien quizá copiaste algo mal.

      Eliminar
  2. Graaaaaacias very much!
    Me va perfectamente, me costo mucho encontrar class='post-footer-line post-footer-line-2' jajaja

    ResponderEliminar
    Respuestas
    1. Hola ProgrammingHeroes, que bueno que te sirva, veo que lo pusiste en práctica, eso me gusta

      Eliminar
  3. Muchas gracias, lo coloque en mi blog y funciona de maravilla, solo tengo que jugar con lo css para que me quede más estético.

    Una pregunta.. ¿Los post relacionados aparecen aleatoriamente o sigue el patrón de las etiquetas de cada post?

    ResponderEliminar
    Respuestas
    1. En cada una de las categorías aparecen en orden cronológico, el ultimo artículo publicado aparecerá en la parte superior de la lista

      Eliminar
    2. Ok, muchas gracias.

      Una consulta:

      ¿Cómo puedo aumentar el tamaño de las miniaturas?

      Saludos.

      Eliminar
  4. Instalado y queda genial. Muchas gracias!! Estuve tiempo probando distintos script para lograr esto y ninguno funcionaba.

    Por cierto, para gente que tenga problemas, creo que es importante el sitio en que se pega el segundo código. Hay que buscar <div class='post-footer-line post-footer-line-2>, como bien se dice aquí, pero ponerlo después de dicha etiqueta div, no dentro de ella (después de la etiqueta de cierre </div>). También he leído que es importante que esté debajo del código de las etiquetas (labels).

    Junto a los maestros en la tecnología blogger aquí citados (JMiur, El Potro...), hay que sumar al autor de este blog. Felicidades!! Los interesados por ver cómo me ha quedado están invitados a mi blog (La Grafiteca).

    ResponderEliminar

Tu comentario es importante...