Widget de publicaciones relacionadas con InArticle para el tema de Blogger

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:

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

Estilo 2 de CRP:

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

Estilo 3 de CRP:

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