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
¿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
Puede ver su demostración en el siguiente blog
Video tutorial
Empezamos
Tutorial
1 Ir a Blogger
2 Un clic en Diseño
3 Un clic en Añadir un gadget
4 Busca el widget que dice HTML/javascript, ábrelo
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://1.bp.blogspot.com/-X_MQHvWUWcw/WERt1nSVEzI/AAAAAAAANbA/WSP9YaTVyjEvuoaa-cVIeu0bPt24BCDvQCLcB/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 ©<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.
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/
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
- 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?
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?
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
Comentarios