Cómo poner artículos relacionados en medio de una entrada en Blogger

Felipe Arango

hace 1 año · Actualizado hace 1 año

artículos relacionados en medio de una entrada en Blogger

Hola a todos, en esta ocasión les compartiré un tutorial de como crear un post relacionado o articulo relacionado en medio de las entradas automáticamente con un look sencillo.

De hecho, muchos han hecho este tutorial con un aspecto diferente, pero si no has encontrado el estilo adecuado para tu modelo, tal vez puedas probar este.

El script que voy a compartir esta vez usa javascript puro sin jQuery para que no tenga un impacto negativo en la carga de tu blog y automáticamente aparezca en medio de la publicación sin tener que volver a escribir manualmente en cada publicación, también puede definir en el párrafo cuántas publicaciones relacionadas aparecerán.

Cómo poner una publicación relacionada en medio de un artículo de blogger

Ingresar a blogger.com, seleccione Tema y Editar Html
Copie el CSS a continuación y colóquelo sobre el código ]]></b:skin>

.post-relatedText{position:relative; margin:42px 0;padding:1.5em 0; border:1px solid #eceff1;border-left:0;border-right:0; font-size:14px;line-height:1.8em;}
.post-relatedText h3, .post-relatedText h4, .post-relatedText b{font-size:13px;font-weight:400; margin:0;padding:2px 14px;background-color:#fefefe;border:1px solid #eceff1;border-radius:15px; position:absolute;top:-15.5px;left:20px}
.post-relatedText ul, .post-relatedText ol{margin:8px 0 0;padding-left:20px}.post-relatedText a{text-decoration: none}
.post-relatedText a:hover{opacity:.9}

Así que copie el código de abajo y colóquelo justo debajo del código </b:includable> hay muchos códigos como este, puede elegir el que todavía está en el código de la etiqueta head en lugar de la etiqueta body, si está en el lugar equivocado no funcionará.

<b:includable id='postTextRelated'>
        <div class='post-relatedText' id='post-relatedText'>
          <script>/*<![CDATA[*/ var relatedTitles = new Array(); var relatedTitlesNum = 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]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; 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] = relatedTitles[i];}} relatedTitles = 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((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');} /*]]>*/</script>
          <b:if cond='data:post.labels'>
            <b:loop index='i' values='data:post.labels' var='label'>
              <b:if cond='data:i&lt;1'>
                <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' rel='preload'/>
              </b:if>
            </b:loop>
          </b:if>
          <b>Ver también :</b>
          <script>removeRelatedDuplicates(); printRelatedLabels();</script>
        </div>
      </b:includable>

La parte que marqué se puede cambiar, los resultados máximos = 3 el número 3 es la cantidad de líneas de publicaciones relacionadas que desea mostrar, ajústelas según sus preferencias

En el último paso, copie el código a continuación y colóquelo justo debajo del código <data:post.body/> generalmente hay más de 1 código dependiendo de la plantilla que esté usando, intente uno por uno.

<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='postTextRelated'/><script>/*<![CDATA[*/ function insertAfter(tbh,tgt) {var prt = tgt.parentNode; if (prt.lastChild == tgt) {prt.appendChild(tbh);} else {prt.insertBefore(tbh,tgt.nextSibling);}} var tgt = document.getElementById("post-body"); var midAd3 = document.getElementById("post-relatedText"); var showAd3 = tgt.getElementsByTagName("p"); if (showAd3.length > 0) {insertAfter(midAd3,showAd3[5]);}; /*]]>*/</script>

(midAd3,showAd3[5] que marqué el número 5 significa que la publicación relacionada aparecerá después del quinto párrafo, así que ajústelo, recuerde al escribir el párrafo, debe usar la etiqueta P, si usa la etiqueta BR, entonces la etiqueta relacionada con el la publicación no aparecerá

Guardar y ver los resultados.

Felipe Arango

Siento pasión por el diseño web y las páginas web. Expreso mis ideas en miwebperfecta.com.

Deja una respuesta Cancelar la respuesta