Cómo Instalar Widget de Entradas Relacionadas en Blogger
Un widget de entradas relacionadas es una función que se debe tener en cuenta a la hora de diseñar un blog. Conviene no pedir a los usuarios que se unan a sesiones de varias páginas a excepción de que se ofrezcan posts de temática idéntica o que coincidan con la entrada del blog, sin importar lo bueno que sea el contenido. Por otra parte, a los motores de búsqueda les gustan los sitios en los que los usuarios permanecen más tiempo navegando por el contenido.
¿Quiere saber cómo añadir automáticamente artículos relacionados en medio de la entrada de su blog?
A continuación te presentamos una guía para que aprendas a incorporar un widget de entradas relacionadas en el centro de tu artículo en función de las categorías de las entradas, o a incluir una entrada relacionada en una línea de Blogger. Este widget también le ayudará a reducir su tasa de rebote.
Características del widget de Entradas Relacionadas
Widget de Entradas Relacionadas es un popular widget de Blogger que te permite mostrar una lista de posts relacionados en tus posts de Blogger.
En la lista se hace hincapié en el título y/o el contenido de las entradas, para que resulten más interesantes y atractivas para los lectores. Gracias a ello, podrá mantener a los usuarios durante más tiempo en su sitio, reduciendo las tasas de rebote y ofreciendo una actualización de las publicaciones más antiguas.
Son muchos los widgets de este tipo disponibles en la actualidad, sin embargo, el widget de artículos relacionados es uno de los más prácticos y además soporta los tipos de entradas personalizadas y los estilos CSS. La información relacionada se mostrará sin necesidad de sobrecargar su sitio web.
Por otra parte, con los estilos incorporados se pueden mostrar bonitas entradas relacionadas con contenidos similares. De este modo, los lectores de su blog se beneficiarán de su sitio y le ahorrarán tiempo.
Ventajas de usar un widget de artículos relacionados
Automático: Cuando habilitas el widget de entradas relacionadas, este comenzará a mostrar automáticamente las entradas relacionadas en tu sitio web.
Instalación manual: ¿Necesitas más poder sobre el lugar donde se coloca tu producto? Esta herramienta puede ser colocada entre el párrafo del artículo usando la etiqueta <br... No obstante, no hace falta ninguna acción manual para añadirlo.
Estilos: El resultado se integra en las clases CSS, permitiéndote dar estilo a la lista fácilmente. Podrás utilizar el estilo incluido o incluir tus estilos CSS personalizados desde la sección Editar HTML.
Sin desplazamiento: La lista aparecerá en medio de la entrada del blog, por lo que los lectores no necesitarán desplazarse hacia abajo.
Reduce la tasa de rebote: Permitirá reducir la tasa de rebote, haciendo que tu puntuación SEO mejore en el motor de búsqueda de Google.
Semi-Responsive: En el caso de utilizar un tema responsive de blogger, este widget también adoptará el tamaño de acuerdo con el ancho de la entrada del blog. Pero en los temas no responsivos no se ajustará al ancho del sitio.
Como instalar el widget de entradas relacionados
Te recomiendo probarlo en un blog ficticio antes de instalarlo en tu blog principal.
Para que el widget funcione correctamente, debes tener un número suficiente de entradas en cada categoría o etiqueta de tu blog.
Recuerda hacer una copia de seguridad de tu blog para evitar posibles fallas en la misma.
Paso 1: Vaya a la opción Tema y Editar HTML para abrir el editor de temas de Blogger.
Paso 2: Pega el código CSS justo encima de ]]></b:skin>. Si no sabes cómo encontrarlo, haz clic en cualquier parte del documento HTML y presiona CTR+F y en el recuadro que te aparece en la parte superior derecha, escribe </b:skin y presiona ENTER.
.bspostRelatedIn{text-align: left;padding: 15px;margin: 30px 0;border: 1px solid #ddd;border-radius: 3px;font-size: 15px;position: relative;}
#bspostRelatedIn_title{font-size: 16px;margin: 0;display: inline-block;padding: 0 10px;position: absolute;top: -14px;left: 10px;background-color: #fefefe;color: #7d7d7d;}
.bspostRelatedIn ul {list-style: none;padding: 3px 22px 0; }
.bspostRelatedIn li{ border-radius: 5px;line-height: 1.7em;margin-bottom: 0.433333em;list-style: disc;}
.bspostRelatedIn li:hover {text-decoration: underline;}Paso 3: Agrega el siguiente script justo encima de </head> en tu documento HTML del Blog.
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
// InArticles Related to Middle of Posts
var bspostRelatedIn = new Array(); var bspostRelatedInNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; bspostRelatedIn[bspostRelatedInNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[bspostRelatedInNum] = entry.link[k].href; bspostRelatedInNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = bspostRelatedIn[i];}} bspostRelatedIn = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((bspostRelatedIn.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < bspostRelatedIn.length && i < 3) { document.write('<li><a href="' + relatedUrls[r] + '">' + bspostRelatedIn[r] + '</a></li>'); if (r < bspostRelatedIn.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');let element = document.createElement('a');element.href = 'https://www.livetechy.xyz/';element.pathname = 'embed' + element.pathname;console.log(element.toString());}//]]>
</script>
</b:if>Reemplaza https://www.livetechy.xyz/ por la dirección de tu blog.
Paso 4: Para este paso, tienes que seguir la misma regla del paso 2, pero esta vez tienes que buscar la siguiente línea <data:post.body/> y una vez que la encuentres, lo reemplazas por el código que tienes a continuación.
En algunas plantillas aparecen dos o más resultados, prueba con el primero y si no te funciona, prueba con el segundo y así hasta probar con todas.
<!-- leer también -->
<div expr:id='"post2" + data:post.id'><data:post.body/></div>
<div expr:id='"post1" + data:post.id'/>
<div class='bspostRelatedIn'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<div id='bspostRelatedIn_title'>Leer también</div>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<script type='text/javascript'>
var obj0=document.getElementById("post1<data:post.id/>");
var obj1=document.getElementById("post2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf("<br/>);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>
<!-- leer también -->Si te sale el siguiente error, busca script&callback=related_results_labels&max y lo reemplazas con script&callback=related_results_labels&max
Paso 5: No te olvides de guardar los cambios realizados. Eso sería todos los pasos para la instalación.
De forma predeterminada, la cantidad máxima de entradas en este segmento es de 3. Mediante el valor predeterminado se consigue que esta sección contenga un máximo de 3 entradas de publicaciones relacionadas. Ahora bien, este valor puede ser aumentado o reducido para que se ajuste a sus necesidades.
Busca las siguientes líneas para modificar la cantidad de artículos que aparecen en el widget.
En el primer código JavaScript
bspostRelatedIn.length && i < 3
En el segundo código JavaScript
max-results=3
Conclusión:
Con este widget de entradas relacionadas para blogger, logramos que hayan más vínculos en nuestros artículos, también se le puede llamar backlinks internos.