Cómo agregar un widget de comentarios recientes en Blogger

Es momento de renovar y actualizar los gadgets widgets de Blogger, para ello empezamos con un truco muy fácil de realizar como lo es agregar un widget de comentarios recientes en Blogger. El nuevo gadget de comentarios recientes se lo puede agregar en un widget de Blogger y ubicarlo donde mejor le parezca.

El nuevo widget de comentarios recientes V-3 es totalmente responsive, ademas tiene excelentes características al puro estilo de Material design

Puede ver su demostración en el siguiente blog de demos

Demo Clic aquí

Empezamos

1.- Ir a Blogger.com

2.- Un clic en Diseño

3.- Un clic en Agregar un gadget

4.- Un clic en HTML/Javascript

5.- Inserte las siguientes lineas de código

<style type="text/css">
ul.tb_recent_comments {
    list-style: none;
    margin: 0;
    padding: 0;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
    padding: 20px;
}
.tb_recent_comments li {
    font-size: 14px;
    padding: 2px 17px 42px;
    margin: 20px 0;
    border-radius: 10px;
    position: relative;
    background: aliceblue;
    color: #000;
    border-top-left-radius: 0;
    margin-left: 62px;
}
.tb_recent_comments li:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: -15px;
    border-width: 8px;
    border-style: solid;
    border-color: aliceblue aliceblue transparent transparent;
    display: block;
}
img.avatarRound {
    border-radius: 100%;
    margin-left: -89px;
    overflow: hidden !important;
    display: block !important;
    position: relative !important;
    margin-top: -26px;
    box-shadow: 0 15px 35px -5px rgba(0,0,0,.25);
    border: 3px solid #fff;
    float: left;
}
.tb_recent_comments li a{
    color: #888;
    font-size: 10px;
}
.tb_recent_comments li .avatarImage {
    float: none;
}
.tb_recent_comments li img {
    padding: 0px;
    position: relative;
    overflow: hidden;
    display: block;
}
.tb_recent_comments li span {
    margin-top: 4px;
    color: #111;
    display: block;
    font-size: 12px;
    font-style: italic;
    line-height: 1.4;
    font-family: Noto Sans,sans-serif;
    text-align: left;
}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
numComments=4,
showAvatar=true,
avatarSize=50,
characters=60,
defaultAvatar="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT8Q047n67YUBtV9WQ3-ttrYS7HssP-m-0zwGrWwl7Mez5Hn_b2F0JZ4CGWMs9uuT_MaeTVrIkdFbyGR7okiFWk-2xD89XTaYyVqcN2AUNbjoZvuU6tjANv-A_S85fRWCDaofIebp_e3U/s1600/avatar-none.png",
hideCredits=true;
//]]>
</script>
<script type="text/javascript" src="https://cdn.statically.io/gh/Ayudadeblogger/re-comment/cf643bf4/rec-comment.js"></script>
<script type="text/javascript" src="https://www.ayudadeblogger.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=4"></script>

6.- Realice los cambios respectivos:

Elimine la URL que esta marcado de color negro   https://www.ayudadeblogger.com/   remplace por la dirección URL de su blog de Blogger

Si necesita aumentar el número de comentarios puede cambiar el número 4 por el número de comentarios recientes que necesite mostrar: 

numComments=4

max-results=4

7.- Un clic en Guardar

Eso es todo, ahora ubique su nuevo Gadget de comentarios recientes al puro estilo de Material design donde usted quiera

Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no dude en escribir

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: ComoWidgets para BloggerWidgets y Plugins

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.