▷ Código Script para crear enlaces internos automáticos en Blogger

 

enlaces internos automaticos en blogger

En Wordpress existen varios métodos para agregar enlazados internos automáticos o post relacionados dentro de los artículos creados, también conocidos como interlinking In Article y sabemos lo importante que es esto a nivel de SEO.

Pero... ¿Qué ocurre en el caso de que tengas un sitio web creado con Blogger?

En el caso Blogger, no hay manera de instalar plugins que realice algún procedimiento de manera automática, pero no quiere decir que no puedas añadir algunas que otras funciones y características similares a la de Wordpress. 


Crea enlaces internos o Interlinking automático en Blogger 2022

En Blogger es posible añadir algunas funciones especiales como el enlacazo interno o post relacionados InArticle mediante la implementación de un código llamado "Script", estos script se encargan de ejecutar una función determinada por el usuario o creador del programa.

Generalmente para implementar el código en tu pagina de Blogger es importante contar con algunos conocimientos básicos, ya que será necesario acceder al código HTML.

Antes de hacer una modificación y meter mano en el código HTML, realiza una copia de seguridad de tu plantilla de Blogger, luego entra en "Editar HTML" y añade los siguientes códigos.

El siguiente código cuenta con dos partes, la del diseño que se lo conoce como código CSS, y la del Script:

1. Copia el primer código CSS a continuación y pégalo antes del </head> 

<b:if cond='data:blog.pageType != &quot;index&quot;'> <style type='text/css'> /* Multi Related Post */ .gourabdesignmultiRelated{background-color:#e3feff;color:#002bff;margin:15px auto;display:-moz-box;display:-ms-flexbox;border-radius: 50px;border: 2px solid #00eaff;display:flex;flex-wrap:nowrap;justify-content:space-between;overflow:hidden;transition:all .3s} .gourabdesignmultiRelated:hover{background-color:#feffe6} .gourabdesignmultiRelated .content{padding:6px 27px} .gourabdesignmultiRelated .content .text{margin-right:9px} .gourabdesignmultiRelated .content a{color:#f00;text-decoration:none;line-height:1.5em} .gourabdesignmultiRelated .content a:hover{text-decoration:underline} .gourabdesignmultiRelated .icon{height:auto;min-width:55px;background:#20757d url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z&#39; fill=&#39;%23fff&#39;/%3E%3C/svg%3E&quot;) center / 40px no-repeat;transition:all .3s} </style> </b:if>


2. Ahora buscar el siguiente código <data:post.body/> en el mismo HTML, para eso abre el buscador con las teclas "Ctrl + F" y pega en el campo el código a buscar, una vez encontrado pega el código a continuación justo debajo del <data:post.body/>.

<b:if cond='data:view.isPost'> <script type='text/javascript'> //<![CDATA[ // Multi Related Post (function() {var jumlah = 4;let post = document['querySelectorAll']('.post-body br, .post-body p'),a = jumlah + 1,b = post['length'] / a;c = Array['from']({length: jumlah}, (redfx, blufx) => blufx + 1); for (let d = 0; d < c['length']; d++) {let e = c[d],f = parseInt((b * e)),g = document['createElement']('div');g['className'] = 'gourabdesignmultiRelated';if (post[f]['nodeName'] == 'P') {post[f]['parentNode']['insertBefore'](g, post[f])} else {post[f]['parentNode']['insertBefore'](g, post[f]['nextSibling'])}}})(); var relatedTitles = new Array();var relatedTitlesNum = 0;var relatedUrls = new Array();function related_results_labels(nerdfx) {for (var desfx = 0; desfx < nerdfx['feed']['entry']['length']; desfx++) {var nefx = nerdfx['feed']['entry'][desfx];relatedTitles[relatedTitlesNum] = nefx['title']['$t'];for (var ciafx = 0; ciafx < nefx['link']['length']; ciafx++) {if (nefx['link'][ciafx]['rel'] == 'alternate') {relatedUrls[relatedTitlesNum] = nefx['link'][ciafx]['href'];relatedTitlesNum++;break}}}} function removeRelatedDuplicates() {var viefx = new Array(0);var labfx = new Array(0);for (var desfx = 0; desfx < relatedUrls['length']; desfx++) {if (!contains(viefx, relatedUrls[desfx])) {viefx['length'] += 1;viefx[viefx['length'] - 1] = relatedUrls[desfx];labfx['length'] += 1;labfx[labfx['length'] - 1] = relatedTitles[desfx]}};relatedTitles = labfx;relatedUrls = viefx} function contains(yelfx, yufx) {for (var grefx = 0; grefx < yelfx['length']; grefx++) {if (yelfx[grefx] == yufx) {return true}};return false} //]]> </script> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:view.isPost'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=100&quot;'/> </b:if> </b:loop> </b:if> <script type='text/javascript'> //<![CDATA[ (function gourabdesignmultiRelated() {var text = 'Also read :';let r = Math['floor']((relatedTitles['length'] - 1) * Math['random']());let i = 0;let jumlah = document['querySelectorAll']('.gourabdesignmultiRelated');while (i < relatedTitles['length'] && i < jumlah['length']) {for (let a = 0; a < jumlah['length']; a++) {jumlah[a]['innerHTML'] = '<span class="content"><span class="text">' + text + '</span><a href="' + relatedUrls[r] + '" title="' + relatedTitles[r] + '">' + relatedTitles[r] + '</a></span><span class="icon"></span>';if (r < relatedTitles['length'] - 1) {r++} else {r = 0};i++}}})(); //]]> </script> </b:if>


En caso de encontrar mas de un <data:post.body/>, tendrás que probar pegando el código debajo de uno o del otro, luego al guardar los cambios en la plantilla HTML, podrás ver exactamente como queda generado automáticamente el interlinking en cada entrada.

Un claro ejemplo es este mismo articulo, al ir deslizando podrás notar algunas sugerencias de entradas a leer.

Esto lo tienes que hacer una única vez, ya que el enlazado interno se realizara automáticamente en cada una de las entradas que tengas y en las posteriores que crees.

Si tienes algo de conocimientos, ya podrás cambiar el estilo del código, ya sea añadiendo o cambiando los colores, tipo de letra, tamaño y demás modificaciones.


Artículo Anterior Artículo Siguiente