Widget comentarios recientes Disqus para Blogger Recent Comments for Blogger Disqus

Demo en Codepen

Hace poco publique un plugin que habíamos realizado de comentarios recientes para Blogger, hecho completamente con javascript puro. Gracias a sus sugerencias, he decidido hacer lo mismo pero para Disqus. Esta vez el widget está basado en un plugin que facilita la propia plataforma.


Instalar

Vamos a copiar el siguiente código y seguido nos dirigimos a Temas > Personalizar > Opciones avanzadas > CSS Personalizado. Aquí pegaremos lo siguiente:


/*!
 * Disqus Recent Comments v1.0.0
 * Copyright 2019 zkreations
 * Developed Daniel Abel M. (fb.com/danieI.abel)
 * Licensed under MIT
 */.dsq-widget .dsq-widget-item{font-size:14px}.dsq-widget .wjs-cmts__data{line-height:1.4}.dsq-widget .dsq-widget-avatar{-webkit-transform:translateY(0);transform:translateY(0);transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s}.dsq-widget .dsq-widget-item:hover .dsq-widget-avatar{-webkit-transform:translateY(-.25em);transform:translateY(-.25em)}.dsq-widget .dsq-widget-meta{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap}.dsq-widget .dsq-widget-meta a:first-child{overflow:hidden;text-overflow:ellipsis;max-width:40%;white-space:nowrap}.dsq-widget .dsq-widget-user {display: block}.dsq-widget .dsq-widget-avatar {margin-right: 1em;padding: 0}.dsq-widget-comment {display: block;margin-left: calc(45px + 1em)}

/*
=> Personalizacion
*/

/* Cuerpo
-----------------------------------------*/
.dsq-widget .dsq-widget-item {
    padding: 1.5em; /*relleno*/
    margin: 0 0 .5em 0; /*separacion*/
    border-radius: 5px; /*borde redondeado*/
    box-shadow: 0 2px 6px rgba(0,21,64,.14), 0 2px 20px rgba(0,21,64,.05); /*sombra*/
}
/* Avatar
-----------------------------------------*/
.dsq-widget .dsq-widget-avatar {
    width: 45px; /*ancho*/
    height: 45px; /*alto*/
    border-radius: 50%; /*borde redondeado*/
    box-shadow: 0 2px 3px rgba(0,21,64,.2), 0 2px 5px rgba(0,21,64,.05); /*sombra*/
}

/* Contenido
-----------------------------------------*/
.dsq-widget .dsq-widget-user {
    font-size: 1em; /*tamaño de fuente*/
    margin-bottom: .25em; /*separacion*/
    color: #263238;
    font-weight: 500;
}
.dsq-widget .dsq-widget-meta a {
    color: #B0BEC5;
}
.dsq-widget-comment {
    color: #37474F;
}
.dsq-widget .dsq-widget-meta {
    margin-top: 1.4em; /*separacion*/
    padding-top: 1.4em; /*relleno*/
    border-top: 1px dashed rgba(0, 0, 0, 0.1); /*borde*/
    font-size: .9em; /*tamaño de fuente*/
}

Presionaremos "Aplicar" para guardar y ahora volveremos a Diseño, ubicamos el sidebar del blog y agregaremos un widget de tipo HTML:


0

En el contenido vamos a pegar el siguiente código, al cual le haremos unos cambios:


<div class="dsq-widget">
   <script type="text/javascript" src="//SHORT_NAME.disqus.com/recent_comments_widget.js?num_items=6&hide_mods=0&hide_avatars=0&avatar_size=45&excerpt_length=50"></script>
</div>

Del código anterior, cambiamos SHORT_NAME por el nombre corto de tu panel de administración en Disqus. Guardamos los cambios del widget y listo, ya debería estar funcionando en el blog.


Personalizar

Las modificación la pueden hacer desde los estilos y también puedes agregar nuevos estilos. Todo el código está comentado para facilitar la comprensión.


Si tienes alguna duda dejala en los comentarios. Muchas gracias por pasar :D