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
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
6 comentarios: