Widget de Comentarios Recientes Con Avatars Para Blog de Blogger

En esta ocasion te mostrare como añadir el widget de comentarios recientes con Avatars a tu blog de blogger.Tienes la opcion de mostrar un diseño particular y atractivo a los comentarios en tu blog con avatar redondos,ademas tiene la caracteristica si deseas no mostrar una imagen para estar en anonimato.
Chequea Widget Formulario de Comentarios
Ejemplo:

Como añadir widget de comentarios recientes con avatars.

Paso 1. Entra en tu cuenta de Blogger, y ve a Diseño y de click en enlace Añadir un Gadget

.
Paso 2. se abrira una ventana entonces selecciona HTML/Javascript

Paso 3 Pegue el siguiente codigo en el caja de contenido:

  <style type="text/css">
ul.w2b_recent_comments {
    list-style: none;
    margin: 0;
    padding: 0;
}

.w2b_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;
}

.w2b_recent_comments li .avatarImage {
    padding: 3px;
    background: #fefefe;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
    float: left;
    margin: 0 6px 0 0;
    position: relative;
    overflow: hidden;
}

.avatarRound {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}

.w2b_recent_comments li img {
    padding: 0px;
    position: relative;
    overflow: hidden;
    display: block;
}

.w2b_recent_comments li span {
    margin-top: 4px;
    color: #666;
    display: block;
    font-size: 12px;
    font-style: italic;
    line-height: 1.4;
}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 60,
 roundAvatar = true,
 characters  = 40,
 showMorelink = false,
 moreLinktext = "More »",
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/w2b recent comments with avatars.js"></script>
<script type="text/javascript" src="http://tu-blog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Nota
Reemplace tu-blog con el nombre de tu blog.
Reemplace el valor  "5" en rojo con el numero de comentariosque deseas que aparezcan.


Para cambiar el avatar anonimo, reemplace la siguiente direccion  con la tuya:

• http://www.gravatar.com/avatar/?d=mm 

Para cambiar el tamaño del avatar,reemplace  el numero 60 en verde con el tuyo.

Paso 4. Despues de hacer todos los cambios,  da click Guardar.. y todo esta listo en tu blog!

Chequea Como añadir Widget de Comentarios

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati