Nuevo widget de comentarios recientes para blogger

¿Cómo puedo agregar un widget de comentarios en blogger?. Si alguna vez has pasado por el proceso de crear un blog ya estarás familiarizado con el sistema de comentarios de Blogger.

El sistema de comentarios por defecto incorporado en blogger es muy básico, pero por lo general muy bueno para los usuarios que recién inician en el mundo del blogging. Sin embargo, le resultará carente si queremos dar a nuestros lectores algunas funcionalidades avanzadas, tratar de mejorar su experiencia o destacar sus comentarios.

Con el fin de incentivar a sus lectores hoy les compartimos el widget de comentarios recientes  para los blogs de Blogger, que mostrará los comentarios recientes en sus entradas del blog en un orden descendente, es decir el comentario más reciente ira en la parte superior.

Características:

La instalación de un gadget en blogger solo es recomendable si no afecta la velocidad de carga del sitio y mejora la experiencia del usuario al navegar por nuestro blog. Por esta razón les presentamos las características más destacadas de esté widget de comentarios.

  • Codificado en JavaScript usando Blogger API JSON RSS
  • Muestra  perfil en miniatura del autor – Autor Avatar
  • Enlace de la imagen del usuario a su perfil de Google+
  •  imagen animada de recarga
  • Muestra título del post
  • Muestra fecha del comentario
  • Muestra  extracto del comentario ( breve fragmento)
  • Ligero
Agregar widget de comentarios en blogger

Agregar el widget de comentarios recientes en Blogger

  1. Ir a Blogger> Plantilla.
  2. Guarda una Copia de seguridad de tu plantilla.
  3. Haga clic en Editar HTML.
  4. Pegue el siguiente código justo por encima de la etiqueta </head>

Nota: Este paso es opcional. Saltarlo, si ya ha añadido el código de la biblioteca jQuery a la plantilla de blogger.

<script async='' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

A continuación pegar el siguiente código de hojas de estilo para FontAwesome y Oswald justo por encima de la etiqueta </head>. Saltar esta opción si el código ya esta agregado a tu plantilla:

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Ahora pegue el siguiente código CSS justo por encima de la etiqueta ]]></b:skin>

/*############Recent Comments Widget##################*/
.mbtcmts{list-style-type:none; overflow:hidden; } 
.mbtcmts li {margin:0px auto 20px auto; clear:both; color:#666; font-family:helvetica; font-size:12px;padding:0px;} 
.mbtcmts i{color:#999; padding-right:4px;} 
.mbtcmts .idate {display:block; font-family:arial; font-size:11px;text-align: left;padding:3px; margin:0 0 0px 40px} 
.mbtcmts .icontent{ display:block; font-family:Georgia; color:#999; font-style:italic; line-height:1.5em;} 
.mbtcmts .icontent a {color:#999; text-decoration:none; font-weight: bold;font-size: 16px;font-style: normal;} 
.mbtcmts div{line-height:2em; clear:both; border-top:1px solid #eee; margin-top:5px;} 
.mbtcmts span { margin:5px 0px 0px; padding-right:5px;} 
.mbtcmts img {border-radius:100%; float:left; margin:0px 20px 20px 0px; border:1px solid #eee; padding:3px; width:50px; height:50px;box-shadow: 2px 2px 4px #ddd; } 
.mbtcmts .icapital {text-transform:Capitalize; display:inline-block;} 
.mbtcmts .ititle {font-family:oswald; font-size:14px; color:orange; font-weight:normal; text-decoration:none;} 
.mbtcmts .ititle:hover {color:#666;}
.mbtcmts .idate:before, .mbtcmts .ipostTitle a:before{font-family:fontAwesome; position:relative; padding-right:5px;} 
.mbtcmts .idate:before {content:'\f017'; color:#999} 
.mbtcmts .ipostTitle a {text-decoration:none; color:#999} 
.mbtcmts .ipostTitle a:before {content:'\f07c'; }
#mbtloading{ 
  margin: 20% auto;background: url('https://downloads.mybloggertricks.com/Spin%20and%20pulsate.gif') no-repeat left center;width: 80px;height: 80px;}
/*------ CSS3 Tooltip Shortcode -------------*/ 
.tooltip{outline:none;text-decoration:none!important;position:relative}.tooltip:hover {border-bottom: none;}.tooltip strong{line-height:30px}.tooltip > span{text-transform:capitalize;width:150px; padding:5px 5px;opacity:0;top:120%;left:0px; visibility:hidden;z-index:10;position:absolute;font-family:helvetica;font-size:12px;font-weight:bold;border-radius:2px;box-shadow:2px 2px 5px #999;-webkit-transition-property:opacity,margin-top,visibility,margin-left;-webkit-transition-duration:0.4s,0.3s,0.4s,.3s;-webkit-transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out;transition-property:opacity,margin-top,visibility,margin-left;transition-duration:0.4s,0.3s,0.4s,.3s;transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out}.tooltip > span img{float:right;width:110px;margin:0 0 30px 10px;padding: 0;border: none;}.tooltip:hover > span{opacity:1;text-decoration:none;visibility:visible;overflow:visible;display:inline;margin-left:-50px}.tooltip span b{width:15px;height:15px;left:30%;top:-9px;display:block;position:absolute;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);display:none\0/;*display:none}.tooltip > span{padding-top:10px;color:#fff;background:orange;border:1px solid #ffffff}.tooltip span b{background:orange;border-top:1px solid #ffffff;border-right:1px solid #ffffff}.mbtcmts .itotal {color:#333; padding:3px 3px 3px 10px; border:1px solid #eee; font-family:arial; font-size:12px;} 
.mbtcmts .itotal i {font-style:normal;} 
.mbtcmts .itotal span{font-family:oswald;  font-weight:normal; color:#333; text-decoration:none} 
.mbtcmts .itotal span:before {font-family:FontAwesome; position:relative; content:'\f075'; }

Terminamos con la edición HTML! Por último dirígete a «Diseño» y haga clic en «Añadir un gadget «. Elige HTML / JavaScript y pega el siguiente código en su interior:

<div id="mbtloading" ></div> 
<script type="text/javascript"> 
function mbtcmts(json) { 
document.write('<ul class="mbtcmts">'); 
for (var i = 0; i < ListCount; i++) 
{ 
//################### Variables Declared 
var listing= ListImage = ListUrl = ListDate = TotalPosts = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListProfile = ListComments = thumbUrl = sk = ListMonth = Y = D = M = m =  "";
//################### URL 
for (var j = 0; j < json.feed.entry[i].link.length; j++) { 
      if (json.feed.entry[i].link[j].rel == 'alternate') { 
        break; 
      } 
    }
if(json.feed.entry[i].link[2] != null) 
{ 
ListUrl= "'" + json.feed.entry[i].link[j].href + "'"; 
} 
else 
{ListUrl = "'#'"}
//####################### Splitting URL into Title
if(json.feed.entry[i].link[2] != null) 
{ 
var mbt_slit = json.feed.entry[i].link[j].href; 
        var M_slit = mbt_slit.split("#"); 
        M_slit = M_slit [0]; 
        var K_slit = M_slit.split("?"); 
        K_slit = K_slit[0];     
        var B_slit = K_slit.split("/"); 
        B_slit = B_slit[5]; 
        B_slit = B_slit.split(".html"); 
        B_slit = B_slit [0]; 
        var T_slit= B_slit.replace(/-/g, " ").charAt(0).toUpperCase()+ B_slit.replace(/-/g, " ").slice(1).substring(0, 50); 
        var Link_slit= T_slit.link(K_slit); 
}
//################### Info 
TotalPosts = json.feed.openSearch$totalResults.$t; 
ListAuthor= json.feed.entry[i].author[0].name.$t; 
var ListAuth = ListAuthor.split(" "); 
var ListAuth = ListAuth.slice(0, 1).join(" ");
ListProfile= "'" + json.feed.entry[i].author[0].uri.$t + "'";
//################### Content Check
ListConten = json.feed.entry[i].content.$t; 
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);
//################### Date Format
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
ListDate= json.feed.entry[i].published.$t.substring(0, 10);
                         Y = ListDate.substring(0, 4); 
                        m = ListDate.substring(5, 7); 
                         D = ListDate.substring(8, 10); 
                         M = ListMonth[parseInt(m - 1)];                        
//################### Thumbnail Check
if (json.feed.entry[i].author) 
{ 
thumbUrl = json.feed.entry[i].author[0].gd$image.src; 
sk= thumbUrl.replace("/s72-c/","/s60-c/"); 
ListImage= "'" + sk + "'"; 
}
else 
{ 
ListImage= "'http://4.bp.blogspot.com/-HALLtgFeep0/VfryhQ0C5oI/AAAAAAAAPcY/77mSGND4q84/s200/Icon.png'"; 
} 
//################### Printing List
var listing = "<li class='node"+[i]+"' ><a rel='nofollow' href=" 
+ListProfile+ 
  "><img src=" 
+ListImage+ 
"/></a><a class='ititle tooltip' href=" 
+ListUrl + 
"target='_blank'><span><b></b>" 
+ListAuth+ 
" Commented on » " 
+ M + 
" " 
+ D + 
", " 
+ Y + 
"</span>" 
+ ListAuthor+ 
"</a> <i> posted in</i>  <span class='ipostTitle'><a class='tooltip'  href='" 
+K_slit+ 
"'><span><b></b>" 
+T_slit+ 
"</span></a></span><span class='icontent'>" + ListContent+" ...   <a href="+ListUrl+">  » </a></span><div></div></li>"; 
document.write(listing); 
} 
document.write('<div class="itotal"> <span> '+TotalPosts+' </span><i>delicious comments posted so far!</i></div></ul>'); 
} 
</script>
<script> 
var ListCount = 5; 
var ChrCount = 90; 
</script> 
<script src="https://www.tecneofito.com/feeds/comments/default?alt=json-in-script&callback=mbtcmts"></script> 
<script>document.getElementById("mbtloading").style.display = "none";</script>

Para finalizar realiza estos cambios

Reemplazar https://tecneofito.com con el URL de su blog. Para aumentar o disminuir el número de comentarios, editar: ListCount = 5 . Para decidir el número de caracteres que se vea como resumen de comentarios (extracto) de editar: ChrCount = 90

10. Guarde el widget de comentarios y verifique el funcionamiento del widget.

              Fuente: My blogger tricks

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...