Widget de Entradas relacionadas en Blogger

Hoy les voy a mostrar cómo añadir un widget personalizable de entradas relacionadas en la parte inferior de las páginas de blogger. Esta es una alternativa independiente para nRelate y LinkWithin usted no tiene que inscribirse en un servicio, compartir sus estadísticas, o mostrar anuncios cuando se utiliza este código.

Si te encuentras buscando una solución para agregar las publicaciones más relevantes para el artículo actual en la parte inferior de cada publicación de tu sitio web en blogger has llegado al lugar correcto. Este widget de entradas relacionadas en blogger utiliza las etiquetas de la publicación para mostrar las publicaciones vinculadas a ellas mostrando un carrusel de los temas más leídos.

Con este widget podrás ayudar a tus lectores a encontrar contenido valioso publicado en tu blog, lo que definitivamente reducirá la tasa de rebote y con el tiempo mejorará la clasificación de su sitio web ante los ojos vigilantes de Google.

Es importante aclarar que para instalar en tu blog este widget no usaras páginas de terceros, ni agregara ningún CSS o HTML adicional. Este widget de entradas relacionadas luce bien en cualquier sitio web en blogger, pero sabes algo de desarrollo web, puedes personalizarlo a tu gusto. El widget es totalmente adaptable, lo que significa que se ajustará dependiendo el tamaño del dispositivo donde se visualice.

Características del widget

• Fácil personalización
• El widget detectará automáticamente las entradas relacionadas y mostrará hasta 6 entradas del blog en la parte inferior de la publicación.
• No afecta el tiempo de carga del blog. Esta es la razón principal para utilizar este widget.

Paso 1: Agregar CSS en blogger

Como es habitual recomendamos realizar una copia de seguridad de la plantilla antes de proceder a su instalación, si algo sale mal, entonces podrá deshacer los cambios con facilidad. A continuación le indicamos paso a paso como agregar CSS para el widget de entradas relacionadas, pero antes de eso asegurate de copiar código que pegaremos en la opción "Agregar CSS" de Blogger.

/* Related Posts Widget */ .post-related { display: inline-block; background: #fff; padding: 10px; width:100%;  margin-top: -38px; } .post-box .heading  {  margin-bottom: 21px;  text-align: center; margin-top: 10px; position: relative; }  .post-box h4 { font-size: 46px !important; }  .post-box .heading:after  {  content: “” ;  position: absolute;  top: 100%; left: 50%;  margin-left: -11px; width: 21px;  height: 1px; margin-top: 2px; background: #b565a7; } @media screen and (max-width: 600px) {   .post-box h4 {   font-size:28px !important;   } } .item-related {     width: 30.6%;     display: block;     float: left;     margin-right: 10px;     height: 100%;     padding-left: 10px; } @media screen and (max-width: 600px) {   .item-related {  width:unset !important; padding-left:unset !important; height:unset !important; } } .item-related:last-child { margin: 0!important; }  .item-related .link { display: block; margin: -1px; margin-bottom: 0; } .item-related img  { margin-left: 0px !important;     display: block;     opacity: 1;     width: 100%;     height: 100%;     object-fit: cover;     box-shadow: none !important;  } @media screen and (max-width: 600px) {   .item-related img{ height:100% !important; } } .item-related h3  {    line-height: 20px;     margin-top: 8px;     height:111px !important; } .item-related h3 a { color: black !important;     font-size: 18px !important;     font-family: sans-serif !important; }  img.noops-smly  {  padding: 0 !important;  margin-top: -2px !important; width: 19px; display: inline; } @media (max-width: 520px) .item-related  {  width: 100%!important;  }

1. Lo primero es iniciar sesión en la página de Blogger.
2. Inmediatamente nos dirigiremos a la opción "Temas" en la barra lateral.
3. Después haga clic en el botón "personalizar".
4. Expande la sección " Avanzado ".
5. Haga clic en la opción " Agregar CSS ".
6. Finalmente pega el código CSS que has copiado arriba en el área de texto y haz clic en guardar.

Paso 2: añadir bibliotecas

En esta sección, lo guiaremos paso a paso sobre cómo incluir las librerías necesarias para instalar el widget de entradas relacionadas para tu sitio web en Blogger. Lo primero que tienes que hacer es copiar las 2 bibliotecas que te mostraremos a continuación y seguir las instrucciones para colocarlo de forma correcta.

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

1. Nuevamente nos dirigimos a la opción "Temas" que se encuentra en la barra lateral del panel de blogger.
2. Después haga clic en la " flecha apuntando abajo" y selecciona la opción "personalizar" .
3. Luego haga clic en la opción "Editar HTML".
4. Presione la tecla rápida " CTRL + F " para abrir la barra de búsqueda del editor de temas. Escribe la etiqueta </head> y presiona Enter.
5. Finalmente pegue las 2 bibliotecas que copiamos al inicio del segundo paso encima de la etiqueta </head> , como se muestra a continuación.

Paso 3: Añadir el código HTML/Javascript en blogger

Muy bien llegamos a la parte final del tutorial, en esta sección lo guiaremos para que aprenda a agregar el código HTML/JavaScript del widget de entradas relacionadas en su sitio web en Blogger. El último paso es muy similar al anterior simplemente copie el código HTML/Javascript que le mostramos a continuación y siga las instrucciones para insertarlo en su tema.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='post-bottom'>
            <div class='post-footer'>
              <!-- Footer bylines -->
              <b:include name='footerBylines'/>
            </div>
      <!--   <b:include cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;' data='{ shareButtonClass: &quot;post-share-buttons-bottom&quot;, overridden: true }' name='maybeAddShareButtons'/> -->
         <b:include cond='data:view.isMultipleItems or data:widget.type == &quot;PopularPosts&quot;' data='post' name='postJumpLink'/> 
          </div>
<script id='related-posts' type='text/javascript'> /*<![CDATA[*/ var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); var thumburl = new Array(); function related_results_labels_thumbs(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; try {thumburl[relatedTitlesNum]=entry.media$thumbnail.url;} catch (error){ s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="http://4.bp.blogspot.com/-ZoL4BRpPhkw/U6wnup4_6gI/AAAAAAAAACA/sKpM61pmJPo/s1600/no_pic_available.jpg";} } if(relatedTitles[relatedTitlesNum].length>100) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 100)+"..."; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; } } } } function removeRelatedDuplicates_thumbs() { var tmp = new Array(0); var tmp2 = new Array(0); var tmp3 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains_thumbs(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp3.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i]; tmp3[tmp3.length - 1] = thumburl[i]; } } relatedTitles = tmp2; relatedUrls = tmp; thumburl=tmp3; } function contains_thumbs(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false; } function printRelatedLabels_thumbs(current) { for(var i = 0; i < relatedUrls.length; i++) { if((relatedUrls[i]==current)||(!relatedTitles[i])) { relatedUrls.splice(i,1); relatedTitles.splice(i,1); thumburl.splice(i,1); i--; } } var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; while (i < relatedTitles.length && i < 20 && i<maxresults) { tmb = thumburl[r].replace('s72-c/','s300-c/'); document.write('<div class="item-related"><a href="' + relatedUrls[r] + '" class="link"><img width="150" height="100" src="'+tmb+'"/></a><h3><a href="' + relatedUrls[r] + '">'+relatedTitles[r]+'</a></h3></div>');i++; if (r < relatedTitles.length - 1) { r++; } else { r = 0; } } relatedUrls.splice(0,relatedUrls.length); thumburl.splice(0,thumburl.length); relatedTitles.splice(0,relatedTitles.length); } function removeHtmlTag(strx, chop) { var s = strx.split("<"); for (var i = 0; i < s.length; i++) { if (s[i].indexOf(">") != -1) { s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length) } } s = s.join(""); s = s.substring(0, chop - 1); return s } /*]]>*/ </script>
                  <div class='post-related'>
                    <div class='post-box'>
                      <h4 class='heading common-heading'> <i aria-hidden='true' class='fa fa-th-list'/> Related Posts</h4>
                    </div>
                    <b:loop values='data:post.labels' var='label'>
                     <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>                            
                    </b:loop> 
                    <script type='text/javascript'>
                      var defaultnoimage=&quot;http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png&quot;;
                      var maxresults=6; // Number Of Posts
                      removeRelatedDuplicates_thumbs();
                     printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
                    </script>
                  </div>    
</b:if>

• Utilice la tecla rápida CTRL + F para abrir la barra de búsqueda en el editor de temas de blogger, escriba <data:post.body/> y presione Enter.
• Ahora pegue el código HTML/Javascript que copiamos debajo de la línea <data:post.body/> , como se muestra en la siguiente imagen.

• Una vez incluido el código en el tema, el siguiente paso es desplazarnos hacia abajo lentamente hasta encontrar la línea Var maxresults=
• Desde esa etiqueta tendrás la posibilidad de establecer la cantidad de entradas relacionadas que se mostrarán en la parte inferior de la publicación. En el código, en este caso nosotros hemos configurado solo 3 publicaciones. Pero puedes cambiarlo según tu preferencia.
• Finalmente guarda tu tema.

Si hemos realizado todos los pasos de forma correcta, es momento de dirigirnos a alguna de las publicaciones de nuestro blog y verificar si el widget de entradas relacionadas se ha integrado correctamente o no. Si todo sale bien el widget tendrá que verse similar a este.

Personalización

Si usted es realmente bueno en CSS entonces puede hacer un montón de modificaciones. Me quedé con la anchura predeterminada, que permite un ajuste adaptable, pero si usted necesita modificar algo puede hacerlo y buscar la mejor configuración para su blog.

He restringido el número de entradas que se mostrarán a 3, esto también puede ser modificado. Este es mi widget favorito de artículos relacionados, si tiene algún problema en su instalación, espero sus comentarios.