martes, 11 de febrero de 2014

Comentarios recientes con efecto deslizante

Este es un gadget que pude ver mientras andaba explorando blogs y como me gustó demasiado decidí ponerlo y compartirlo por si alguien lo quiere para su blog.

Este html lo conseguí en http://www.miltrucosblogger.info/2013/09/ultimos-comentarios-efecto-slider.html y les voy a explicar como pueden editarlo un poquito


<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">


  • El primer up significa que la lista de comentarios se desliza hacia arriba y lo pueden cambiar por down
  • El scrollamount mientras más alto más rápido se desliza
  • El left significa la alineación del texto
  • El width es el ancho y el height el alto
  • El border 0px y el solid #000000 son el borde de la lista de comentarios
  • El onmouseover y onmouseout son los que controlan la velocidad con y sin el mouse, si quieren que el gadget se detenga como en mi caso cuando le pasan el mouse por encima deben colocar el onmouseover en 0 (el 3 en azul)

//<![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;
//]]>

  • el numComments son el nro de cometarios que se van a ver
  • showAvatar está en true y si no quieren que se vean el avatar de quien comentó lo pueden cambiar por false
  • avatarSize lo pueden aumentar si quieren que se vea más grande
  • roundAvatar lo pueden cambiar por true si quieren que el avatar se vea como un círculo
  • characters es el numero de caracteres que se muestran del comentario
  • showMorelink lo cambiamos por true si queremos que se muestre un enlace para ver la entrada y el comentario completo
  • moreLinktext este es el nombre del enlace que se va a mostrar para el showMorelink



</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>

  • El #A9D0F5 significa el color del fondo de cada comentario
  • El #666 es el color del texto de los comentarios
  • El #fff es el fondo del avatar de cada comentario y #e7e7e7 el es el borde del mismo 
  • El #fafafa es el color de los enlaces (el nombre de quien comentó y el link para seguir leyendo)


Ya sólo queda agregar el nombre de su blog y colocar el gadget en diseño, agregar gadget y colocar uno con html

Si tienen alguna duda me la pueden dejar en los comentarios, espero que les sea útil la entrada

Para los códigos de colores pueden usar http://color.hailpixel.com/http://html-color-codes.info/codigos-de-colores-hexadecimales/#HTML_Color_Picker me gusta más la primera opción porque pueden crear combinaciones de colores

2 comentarios:

  1. ¡Qué chulo! Me encanta que nos enseñes cositas así, igual lo aplico en el nuevo blog, aunque de momento no tiene muchos seguidores xD

    ResponderEliminar
  2. Pues yo veo estas cosas y me suenan a chino, es que con la tecnología soy un desastre, menos mal que he tenido ayuda con mi blog porque si no... ;)
    Por cierto, hay un concurso de mi libro, por si te interesa :)
    Besos

    ResponderEliminar