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 »",
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.