Gadget de Últimos Comentarios con efecto Slider

Hace unos días haciendo unas pruebas pude añadirle exitosamente al gadget de últimos comentarios el famoso efecto slider, y hoy lo compartiré con todos ustedes.

Vista Previa del gadget (lo pueden ver en el sidebar de blog ahora mismo).

Para añadir a sus blogs este espectacular gadget, solo debes ir a Diseño, Añadir Gadget, HTML/JavaScript y pega allí lo siguiente:

<marquee direction="up" scrollamount="3" style="background- text-align: left; width:280px;height:340px;border:0px solid #000000;padding:3px" onmouseover="this.scrollAmount='3'" onmouseout="this.scrollAmount='3'">
<br/><style type="text/css"></style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 15,
 showAvatar  = true,
 avatarSize  = 40,
 roundAvatar = false,
 characters  = 60,
 showMorelink = false,
 moreLinktext = "More &#187;",
 defaultAvatar  = "https://lh3.googleusercontent.com/-RIC-7Z86S0E/UPYX-7IVLuI/AAAAAAAABTk/qx1fLgBjaJk/s40/user.png",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-recent-comments-gravatar.js"></script>
<script type="text/javascript" src="http://nombre-de-tu-blog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=15"></script></marquee>
<style type="text/css">    ul.w2b_recent_comments{list-style:none;margin:0 0 15px 0;padding:0; background:none;width:100%}    .w2b_recent_comments li{background:#A9D0F5 !important;padding:3px 4px 3px 0!important;display:block;clear:both;overflow:hidden;list-style:none;margin:5px 0; border:1px dashed #fafafa}     .w2b_recent_comments li .avatarImage{padding:2px;border:1px solid #e7e7e7;background:#fff;float:left;margin:0 4px 7px 3px;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{text-shadow:1px 1px 1px #fff;margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;padding:2px 0 6px 0;line-height: 1.2} .w2b_recent_comments li a{color:#064f4c;text-shadow:1px 1px 1px #fff}.w2b_recent_comments li a:hover{margin-left:4px;}</style>

Ahora solo debes reemplazar la parte resaltada en azul por el nombre de tu blog y listo, guarda los cambios.

Es un truco muy fácil de agregar y que le dará a tu blog un toque de profesionalismo y elegancia único.

Cuéntame si te ha sido de utilidad y como te ha parecido este gran truco.

0
Shares

69 thoughts on “Gadget de Últimos Comentarios con efecto Slider

  • septiembre 8, 2013 en 5:51 pm
    Permalink

    Hola!!muchas gracias por todos sus consejos para mejorar un blog, en lo particular muy agradecida. En relación a este de añadir los últimos comentarios, lo hice y aparece en mi blog sólo que aparece en blanco, no se, si es porque no tenga comentarios o quizá porque los comentarios no los ha podido hacer mi público porque se dirigen a mi correo y para eso hay que seguir varios pasos de seguridad, ya intenté hacerlo de otra forma peor no se cómo deba hacerse.

    Responder
    • septiembre 11, 2013 en 4:18 pm
      Permalink

      Oralia pero a mi si me ha servido, mira que lo uso en mi blog y va de maravilla.

      Haz los pasos nuevamente 😉

      Saludos

      Responder
  • septiembre 9, 2013 en 8:45 pm
    Permalink

    ¡ Hola ! Soy Antonio y lo pongo en mi blog y no sale nada si me puedes ayudar ¿el porqué de no salir?. Un saludo

    Responder
  • septiembre 15, 2013 en 2:49 am
    Permalink

    Gracias Hayder esta genial lo modificaste los comentarios dejandolo como movimiento :). Ya lo agrege. solo tube que subirle el numero en una parte del codigo del avatar ya ke no se me veian completos los avatares. Pero ya kedo xD

    Responder
    • septiembre 22, 2013 en 9:03 pm
      Permalink

      Loko Ser, este era un truco que quería desde hace rato pero no lo había podido hacer hasta que un día lo logre.

      Por cierto eres muy bueno con los códigos 😉

      Saludos

      Responder
  • septiembre 20, 2013 en 1:48 am
    Permalink

    Muchas gracias Hayder, funciona perfectamente y lo que más me gusta es que se puede personalizar por completo.

    Un saludito 🙂

    Responder
    • septiembre 22, 2013 en 9:05 pm
      Permalink

      Namir que bueno que te haya funcionado, así queda demostrado que el tutorial si sirve.

      Y como tu lo dijiste es completamente personalizable.

      Saludos

      Responder
      • agosto 29, 2014 en 5:33 pm
        Permalink

        Hola! estoy poniendolo pero quiero personalizarle el color! ¿Como hago? Respondeme en mi blog, Me encanta el tuyo, me veras aqui muy seguido! pero respondeme primero asi me ayudas, click en mi perfil yt veras mi blog SDLN (SAGA)

        Responder
  • septiembre 30, 2013 en 7:51 am
    Permalink

    Perfecto! Estuve buscando esto y de los que miré, sólo me funcionó el tuyo. Además me gustan los colores que ya tiene, por lo tanto no cambio nada.

    Muchísimas gracias majo.

    Responder
    • octubre 11, 2013 en 4:17 am
      Permalink

      buenisimo el slider excelentisimos, me gustaria que hiciera uno pero que en el fondo azul en borde llevara como sombra negra como un resplandor se puede o no

      Responder
  • octubre 16, 2013 en 1:45 pm
    Permalink

    Excelente Gadget.

    Lo acabo de poner en mi blog y me encanta. Al principio me aparecía en blanco como a muchos usuarios que han comentado este post. Resulta que en la plantilla que nos indicas has puesto lo siguiente -> http:/nombre-de-tu-blog.blospot.com . Al añadir otra “/” despues de http: y al añadir una “g” en la palabra bloGspot me funcionó a las mil maravillas.

    Como siempre, muchas gracias por tus soluciones. Un saludo.

    Responder
  • octubre 26, 2013 en 10:26 am
    Permalink

    hola lo pego en mi blog pero no me sale nada se queda en blaco el hueco

    Responder
  • octubre 26, 2013 en 10:31 am
    Permalink

    me puedes ayudar xfa pongo los codigos en mi blog pero se keda en blaco mi url es
    monsterpruebas.blogspot.com
    es solo un blog de pruebas para luego hacer el bueno
    gracias

    Responder
  • noviembre 4, 2013 en 12:29 am
    Permalink

    Muy buen tutorial pero la parte para dejar el url del blog esta mal, falta un / y ademas dice blospot, deberia decir blogspot. Gracias por el tip, me sirvio mucho

    Responder
  • noviembre 18, 2013 en 7:55 pm
    Permalink

    Lo pruebo añadiendo “/” y la “g” que falta, pero sale en blanco. Ha que puede ser debido.Porque tengo comentarios y no sale nada.

    Responder
  • diciembre 20, 2013 en 11:10 am
    Permalink

    Desde que he añadido la caja de comentarios en la que se puede elegir si comentar mediante Google+, Blogger o Facebook, me ha dejado de funcionar, se ha quedado en blanco. Hasta entonces, lo puse en cuanto lo vi y funcionaba correctamente (muy bueno, por cierto). Dime qué puede ser. Muchas gracias.

    Responder
  • enero 12, 2014 en 9:44 pm
    Permalink

    Genial! Lo he puesto en mi blog y funciona perfectamente solo que lo he tenido que modificar porque se salía del diseño, de modo que en “background:none;width:100%} he cambiado el porcentaje por 60 y que da justo como yo quería.
    Dos preguntas ¿Se pueden quitar las fotos de los que comentan?¿Se puede ralentizar un poco?.Un millón de gracias. Aquí mi blog por si lo quieres ojear: http://carmen-jugandoyaprendiendo.blogspot.com.es/

    Responder
    • enero 23, 2014 en 7:25 pm
      Permalink

      Carmen eres muy hábil con los códigos 🙂

      Si quieres el gadget de los últimos comentarios sin avatar, aquí en el blog hay varios artículos con mas opciones de las cuales puedes escoger la que mas te guste.

      Saludos

      Responder
  • febrero 4, 2014 en 9:08 am
    Permalink

    Gracias por el gadget, solo una duda, me aparecen solamente los comentarios de los primeros días del blog (hace 8 meses), tendría que haber cientos y siempre aparecen los 15 primeros.

    Donde pone: recent comments 15

    el 15 lo cambié por 100 a ver si aparecían los últimos y nada, solo aparecen los 15 primeros.

    Tienes idea de por que sucede? ¿qué podría modificar? Par que me aparecieran los últimos y no los primeros

    muchas gracias
    Mariona

    Responder
    • febrero 18, 2014 en 3:51 pm
      Permalink

      Prueba a cambiar esta línea numComments = 15, también en la linea 19 hay otro max-results=15. Quizá cambiando los dos te salgan todos.

      Responder
    • marzo 12, 2014 en 11:37 pm
      Permalink

      Amigo Mariano te recomiendo que no pongas mas comentarios porque puede hacer que tu blog cargue mucho mas lento [-(

      Saludos

      Responder
  • abril 3, 2014 en 12:43 pm
    Permalink

    Lo he puesto en mi blog pero no aparece. Esta un espacio donde debería totalmente negro. me ayudas?

    Responder
  • abril 9, 2014 en 4:42 pm
    Permalink

    Saludos Hayder… mira pasa lo siguiente agregue el gadget de comentarios que esta en esta pagina no me deja modificar el valor total de los comentarios.. siempre me quedan en 5… no deja poner 10 o 15 .. alguna solucion?.. de antemano gracias y un gusto volver a saludarte !!!!

    Responder
    • abril 12, 2014 en 3:41 pm
      Permalink

      El numero de comentarios por defecto del gadget es 15 y lo puedes cambiar en la linea:

      numComments = 15

      Saludos

      Responder
  • abril 15, 2014 en 2:58 pm
    Permalink

    Muchas Gracias: me frustró cuando blogger desactivó su gadget de últimos comentarios y fue una maravilla hallarte porque pude ponerlo yo solita y me salió muy bien, ya que soy una señora de otra época, te felicito y agradezco enormemente tu ayuda, Dios te bendiga. Shalom

    Responder
    • abril 15, 2014 en 5:04 pm
      Permalink

      Omi gracias por comentar, me gratifica mucho que mi trabajo pueda ayudar a personas como tu.

      Saludos y bendiciones para ti :>)

      Responder
  • mayo 26, 2014 en 5:33 am
    Permalink

    Hola, buenas noches 🙂
    Me encantó este gadget. Tengo un foro y los Últimos temas así aparecen en la columna lateral, con un marquee, y este gadget me cayó de maravilla para el blog.
    Los comentarios van un poco rápido, pero está bien, para que no se haga tedioso el estar esperando que aparezcan todos; sin embargo, era difícil seleccionarlos a esa velocidad, de manera que le modifiqué para que se pudiera parar al poner el cursor encima. Por si a alguien le interesa, cambié estas líneas → onmouseover=”this.scrollAmount=’3′” onmouseout=”this.scrollAmount=’3′”
    por éstas → onmouseover=”this.stop()” onmouseout=”this.start()”
    Muchísimas gracias por el aporte, ¡Dios te bendiga, Hayder!

    Responder
  • septiembre 5, 2014 en 3:12 pm
    Permalink

    Amigo, hace 3 meses que lo puse y me funcionó muy bien, pero desde ayer me dejó de funcionar y se borró de mi blog.
    Sabés que pasó???

    Responder
  • septiembre 6, 2014 en 1:47 pm
    Permalink

    Hola, soy el anonimo del 5 de septiembre.
    Ya encontré la solución.
    En el codigo hay que reemplazar la parte donde dice : “http://widgets.way2blogging.org/blogger-widgets/w2b-recent-comments-gravatar.js”
    Por: “https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/ultimoscomentarios.js”
    Y listo. Saludos!

    Responder
    • septiembre 8, 2014 en 2:57 pm
      Permalink

      Gracias, Anónimo, desde hace unos días me pasaba igual y ya vuelve a funcionar.

      Un abrazo.

      PD: Hayder, hace un tiempo, por este mismo hilo, me dijiste que era incompatible este gadget con el que hace posible elegir comentar por Blogger, Facebook o Google+. Hacerte saber que tengo ambos puestos y funcionan en conjunto 😉 Un abrazo.

      Responder
  • octubre 16, 2014 en 5:12 pm
    Permalink

    Amigo creo que el scrit dejo de funcionar lo tengo en mi blog y derrepente dejo de aparecer amigo

    Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *