Widget de publicaciones relacionadas con InArticle para el tema de Blogger

El widget de publicaciones relacionadas es un componente esencial del diseño de un blog. No puede pedir a los usuarios que participen en sesiones de varias páginas a menos que proporcione entradas de temas idénticas o superpuestas en la publicación del blog, sin importar qué tan bueno sea el contenido. Además, los motores de búsqueda favorecen los sitios donde los usuarios pasan más tiempo examinando el contenido.

¿Puede estar pensando en cómo agregar automáticamente artículos relacionados en medio de la publicación en Blogger?

En esta publicación de blog, le mostraremos cómo usar la plataforma Blogger de Google para crear un widget personalizado de publicaciones relacionadas con InArticle y / o contextuales. En las secciones de una sola publicación, este widget aparecerá en el medio de la publicación. Verá una oleada de visitas a la página desde que se integró.

Un enfoque más inteligente es probarlo primero en un blog ficticio. Recientemente, he estado usando este widget de contenido relacionado en mi tema de blogger. Recuerde que si su blog es nuevo y solo tiene algunas entradas, el widget de contenido relacionado no puede funcionar correctamente. Como resultado, asegúrese de que el blog tenga suficientes publicaciones en cada categoría o etiqueta para funcionar sin problemas.

Esta secuencia de comandos se prueba en el tema predeterminado de Contempo Blogger y funciona bien, pero por si acaso no funciona con su tema, no se asuste, simplemente comente el problema.

Si desea saber cómo integrar un widget de publicación relacionada en el centro de su artículo en función de las categorías de publicación o cómo puede incluir una publicación relacionada en línea en el sitio web de Blogger, este tutorial es adecuado para usted. Además, este widget te ayudará a reducir la tasa de rebote.

Hay numerosos plugins disponibles para WordPress que le permiten insertar artículos relacionados en línea en su blog. Sin embargo, hay pocos widgets disponibles que nos permitan agregar publicaciones relacionadas en línea en nuestro sitio web Blogger. En la página del blogger, también es difícil mostrar automáticamente publicaciones similares en medio de un artículo.

Como consecuencia, aunque no tenga conocimientos de programación, puede agregar rápidamente publicaciones relacionadas en línea para un blogger. Por lo tanto, siga el tutorial paso a paso y conozca los beneficios.

Características clave del widget de publicaciones relacionadas con InArticle

InArticle o Contextual Related Posts es un widget de Blogger popular que te permite mostrar una lista de publicaciones relacionadas en tus publicaciones de blog en la plataforma Blogger.

La lista se centra en el título y / o el contenido de las publicaciones, lo que las hace más interesantes y es probable que atraigan la atención de los lectores. Esto le permite mantener a los usuarios en su sitio por más tiempo, reducir las tasas de rebote y actualizar las entradas antiguas.

Aunque hay muchos widgets similares disponibles en la actualidad, las publicaciones relacionadas con InArticle son una de las publicaciones más ricas en funciones y admiten tipos de publicaciones personalizadas y estilos CSS. Este contenido relacionado aparecerá sin poner un estrés excesivo en su sitio web.

Además, los estilos incorporados le permiten mostrar hermosas publicaciones relacionadas con contenido similar. Los lectores de su blog se beneficiarán de su sitio web y le ahorrarán tiempo.

La siguiente es una lista de las ventajas que obtendrá.

  • Automático: Cuando habilita InArticle o Publicaciones relacionadas contextuales, comenzará a mostrar automáticamente las publicaciones relacionadas en su sitio web y alimentará la mitad del artículo. No es necesario editar con los scripts.
  • Instalación manual: ¿Quiere más poder sobre dónde se coloca su producto? Este widget se puede colocar entre el párrafo de la publicación usando la etiqueta <br…. Sin embargo, no es necesario realizar ninguna acción manual para agregar algo.
  • Estilos: La salida se incluye en clases CSS, lo que le permite diseñar la lista con facilidad. Puede usar el estilo incluido o ingresar sus estilos CSS personalizados desde la sección Editar HTML.
  • Sin desplazamiento: El widget aparecerá en medio de la publicación del blog, por lo que los lectores no necesitan desplazarse hacia abajo.
  • Control de tasa de rebote: Reducirá la tasa de rebote, lo que mejorará su puntuación de SEO en el motor de búsqueda de Google.
  • Semi-sensible: Si está utilizando un tema de blogger receptivo, el widget también adoptará el tamaño de acuerdo con el ancho de la publicación de su blog. Pero en el tema no receptivo no se podrá ajustar con el ancho del sitio.

¿Cómo insertar un artículo relacionado en medio de una publicación de Blogger?

Los pasos a continuación son básicos y fáciles de seguir al realizar cambios en el tema de su blogger.

Agregue Core CSS y JavaScript al encabezado

Ahora comprende mejor por qué debería utilizar este script automatizado en el tema de su blogger.

Deberá ajustar la ubicación del código de representación donde desea que aparezca la sección de publicación relacionada, según el diseño de Blogger. Es una inserción sencilla e integra el widget. Entonces, comencemos a instalar este widget en el tema de Blogger siguiendo los pasos a continuación.

Antes de continuar, recomendamos realizar una copia de seguridad de su tema de blogger. Puede aprender cómo hacer una copia de seguridad del tema de su blog de Blogger correctamente.

Paso 1: Después de realizar una copia de seguridad de su tema de Blogger, diríjase al panel de Blogger. Y vaya a la opción Tema → Editar HTML para abrir el editor de temas de BlogSpot.

Paso 2: Todos los fragmentos de código CSS que se mencionan a continuación deben incluirse justo antes del ]]> etiqueta dentro del tema. La inserción debe realizarse en el mismo orden en que aparecen a continuación.


/*Start Contextual Related Post by https://www..com/ */ 
.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;}
/*End Contextual Related Post by https://www..com/ */

Como se indicó anteriormente, estas reglas de CSS se pueden modificar y ampliar fácilmente para cambiar el diseño y la disposición de las entradas de publicaciones relacionadas. Mantenga intactas las reglas originales si no está familiarizado con CSS.

Para modificar el estilo de la lista, reemplace el código CSS a continuación.

 
.bspostRelatedIn li{ border-radius: 5px;
    line-height: 1.7em;
    margin-bottom: 0.433333em;
    list-style: disc;
} 

Puede cambiar con cualquier código de abajo:

Estilo 1 de CRP:

widget de publicación relacionada con blogger con círculo

 
.bspostRelatedIn li {
    border-radius: 5px;
    line-height: 1.7em;
    margin-bottom: 0.433333em;
    list-style: circle;
}

Estilo 2 de CRP:

widget de publicación relacionada con blogger con decimal

 
.bspostRelatedIn li {
    border-radius: 5px;
    line-height: 1.7em;
    margin-bottom: 0.433333em;
    list-style: decimal;
}

Estilo 3 de CRP:

widget de publicación relacionada con blogger con cero decimal a la izquierda

 
.bspostRelatedIn li {
    border-radius: 5px;
    line-height: 1.7em;
    margin-bottom: 0.433333em;
    list-style: decimal-leading-zero;
}

Paso 3: Y, justo encima de estas reglas CSS, agregue el siguiente código JavaScript arriba / antes de la . Es el script esencial para que funcione la sección de publicaciones relacionadas.


<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<script type="text/javascript"> 
//<![CDATA[ 
// InArticles Related to Middle of Posts by https://www..com/ 
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..com/";element.pathname="embed" + element.pathname;console.log(element.toString());}//]]> 
</script> 
</b:if>

Paso 4: Es hora de terminar el último y más crítico paso, que es integrar el CSS y JavaScript centrales para el segmento de publicaciones relacionadas.

<img alt="Ahora localice » border=»0″ src=»https://1.bp.blogspot.com/–H_O0x-NDI8/YIadp1Oq_tI/AAAAAAAAUPw/RvrokInEz5YYHHUqm6aM0CySqqsMFdwawCLcBGAsYHQ/s16000/post%2Bbody.JPG» title=»script del cuerpo de la publicación de blogger»>

Ahora localice el y reemplácelo por el siguiente script


<div expr:id='&quot;post1&quot; + 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 == &quot;item&quot;'> 
<script expr:src="https://www..com/2021/04/&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;" type="text/javascript"/> 
</b:if> 
</b:loop> 
</b:if> 
<div id='bspostRelatedIn_title'>Also Read</div>
<script type="text/javascript"> 
removeRelatedDuplicates(); 
printRelatedLabels(); 
</script> 
</div> 
<div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div> 
<script type="text/javascript"> 
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;); 
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;); 
var s=obj1.innerHTML; 
var t=s.substr(0,s.length/2); 
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;); 
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} 
</script>

Paso 5: Eso es todo Justo después de los pasos mencionados anteriormente, haga clic en el icono de guardar en la parte superior derecha del tema de su blogger.

De forma predeterminada, el número máximo de entradas en este segmento es 3. El valor predeterminado garantiza que esta sección contenga un máximo de 3 entradas de publicaciones relacionadas. Pero este valor puede aumentarse o disminuirse según sus necesidades.
Por favor cambie el valor
Desde el primer código JavaScript
bspostRelatedIn.length && i <3
Desde el segundo código JavaScript
max-resultados = 3

Ahora es el momento de una conclusión ¡Correcto!

Intenté que todos estos scripts fueran lo más descriptivos posible. Si encuentra algún problema o tiene alguna sugerencia con respecto al widget de publicación relacionado mencionado anteriormente, compártalo en la sección de comentarios.

En el tema de blogger receptivo, el widget de publicación relacionada se ajustará automáticamente. El diseño y la interfaz de esta sección pueden ser completamente personalizados por usuarios avanzados. Si tiene problemas para integrarlo, comuníquese conmigo y haré todo lo posible para ayudarlo.

Entradas relacionadas

Deja una respuesta

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