Widget comentarios recientes Blogger Recent Comments for Blogger

Demo en Codepen Repositorio

Este es uno de los gadgets más pedidos por la comunidad que frecuenta mi blog y gracias a la contribución recibida recientemente he podido terminarlo. Se trata de un widget que muestra los últimos comentarios, tanto de páginas como de entradas y está escrito en javascript puro por lo que tiene un excelente rendimiento.


Instalar

Copiamos el siguiente código css y nos dirigimos a Temas > Personalizar > Opciones avanzadas > CSS Personalizado. Una vez aquí, pegaremos el siguiente código:


/*!
 * wjs-recentComments v1.1.0
 * Copyright 2019 zkreations
 * Developed by José Gregorio (fb.com/JGMateran) | Daniel Abel M. (fb.com/danieI.abel)
 * Licensed under MIT (github.com/zkreations/wjs-recentComments/blob/master/LICENSE)
 */.wjs-cmts__card-content{font-size:14px;display:-ms-flexbox;display:flex}.wjs-cmts__data{line-height:1.4}.wjs-cmts__image{-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transform:translateY(0);transform:translateY(0);transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.wjs-cmts__card-content:hover .wjs-cmts__image{-webkit-transform:translateY(-.25em);transform:translateY(-.25em)}
/*
=> Personalizacion
*/

/* Cuerpo
-----------------------------------------*/
.wjs-cmts__card-content {
    padding: 1.5em;
    margin-bottom: .5em;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0,21,64,.14), 0 2px 20px rgba(0,21,64,.05);
}
/* Avatar
-----------------------------------------*/
.wjs-cmts__image {
    margin-right: 1em;
}
.wjs-cmts__image img {
    width: 45px;
    border-radius: 50%;
    box-shadow: 0 2px 3px rgba(0,21,64,.2), 0 2px 5px rgba(0,21,64,.05);
}
/* Contenido
-----------------------------------------*/
.wjs-cmts__snippet {
    color: #37474F;
}
.wjs-cmts__title {
    font-size: 1em;
    margin-bottom: .25em;
}
.wjs-cmts__title a {
    color: #263238;
    margin-right: .5em;
    font-weight: 500;
}
.wjs-cmts__date {
    color: #B0BEC5;
    margin-bottom: .5em;
    font-size: .9em;
}

Presionaremos "Aplicar" para que los cambios se guarden y posteriormente regresamos a Temas, solo que esta vez presionaremos el botón "Editar HTML". Buscamos </b:section> y arriba de eso pegaremos el siguiente código:


<b:widget id='HTML151' locked='false' title='Recent Comments' type='HTML'>
   <b:widget-settings>
      <b:widget-setting name='content'><![CDATA[<div id='wjs-recentCmts'></div>
<script src="//cdn.jsdelivr.net/gh/zkreations/wjs-recentComments@1/dist/js/recent-comments.min.js"></script>]]></b:widget-setting>
   </b:widget-settings>
   <b:includable id='main'>
      <b:if cond='data:title.length != 0'>
         <h2><data:title/></h2>
      </b:if>
      <div class='widget-content'>
         <data:content/>
      </div>
   </b:includable>
</b:widget>

Guardamos los cambios y listo. El widget debería aparecer en tu blog, para posicionarlo correctamente puedes ir a Diseño y buscar el nuevo gadget "Recent Comments". Aunque el widget es responsive, recomiendo usarlo en el sidebar para mejor experiencia de usuario.


Personalizar

Opciones

Ahora puedes configurar el plugin mediante datos en atributos HTML, si no se especifica algún atributo se utilizaran los valores por defecto:


<div data-cnumber='6'
     data-csnippet='50'
     data-cphoto='https://tu-imagen.png' id='wjs-recentCmts'></div>

El atributo data-cnumber define la cantidad de comentarios recientes, data-csnippet la cantidad de caracteres del resumen y data-cphoto la url del avatar por defecto.


Modificar estilos

Como ya los tengo acostumbrados, cualquier modificación la pueden hacer desde los estilos, todo está comentado según lo que modifica, asi como tambien puedes agregar nuevos estilos.


Espero que les haya gustado. Con ayuda puedo publicar este y muchos gadgets que tengo en desarrollo, ademas de mantenerlos actualizados y darles un largo soporte. Cualquier contribución estaré agradecido.


Si tienes alguna duda dejala en los comentarios, respondo a todos. Muchas gracias por pasar.