Header Ads

SEMrush: analiza a tu competencia con Semrush, empieza gratis a aplicar el SEO para tu blog.

ENTRADAS RELACIONADAS EN BLOGGER

no busques más links externos e ingresa a la plataforma de blogspot para relacionar los post
Para comenzar a visualizar mejor la experiencia del lector, es decir que tenga más tiempo en nuestro blog, les traigo un nuevo tuning para la plataforma de blogger. En éste mismo lo que haremos es ir a la plantilla html de nuestro blog y buscaremos el final de la etiqueta, lo haremos oprimiendo contro + F y le damos enter,  aparecerá </head> e incertaremos el código siguiente:



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


Con posterioridad podrás corregir lo que desees, solo con que entres a la personalización de Javascript.  Por caso como se muestra la miniatura de imágenes en nuestra plantilla de blogger:

 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>');normal;">'+relatedTitles[r]+'</div></a>');

Y acá puedes modificar los valores a los diferentes atributos, por ejemplo si quieres una imagen que por defecto venga de tu blog:


 http://1.bp.blogspot.com/-FeKY1cIGlbM/TnnKJ7XLnsI/AAAAAAAABY8/FJanm5jFIeU/s1600/noimage.png

El número de entradas y el bloque, cómo le llamarás por caso:
var maxresults=5;
var relatedpoststitle=&quot;Entradas Relacionadas&quot;;

 En donde va el número son las entradas relacionadas, su cantidad, es decir el número que desees de ellas, En donde te indica entradas relacionadas puedes llamarle como tú desees -post relacionados, novedades relacionadas, noticias relacionadas, etc.-

Ahora  buscaremos en el cuerpo body lo siguiente, volvemos a  buscar con Control F y le damos a:

 <div class='post-footer'>

Lo probable es que el código te aparezca duplicado y entonces arriba de ésta línea pondrás el siguiente código -justo antes de comenzar la línea dada- es decir previo a la etiqueta, pega esto:

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

Ahora si te gustó como quedó tu blogger con entradas relacionadas, no dude en hacérmelo saber. Guarda tus cambios en la plantilla y disfruta de las entradas que se visualizarán solo en ellas. Una pequeña ventaja…las relaciona por etiquetas!!

VER EL VIDEO DEL POST
Con la tecnología de Blogger.