Tutorial: Cómo agregar un gadget de posts más comentados en Blogger

  • Autor Autor Gorak
  • Fecha de inicio Fecha de inicio
Gorak

Gorak

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
Nuevo-gadget-de-posts-más-comentados-para-Blogger[1].webp
Demo del Truco

Para agregar este gadget a tu blog de Blogger solo debes ir a Diseño, Añadir gadget, HTML/JavaScript y pegar allí el siguiente código:

HTML:
<div id="most-comments"></div>
<style scoped='' type='text/css'>
#most-comments li,#most-comments ul,#most-comments ul li{margin:0;list-style:none;color:#444;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:14px}#most-comments ul li{position:relative;overflow:hidden;background:#fff;margin:3.5px 0;padding:7px 10px 7px 50px;white-space:nowrap;text-overflow:ellipsis;box-shadow:inset 0 0 #fc4f3f;border:1px solid #e6e6e6;transition:all .6s}#most-comments ul li:hover{box-shadow:inset 310px 0 #fc4f3f}#most-comments ul li a{color:#444;font-weight:700;text-decoration:none;transition:all .3s}#most-comments ul li a:hover,#most-comments ul li:hover a{color:#fff}.count-most{position:absolute;left:0;top:0;width:40px;height:100%;margin:0;padding:7px 0;background-color:#383838;color:#fff!important;text-align:center;transition:all .3s}#most-comments ul li:hover .count-most{background-color:#fc4f3f}
</style>
<script type='text/javascript'>
//<![CDATA[
var numPosts=10;
var homePage="www.tu-web.blogspot.com";
var postTitlear=new Array();
var postUrlar=new Array();
var postCommentar=new Array();
var totalpost;document.write('<div id="most-comments"><ul>');
function mostComment(j){var a=j.feed.entry.length;totalpost=a;
for(var f=0;f<a;f++){
var h=j.feed.entry[f];
var c=h.title.$t;var b;
var g;if(f==j.feed.entry.length){break}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];}};
postTitlear.push(c);
postUrlar.push(g);
postCommentar.push(b)}sortPosts();
for(var f=0;f<numPosts;f++){var e='<li><span class="count-most">'+postCommentar[f]+'</span><a href="'+postUrlar[f]+'" title="'+postTitlear[f]+'" target="_blank">'+postTitlear[f]+'</a>';
document.write(e)}}
function sortPosts(){function c(d,f){var e=postTitlear[d];
postTitlear[d]=postTitlear[f];
postTitlear[f]=e;
var e=postUrlar[d];
postUrlar[d]=postUrlar[f];
postUrlar[f]=e;
var e=postCommentar[d];
postCommentar[d]=postCommentar[f];
postCommentar[f]=e}
for(var b=0;b<postTitlear.length-1;b++){
for(var a=b+1;a<postTitlear.length;a++){
if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}
document.write('<script src="http://'+homePage+'/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=mostComment"><\/script>');
document.write('</li>')
document.write('</ul>')
document.write('</div>');
//]]>
</script>

Ahora solo queda reemplazar tu-web.blogspot.com por la URL de tu blog (en el mismo formato que está señalado, eso quiere decir sin las http://).

Espero que este truco te haya sido de utilidad, no olvides comentar si tienes alguna duda al respecto. :welcoming:
 
Última edición:
Bonito resultado, bien currado!
 
Genial aporte gracias :encouragement:


Sent from my Nokia Lumia 520 using Tapatalk
 
Grande aporte, quizás lo incluya en mi blog :encouragement:
 
esto es solo para los post mas comentados con el sistema nativo no?
 
Siempre se aprende algo nuevo e interesante, gracias por el tuto 🙂
 
Hola disculpa pero no se ve el menu cuando lo pego en el codigo html de mi blogger...
 
Solo me toma las ultimas entradas, hay alguna forma que tome todas las entradas del blog? son unas 12000
 
Excelente aporte, muy bueno lo tomare para un blog que tengo
 
Saludos. Desconocía éste tutorial. Le daré uso colocándolo debajo de los artículos para atraer más el rebote interno y la permanencia en el blog. Muy agradecido.
 
Gracias lo tomare en cuenta...
 
Atrás
Arriba