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.

Demostración

Este widget es utilizado actualmente en el blog motiontechbd. Desplázate hacia la parte inferior del artículo del demo para ver cómo funciona este widget .
Demo

Características del widget

  • Facil personalización
  • El widget detectara automáticamente las entradas relacionadas y mostrara hasta 4 entradas del blog.
  • No afecta el tiempo de carga del blog. Esta es la razón principal para utilizar este widget.

Instalación

Se recomienda 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, diríjase al panel de Blogger -> Plantilla -> Edición de HTML.
– Buscar el siguiente código </head>.
– Copiar y pegar el siguiente código antes de la etiqueta </head>.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts { 
    float:left;
    width:auto; 
}
#related-posts h2 { 
    margin-top: 10px;
    background:none;padding:3px; 
}
#related-posts .related_img { 
    margin:5px;
    border:4px solid #f2f2f2;
    width:105px;height:105px;
    transition:all 300ms ease-in-out;
    -webkit-transition:all 300ms ease-in-out;
    -moz-transition:all 300ms ease-in-out;
    -o-transition:all 300ms ease-in-out;
    -ms-transition:all 300ms ease-in-out; 
}
#related-title {
    color: #222;
    line-height: 16px;
    padding: 0 10px;
    text-align: center;
    text-shadow: 0 2px 2px #fff;
    width: 100px;
}
#related-posts .related_img:hover{ 
    opacity:.7;
    filter:alpha(opacity=70);
    -moz-opacity:.7;
    -khtml-opacity:.7
}
#related-title:hover { 
    text-decoration: underline; 
}
</style>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="http://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1600/no-thumbnail.png";showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=20;numposts1=12;numposts2=4;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}
  function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;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!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="related_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}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.gform_foot.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 thumburl[relatedTitlesNum]='http://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1600/no-thumbnail.png'}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(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(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;if(relatedTitles.length>0)document.write('<h2>'+relatedpoststitle+'</h2>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

– A continuación, busque el siguiente código :

<div class='post-footer'>

– Copiar y pegar el siguiente codigo antes del codigo encontrado anteriormente:

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
        <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast != &quot;true&quot;'>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <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:if></b:loop>
        <script type='text/javascript'>
            var currentposturl=&quot;<data:post.url/>&quot;;
            var maxresults=6;
            var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
            removeRelatedDuplicates_thumbs();
            printRelatedLabels_thumbs();
        </script>
    </div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Después de haber hecho los dos pasos anteriores, guarde los cambios y comprobar la vista previa de tu blog . Si todo va bien debería mostrarse debajo de cada post los artículos relacionados.

Personalización:

Si usted es realmente bueno en CSS entonces usted puede hacer un montón de modificaciones. Me quedé con la anchura predeterminada, es decir 590px, pero usted puede modificar esto y cambiar la anchura que le ajusta a su blog.

He restringido el número de entradas que se mostrarán a 4, 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.

Deja una respuesta

Mira más contenido relacionado

¿Cómo agregar una imagen de perfil a Zoom en Windows y Android?

por Tecneófito, agosto 17, 2021

Agregar una imagen de perfil a Zoom no es una tarea complicada, pero primero veamos...

Cómo utilizar el análisis de la competencia para mejorar su SEO

por Tecneófito, agosto 9, 2021

El análisis de la competencia no es una estrategia nueva. La historia nos ha mostrado...

¿Por qué la música de Spotify se pausa sola y como solucionarlo?

por Tecneófito, mayo 4, 2020

Spotify se ha visto afectado por una serie de problemas que hacen que las canciones...

¿Cómo abrir archivos RTF en PC usando Google Chrome?

por Tecneófito, mayo 3, 2020

Probablemente esté aquí porque no puede abrir el archivo con la extensión ".rtf" o...

Cómo mover mi blog de Wix a WordPress

por Tecneófito, abril 28, 2020

Wix es un impresionante creador de sitios web que parece perfectamente adaptado a...

Cómo proteger su perfil de Netflix usando un código PIN

por Tecneófito, abril 20, 2020

Netflix es una de las principales plataformas de streaming para ver películas y...