Widgets y Plugins para Blogger


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

Pueden ver su demostración en el sidebar del 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://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/Luis-Chavez/ayudadeblogger-comentarios-material-design/4bc1458d/.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


Enviar por correo
  1. HOLA . ME PODRIAS AYUDAR HE CAMBIADO LA IMAGEN Y SOLO SE ME BE UN POCO NO SALE CENTRADA COMO LA TUYA.
    GRACIAS.

    ResponderEliminar
    Respuestas
    1. Hola Nano, gracias por escribir, con respecto a su pregunta, con mucho gusto le ayudo, pero necesito que me deje la dirección URl de su blog de Blogger y así podre ingresar he indicarle donde deberá ajustar para que se vea correctamente.

      Saludos.

      Eliminar
  2. Tremendo, muchísimas gracias!
    Ya lo estoy usando, enseguida me pongo a retocarlo un poco :p

    https://dragonmanialegendsnooficial.blogspot.com.ar/

    ResponderEliminar
    Respuestas
    1. Hola, he visitado su blog y le quedo estupendo el widget de comentarios recientes al puro estilo de Material deisgn, felicidades

      Saludos.

      Eliminar
  3. Aprovecho para preguntarte, tenes algun tutorial explicando como agregar una imagen o algo junto al nombre del administrador del blog? Me gustaría poder colocar una imagen junto a mi nombre que me identifique del resto de los usuarios

    ResponderEliminar
  4. Disculpa que vuelva a molestarte, ya pude colocar una imagen junto a mi nombre de usuario. Me gustaría tener una caja de comentarios parecida a la tuya, realmente se ve muy delicada y elegante, tiene algún tutorial para esta?

    ResponderEliminar
    Respuestas
    1. Hola Ra-pippo, sobre su pregunta, aun no he publicado el tutorial, espero en estos días publicarlo y así pueda usted tener la caja de comentarios con un estilo diferente.

      Saludos.

      Eliminar
  5. me lagea muchisimo el blog este codigo
    ¿Tenes idea por que?

    ResponderEliminar
    Respuestas
    1. Hola, no comprendo claramente su pregunta, por favor vuelva a plantearla

      Saludos.

      Eliminar
  6. Muy bien explicado.Como todo lo que veo aquí me gusta,lo he puesto en el blog y quedó precioso.Muchísimas gracias por este estupendo trabajo.

    ResponderEliminar
    Respuestas
    1. Quisiera cambiar el avatar de los comentaristas que lo hacen con la "B" de blogger por otra imagen.¿Cómo se hace?Muchas gracias

      Eliminar

Discusión: