Widget comentarios recientes Material design Blogger

Como era de esperarse Ayudadeblogger.com ha modificado el código para que se muestre los comentarios recientes con un diseño Material design Blogger.

El widget comentarios recientes sirve para mostrar los comentarios que le dejaron en su blog de Blogger.

Se ha implementado un nuevo diseño en el widget comentarios resientes con un toque profesional como lo es Material design, el cual está revolucionando los blogs de Blogger.

¿Dónde se insertara el código?

El código, se lo insertara en un solo widget el cual hará toda la función de mostrar los comentarios recientes de su blog de Blogger

¿Tendré que realizar algún cambio?

Efectivamente se tendrá que realizar dos cambios:

Primero: se cambiara la URL de la imagen por la que usted quiera mostrar

Segundo: se tendrá que cambiar la dirección URL que dice Ayudadeblogger.com por la dirección URL de su blog de Blogger

¿Podre cambiar de color al widget de comentarios recientes?

Claro que podrá cambiar de color, depende del color que quiera mostrarlo se habilitara realizando algunos cambios donde se le especificara.

Puede consultar los códigos de colores en el siguiente enlace


¿El widget de comentarios recientes Material design Blogger es responsive?

El widget es totalmente responsive, se acopla perfectamente en computadoras de escritorio y en teléfonos inteligentes

Widget comentarios recientes Material design Blogger

¿La instalación del código es fácil?

Es sumamente fácil la integración del código de comentarios recientes en su blog de Blogger no tendrá nada de complicaciones

Widget comentarios recientes Material design Blogger

Widget comentarios recientes Material design Blogger

Puede ver su demostración en el siguiente blog

Video tutorial


Empezamos

Tutorial

1 Ir a Blogger

2 Un clic en Diseño

Widget comentarios recientes Material design Blogger

3 Un clic en Añadir un gadget

Widget comentarios recientes Material design Blogger

4 Busca el widget que dice HTML/javascript, ábrelo

Widget comentarios recientes Material design Blogger

5 Ingrese las siguientes líneas de código en su interior


 <div class="card testimonial-card">
 <!--Bacground color-->
 <div class="card-up deep_purple">
 </div>
 <!--Avatar-->
 <div class="avatar"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSLzLk-9EnkClLC3zqvEpRoQ4K8hxrjmNpEKQDq7-yPYxOxHT7cFT99MjeHHixXQ8YynxYNomGipxQfjZK4mun3kQ5n3SHT1q7NYTEZlYnoL8KGi_M2LgdDjdC2lPeCqZsPx16wgyfc5Y/s1600/luis-chavez.png" class="circle responsive-img" />
 </div>
 <style type="text/css">
 ul.ayudadeblogger_recent_comments{list-style:none;margin:0;padding:0; background: #9e9e9e; padding: 14px 10px 5px 10px !important;}
 .ayudadeblogger_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
 .ayudadeblogger_recent_comments li .avatarImage{padding:2px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden; border-radius: 100px;}
 .ayudadeblogger_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
 .ayudadeblogger_recent_comments li span{margin-top:4px;color: #ffffff;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
 .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100%;}
 </style>
 <script type="text/javascript">
 /****by www.ayudadeblogger.com****/
 //<![CDATA[
 // Recent Comments Settings
 var
 numComments = 5,
 showAvatar = true,
 avatarSize = 50,
 characters = 60,
 defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 //]]>
 </script>
 <script type="text/javascript" src="https://cdn.rawgit.com/grupodelecluse/widget-comment/caca269b/widget-comment.js"></script>
 <script type="text/javascript" src="http://ayudadeblogger.com/feeds/comments/default?alt=json&callback=ayudadeblogger_recent_comments&max-results=8"></script>
 <div style="text-align: center;">
 <div class="container-fluid" style="background-color:#673ab7;color:#fff;height:23px;">
 Copyright &#169;<script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> - Web design
 </div></div>
 </div>
 <style type="text/css">
 ul.ayudadeblogger_recent_comments, .card, .responsive-img {
 box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12),0 3px 5px -1px rgba(0,0,0,0.3);
 }
 .avatarRound {
 box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.3);
 }
 .avatarRound:hover {
 box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12),0 3px 5px -1px rgba(0,0,0,0.3);
 }
 ul.ayudadeblogger_recent_comments:hover, .card:hover {
 box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14),0 6px 30px 5px rgba(0,0,0,0.12),0 8px 10px -5px rgba(0,0,0,0.3);
 }
 .card {
 overflow: hidden;
 background: #fff;
 border-radius: 2px;
 box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);
 margin-bottom: 20px;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 -webkit-box-flex: 0;
 -ms-flex: 0 0 31%;
 flex: 0 0 31%;
 -ms-flex: 0 0 calc(33% - 10px);
 flex: 0 0 calc(33% - 10px);
 }
 .card {
 position: relative;
 margin: 0.5rem 0 1rem 0;
 background-color: #fff;
 transition: box-shadow .25s;
 border-radius: 2px;
 }
 .testimonial-card .card-up {
 height: 120px;
 overflow: hidden;
 }
 .avatar {
 width: 120px;
 margin: -65px auto 0;
 border-radius: 100%;
 }
 img.responsive-img {
 max-width: 100%;
 height: auto;
 }
 .circle {
 border-radius: 50%;
 }
 .testimonial-card .card-block {
 text-align: center;
 }
 .pink {
 background-color: #e91e63 !important;
 }
 .red {
 background-color: #f44336 !important;
 }
 .purple {
 background-color: #9c27b0 !important;
 }
 .deep_purple {
 background-color: #673ab7 !important;
 }
 .indigo {
 background-color: #3f51b5 !important;
 }
 .blue {
 background-color: #2196f3 !important;
 }
 .light-blue {
 background-color: #03a9f4 !important;
 }
 .cyan {
 background-color: #00bcd4 !important;
 }
 .teal {
 background-color: #009688 !important;
 }
 .green {
 background-color: #4caf50 !important;
 }
 .deep-orange {
 background-color: #ff5722 !important;
 }
 .brown {
 background-color: #795548 !important;
 }
 .grey {
 background-color: #9e9e9e !important;
 }
 .grey-darken-2 {
 background-color: #616161 !important;
 }
 .grey-darken-4 {
 background-color: #212121 !important;
 }
 .black {
 background-color: #000000 !important;
 }
 .yellow-accent-2 {
 background-color: #ffff00 !important;
 }
 </style> 


Realice los siguientes cambios:

Primero: La dirección URL que está marcada de color amarillo es la imagen principal que se está mostrando en el widget de comentarios recientes.

Widget comentarios recientes Material design Blogger

Deberá eliminar dicha URL he ingresar una nueva dirección URL de una imagen

Segundo: Elimine la dirección URL que está marcada de color azul la cual dice http://ayudadeblogger.com/ cámbiela por la dirección URL de su blog de Blogger, por ejemplo: http://nombredemiblog.blogspot.com/

Widget comentarios recientes Material design Blogger


Tercero: Busque la descripción que dice Web design el cual está marcado de color verde, elimínelo he ingrese el nombre de su blog de Blogger

Eso es todo, un clic en Guardar

¿Cómo cambiar de color?

Si necesita cambiar el color y modificarlo a su gusto puede seguir las siguientes instrucciones

1 El primer color que se está mostrando lleva el siguiente código

deep_purple

Widget comentarios recientes Material design Blogger

- Elimine deep_purple e ingrese solo uno de los siguientes códigos de colores

Puede escoger cualquier nombre de la siguiente lista de colores:

pink
red
purple
deep_purple
indigo
blue
light-blue
cyan
teal
green
deep-orange
brown
grey
grey-darken-2
grey-darken-4
black
yellow-accent-2

¿Cómo cambiar el color del fondo de los comentarios?

Widget comentarios recientes Material design Blogger

Busque la siguiente línea de código:

ul.ayudadeblogger_recent_comments{list-style:none;margin:0;padding:0; background: #9e9e9e;

Elimine el código de color que está marcado de color amarillo he ingrese un nuevo código de color de la siguiente lista de colores que se encuentra en el siguiente enlace


¿Cómo cambiar el último color que se encuentra al final del widget comentarios recientes?

Widget comentarios recientes Material design Blogger

Busque la siguiente línea de código:

<div class="container-fluid" style="background-color:#673ab7

Elimine el código de color que está marcado de color amarillo y remplácelo por un nuevo código de color de la siguiente lista de colores


Eso es todo, un clic en guardar

Visite su blog de Blogger y mire como le quedo este nuevo widget de comentarios recientes Material design Blogger

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en escribir

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios