Código para agregar entradas relacionadas en Blogger con miniaturas

En este artículo te mostraré cómo crear bloques que miniaturas para poder poner en tus artículos Relacionados con imágen en miniatura en blogger. Código  html nos permitirá mejorar tu posicionamiento web y hacer para que tus visitantes puedan ver más artículos y así se queden más tiempo haciendo que Google considere tu web como web relevante de tal manera, se podrá conseguir más visitas.

Artículos Relacionados en Blogger - El Blogger SEO

¿Dónde debe estar ubicado el bloque de artículo relacionado?

La ubicación correcta para que tu código html se visualiza en la parte inferior de cada entrada web te lo digo porque es fundamental cada entrada tenga artículos relacionados por lo mínimo porque así la gente podrá continuar visualizando más tu contenido web, porque he visto varias webs que muestran los artículos relacionados al comienzo de entrar una entrada, esto debemos considerarlo una mala práctica ya que estas sobrecargando demasiado a tus visitas.

¿Cómo insertar el Gadget Artículos Relacionados en Blogger?

Paso 1. Conecta con Blogger

Paso 2. Acceder a la pestaña Plantilla 

Paso 3. Haz copia de seguridad usando el botón Crear/Restablecer copia de seguridad Paso 4. Presiona el botón Plantilla HTML 

Paso 5. Sitúa el cursor del ratón en cualquier linea del editor 

Paso 6. Pulsa Ctrl F o Ctrl B Paso 7. Pon este texto en el buscador de la plantilla </head>. 
Paso 8. Copia este bloque de código y pégalo justo debajo de la linea encontrada en el paso anterior.

<!-- 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]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyXNHWegrlrxZVohac5oFYqk0ffZqmFoJrsheJthsAZE_vkmHsyeCBeISnY2-hVX1YRPBxALcuU10T_iBpSSmCswI68r49dfWCYi6eogfRUIrCNgBILDmpjOMt-_WSMqMSpp0hMvCSwf_3/';

}

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

Después, ve y busca el siguiente codigo (Debes marcar la casilla de Expandir artilugios):

Código HTML:

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

Y justo abajo, pegamos este otro:

Código 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 número de post a mostrar, solo hay que editar esta linea: var maxresults=4; (cambiando el 4 por el número de entradas a mostrar).
Espero que te haya servido mucha ayuda la publicación y no te olvides comentar para saber si te ha servido la publicación.

SI TE GUSTO LA PUBLICACION NO TE OLVIDES COMPARTIR CON TUS SEGUIDORES. GRACIAS

• Tweet
• Share
• Share
• Share
• Share