Widget comentarios recientes Blogger Recent Comments for Blogger

Demo en Codepen Repositorio

Uno de los gadgets más pedidos por la comunidad que gracias a la contribución recibida 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)
 */
/*! Core (No modificar) {{*/
.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)
}
/*}} Fin del core {{*/

/*! Personalización */
/* Cuerpo
-----------------------------------------*/
.wjs-cmts__card-content {
    padding: 1.5em; /* relleno */
    margin-bottom: .5em; /* separación */
    border-radius: 5px; /* bordes redondeados */
    box-shadow: 0 2px 6px rgba(0,21,64,.14), 0 2px 20px rgba(0,21,64,.05); /* sombra */
}
/* Avatar
-----------------------------------------*/
.wjs-cmts__image {
    margin-right: 1em;
}
.wjs-cmts__image img {
    width: 45px; /* tamaño */
    border-radius: 50%; /* bordes redondeados */
    box-shadow: 0 2px 3px rgba(0,21,64,.2), 0 2px 5px rgba(0,21,64,.05); /* sombra */
}
/* Contenido
-----------------------------------------*/
.wjs-cmts__snippet {
    color: #37474F; /* color del texto */
}
.wjs-cmts__title {
    font-size: 1em; /* tamaño del texto */
    margin-bottom: .25em; /* tamaño del texto */
}
.wjs-cmts__title a {
    color: #263238; /* color del nombre de usuario */
    margin-right: .5em; /* separación */
    font-weight: 500; /* densidad del texto */
}
.wjs-cmts__date {
    color: #B0BEC5; /* color de la fecha */
    margin-bottom: .5em; /* separación */
    font-size: .9em; /* tamaño del texto */
}

No olvides pulsar "Aplicar" para guardar los cambios. Ahora regresamos al panel y vamos a la sección "Diseño", simplemente vamos a agregar un widget del tipo HTML:


HTML Gadget

Por último escribe cualquier título para el widget y pega el siguiente código en el contenido, no olvides guardar los cambios:


<div data-cnumber='6'
     data-csnippet='50'
     data-cphoto='https://tu-imagen.png' id='wjs-recentCmts'></div>
<script src="//cdn.jsdelivr.net/gh/zkreations/wjs-recentComments@1/dist/js/recent-comments.min.js"></script>

Nota: Aunque el widget es responsive, recomiendo usarlo en el sidebar para una mejor experiencia de usuario.


Personalizar

Opciones

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.


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