Cómo poner enlaces a entradas relacionadas en blogger, blogspot.

Una manera muy eficaz de aumentar el tiempo de cada visita en vuestro blog, es colocar al final de cada entrada o post que publiquéis una lista de unos 4-5 enlaces a las entradas relacionadas con el post. Si esto lo lográis hacer de manera automática para que aparezca en todos y cada uno de vuestros post mucho mejor. Y es justo los que os voy a enseñar a hacer en pocos pasos a continuación:

Lo primero que debemos de hacer, es ir a nuestro escritorio del blog y en Plantilla buscamos donde ponga HTML y lo pulsamos. Al hacerlo nos aparecerá una texto en un lenguaje de programación que seguramente nos sea totalmente ajeno, no os preocupéis. simplemente, clicaremos en cualquier parte de ese extraño texto y pulsaremos (control + F) para que despliegue un cuadro de búsqueda.

Una vez aparezca nos situamos en el, y buscamos esto : </head>

Nos lo señalara en el texto y debemos colocar el cursor justo al final de esta etiqueta y pegar el siguiente código html:

<!--Entradas Relacionadas-->
<!-- remove --><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: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}

#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}

#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>

<script type='text/javascript'>
var defaultnoimage=&quot;http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Entradas Relacionadas&quot;;
</script>

<!-- <script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger3.js' type='text/javascript'/> -->

<script>
//<![CDATA[
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 {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="http://1.bp.blogspot.com/-FeKY1cIGlbM/TnnKJ7XLnsI/AAAAAAAABY8/FJanm5jFIeU/s1600/noimage.png";}
}
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(current) {
var splitbarcolor;
if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#d4eaf2";
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==current)||(!relatedTitles[i]))
{
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
i--;
}
}
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 '+splitbarcolor+';"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:96px;height:96px;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>');
i++;
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
}
document.write('</div>');
relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length);
}

//]]>
</script>
<!-- remove --></b:if>
<!--Fin de Entradas Relacionadas-->

 

Una vez realizados estos pasos, tendremos que buscar dentro de todo el codigo de plantilla, la siguiente etiqueta <div class=’post-footer’>

(de nuevo, clicaremos en cualquier parte del texto, haremos control + F y en el recuadro de búsqueda pegaremos esta etiqueta : <div class=’post-footer’>

Si por alguna casualidad hubiera dos etiquetas como esa, lo que haremos sera colocarlo en la segunda. Una vez localizada la etiqueta colocamos el cursor justo en el reglon superior, al inicio, y pegamos el siguiente codigo html :

<!--Entradas Relacionadas-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'><br/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!--Fin de Entradas Relacionadas-->

 

Y listo! ya podemos guardar los cambios y comprobar que han surtido efecto.

Importante : siempre antes de manipular el código hatml de la plantilla, debéis hacer una copia de seguridad de esta, para poder tener un respaldo en el caso de que os de algún tipo de error.

Saber que las entradas relacionadas aparecerán en todos tus post sin que tengas que hacer nada de ahora en adelante pero, no aparecerán ni al fina de las páginas ni en la portada principal donde suelen aparecer tus ultimas entradas. Para comprobar que efectivamente los cambios han tenido lugar visita directamente la entrada o post en cuestión y lo veras al final de esta.

Es posible que tu blog sea nuevo y no tengas sufientes entradas, por lo que directamente no aparezcan, o no estén indexadas, o quizás algún otro problema pero e testado que funciona personalmente en varias webs y blogs y no debería de darte ningún problema.

Ajustes : ¿Como cambiar el numero de entradas relacionadas que se muestran?

Dentro del primer código html que pegasteis busca la siguiente linea y modificar la cifra final por la que quieras.

var maxresults=5;

Ajustes : Y para cambiar el titulo:

Simplemente, buscar la siguiente linea, y donde pone Entradas relacionadas poner también te puede interesas, Seguro que te interesa, más entradas…etc

var relatedpoststitle=&quot;Entradas Relacionadas&quot;;

About

View all posts by

10 thoughts on “Cómo poner enlaces a entradas relacionadas en blogger, blogspot.

  1. This is really attentiongrabbing, You’re a very professional blogger. I have joined your rss feed and sit up for in search of extra of your fantastic post. Also, I have shared your site in my social networks! dbdcedcgdbek

  2. como se puede hacer para visualizar mas texto del titulo porque solo aparece una pequeña parte del titulo y me gustara que se mostrara mas.
    ???????

    1. Tengo la respuesta. En la línea que pongo debajo de lugar de “70” decía “35” (como verás hay dos, así que modifica ambos “35” a “70” u otro número que te parezca apropiado)
      if(relatedTitles[relatedTitlesNum].length>70) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 70)

  3. Hola, he hecho el primer paso pero no he podido seguir porque no encuentro el código ese , he buscado en toda la plantilla pero no aparece y si lo pongo en el cuadro de búsqueda no hace nada, quiero decir que no va el cursor a ningún sitio. Bueno a estas alturas ya te habrás dado cuenta de que tengo muy poca idea de esto. Puede ser que mi plantilla no tenga el div class=’post ese ????? he encontrado muchos div class= pero ‘post ninguno. Gracias de todos modos. Carmen

Deja un comentario

Tu dirección de correo electrónico no será publicada.