Widget comentarios recientes de Disqus para Blogger Recent Comments for Blogger Disqus

Demo en Codepen

Hace poco publique un plugin para tener una lista de comentarios recientes para Blogger, omando en cuenta sus sugerencias, he decidido hacer lo mismo pero con Disqus. Esta vez el widget está basado en un plugin que facilita la propia plataforma.


Contenido


Instalar

Dirígete a Temas Personalizar Opciones avanzadas Agregar CSS y pega el siguiente código:


/*!
 * Disqus Recent Comments v1.0.0
 * Copyright 2019 zkreations
 * Developed Daniel Abel M. (fb.com/danieI.abel)
 * Licensed under MIT
 */
/*! Core (No modificar) {{*/
.dsq-widget .dsq-widget-user {display: block}
.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-avatar {
   margin-right: 1em;
   padding: 0
}
.dsq-widget-comment {
   display: block;
   margin-left: calc(45px + 1em)
}
/*}} Fin del core {{*/

/*! Personalización */
/* Cuerpo
-----------------------------------------*/
.dsq-widget .dsq-widget-item {
    padding: 1.5em; /* relleno */
    margin: 0 0 .5em 0; /* separación */
    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; /* separación */
    color: #263238; /* color del nombre de usuario */
    font-weight: 500; /* densidad del texto */
}
.dsq-widget .dsq-widget-meta a {
    color: #B0BEC5; /* color de los  datos */
}
.dsq-widget-comment {
    color: #37474F; /* color del texto */
}
.dsq-widget .dsq-widget-meta {
    margin-top: 1.4em; /* separación */
    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 los cambios y vuelve a la sección Diseño y agrega un widget tipo HTML:


0

Para el contenido del widget pega el siguiente código:


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


Personalizar

Todo el código CSS está comentado para facilitar la comprensión, puedes modificar lo que gustes y agregar nuevo código.


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