Páginas

20 febrero 2011

Blogger: Slide de entradas recienes

El slide de entradas recientes es una opcion interesante a la hora de retener a nuestras visitas, dandoles la opcion de poder ver mas de un post a la vez, o al menos un resumen corto de algunas pocas entradas que tal vez le llamen la atención.

Si eres un lector habitual de SantyWeb, seguro ya habrás notado el Slider de entradas recientes que tengo implementado en mi blog. Las mejores bondades que ofrecen este tipo de sistemas, es que ocupan muy poco espacio, pueden mostrar bastante información, son dinamicos, llamativos a la vista, y su carga a la página es muy poca.

Gadget de Entradas Recientes

Sus características técnicas:
  • Desarrollado en Javascript sobre el framework 'JQuery'
  • Es compatible con los navegadores de nueva y vieja generación
  • Facil de implementar y tiene muchisimas opciones a configurar.
Originalmente fue desarrollado por Dynamic Drive, pero le hice alguna modificaciones para que siga moviendose aún cuando llegue al final y tambien para que se detenga si el cursor esta sobre la entrada.

No es necesario descargar ningun archivo para implementarlo en tu propio blog, así que si gustas vamos a realizar los siguientes pasos:

/!\ Si ya tienes instalado JQuery en tu blog, inicia en el paso [4].

/!\ Si tienes instalado Script.aculo.us No puedes instalar JQuery!!

[1] Entra a Diseño>Edicion HTML>Sin expandir plantillas de artilugios.

[2] Con la combinación de teclas 'Ctrl + F' busca esta etiqueta:
</head>


[3] Y justo antes de la etiqueta
</head>
coloca esto:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>
[4] Despues de instalar JQuery en tu blog, habrá que implementar el Slide de entradas recientes, por lo que tambíen antes de la etiqueta
</head>
coloca este otro código:
<script type='text/javascript'>/*<![CDATA[*/ /*-Carousel-*/var stepcarousel={ajaxloadingmsg: '<div style="margin: 1em; font-weight: bold"><img src="ajaxloadr.gif" style="vertical-align: middle" /> Fetching Content. Please wait...</div>', defaultbuttonsfade: 0.4, configholder: {},getCSSValue:function(val){return (val=="auto")? 0 : parseInt(val);},getremotepanels:function($, config){ config.$belt.html(this.ajaxloadingmsg);$.ajax({url: config.contenttype[1],async: true,error:function(ajaxrequest){config.$belt.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText);},success:function(content){config.$belt.html(content);config.$panels=config.$gallery.find('.'+config.panelclass);stepcarousel.alignpanels($, config);}})},getoffset:function(what, offsettype){return (what.offsetParent)? what[offsettype]+this.getoffset(what.offsetParent, offsettype) : what[offsettype];},getCookie:function(Name){ var re=new RegExp(Name+"=[^;]+", "i");if (document.cookie.match(re))return document.cookie.match(re)[0].split("=")[1];return null;},setCookie:function(name, value){document.cookie = name+"="+value;},fadebuttons:function(config, currentpanel){config.$leftnavbutton.fadeTo('fast', currentpanel==0? this.defaultbuttonsfade : 1);config.$rightnavbutton.fadeTo('fast', currentpanel==config.lastvisiblepanel? this.defaultbuttonsfade : 1);if (currentpanel==config.lastvisiblepanel)stepcarousel.stopautostep(config);},addnavbuttons:function($, config, currentpanel){config.$leftnavbutton=$('<img src="'+config.defaultbuttons.leftnav[0]+'">').css({zIndex:50, position:'absolute', left:config.offsets.left+config.defaultbuttons.leftnav[1]+'px', top:config.offsets.top+config.defaultbuttons.leftnav[2]+'px', cursor:'hand', cursor:'pointer'}).attr({title:'Back '+config.defaultbuttons.moveby+' panels'}).appendTo('body');config.$rightnavbutton=$('<img src="'+config.defaultbuttons.rightnav[0]+'">').css({zIndex:50, position:'absolute', left:config.offsets.left+config.$gallery.get(0).offsetWidth+config.defaultbuttons.rightnav[1]+'px', top:config.offsets.top+config.defaultbuttons.rightnav[2]+'px', cursor:'hand', cursor:'pointer'}).attr({title:'Forward '+config.defaultbuttons.moveby+' panels'}).appendTo('body');config.$leftnavbutton.bind('click', function(){ stepcarousel.stepBy(config.galleryid, -config.defaultbuttons.moveby);});config.$rightnavbutton.bind('click', function(){ stepcarousel.stepBy(config.galleryid, config.defaultbuttons.moveby);});if (config.panelbehavior.wraparound==false)this.fadebuttons(config, currentpanel);return config.$leftnavbutton.add(config.$rightnavbutton);},alignpanels:function($, config){var paneloffset=0;config.paneloffsets=[paneloffset];config.panelwidths=[];config.$panels.each(function(index){var $currentpanel=$(this);$currentpanel.css({float: 'none', position: 'absolute', left: paneloffset+'px'});$currentpanel.bind('click', function(e){return config.onpanelclick(e.target)});paneloffset+=stepcarousel.getCSSValue($currentpanel.css('marginRight')) + parseInt($currentpanel.get(0).offsetWidth || $currentpanel.css('width'));config.paneloffsets.push(paneloffset);config.panelwidths.push(paneloffset-config.paneloffsets[config.paneloffsets.length-2]);});config.paneloffsets.pop();var addpanelwidths=0;var lastpanelindex=config.$panels.length-1;config.lastvisiblepanel=lastpanelindex;for (var i=config.$panels.length-1; i>=0; i--){addpanelwidths+=(i==lastpanelindex? config.panelwidths[lastpanelindex] : config.paneloffsets[i+1]-config.paneloffsets[i]);if (config.gallerywidth>addpanelwidths)config.lastvisiblepanel=i;}config.$belt.css({width: paneloffset+'px'});config.currentpanel=(config.panelbehavior.persist)? parseInt(this.getCookie(config.galleryid+"persist")) : 0;config.currentpanel=(typeof config.currentpanel=="number" && config.currentpanel<config.$panels.length)? config.currentpanel : 0;var endpoint=config.paneloffsets[config.currentpanel]+(config.currentpanel==0? 0 : config.beltoffset);config.$belt.css({left: -endpoint+'px'});if (config.defaultbuttons.enable==true){var $navbuttons=this.addnavbuttons($, config, config.currentpanel);$(window).bind("load resize", function(){config.offsets={left:stepcarousel.getoffset(config.$gallery.get(0), "offsetLeft"), top:stepcarousel.getoffset(config.$gallery.get(0), "offsetTop")};config.$leftnavbutton.css({left:config.offsets.left+config.defaultbuttons.leftnav[1]+'px', top:config.offsets.top+config.defaultbuttons.leftnav[2]+'px'});config.$rightnavbutton.css({left:config.offsets.left+config.$gallery.get(0).offsetWidth+config.defaultbuttons.rightnav[1]+'px', top:config.offsets.top+config.defaultbuttons.rightnav[2]+'px'});});}if (config.autostep && config.autostep.enable){var $carouselparts=config.$gallery.add(typeof $navbuttons!="undefined"? $navbuttons : null);$carouselparts.hover(function(){ stepcarousel.stopautostep(config);config.autostep.hoverstate="over";}, function(){ if (config.steptimer && config.autostep.hoverstate=="over" && config.autostep.status!="stopped"){config.steptimer=setInterval(function(){stepcarousel.autorotate(config.galleryid)}, config.autostep.pause);config.autostep.hoverstate="out";}});config.steptimer=setInterval(function(){stepcarousel.autorotate(config.galleryid)}, config.autostep.pause);}this.createpaginate($, config);this.statusreport(config.galleryid);config.oninit();config.onslideaction(this);},stepTo:function(galleryid, pindex){var config=stepcarousel.configholder[galleryid];if (typeof config=="undefined"){return}stepcarousel.stopautostep(config);var pindex=Math.min(pindex-1, config.paneloffsets.length-1);var endpoint=config.paneloffsets[pindex]+(pindex==0? 0 : config.beltoffset);if (config.panelbehavior.wraparound==false && config.defaultbuttons.enable==true){ this.fadebuttons(config, pindex)}config.$belt.animate({left: -endpoint+'px'}, config.panelbehavior.speed, function(){config.onslideaction(this)});config.currentpanel=pindex;this.statusreport(galleryid);},stepBy:function(galleryid, steps, isauto){var config=stepcarousel.configholder[galleryid];if (typeof config=="undefined"){return}if (!isauto) stepcarousel.stopautostep(config);var direction=(steps>0)? 'forward' : 'back';var pindex=config.currentpanel+steps;if (config.panelbehavior.wraparound==false){ pindex=(direction=="back" && pindex<=0)? 0 : (direction=="forward")? Math.min(pindex, config.lastvisiblepanel) : pindex;if (config.defaultbuttons.enable==true){stepcarousel.fadebuttons(config, pindex);}}else{ if (pindex>config.lastvisiblepanel && direction=="forward"){pindex=(config.currentpanel<config.lastvisiblepanel)? config.lastvisiblepanel : 0;}else if (pindex<0 && direction=="back"){pindex=(config.currentpanel>0)? 0 : config.lastvisiblepanel;}}var endpoint=config.paneloffsets[pindex]+(pindex==0? 0 : config.beltoffset);if (pindex==0 && direction=='forward' || config.currentpanel==0 && direction=='back' && config.panelbehavior.wraparound==true){ config.$belt.animate({left: -config.paneloffsets[config.currentpanel]-(direction=='forward'? 100 : -30)+'px'}, 'normal', function(){config.$belt.animate({left: -endpoint+'px'}, config.panelbehavior.speed, function(){config.onslideaction(this)});})}else{config.$belt.animate({left: -endpoint+'px'}, config.panelbehavior.speed, function(){config.onslideaction(this)});}config.currentpanel=pindex;this.statusreport(galleryid);},autorotate:function(galleryid){var config=stepcarousel.configholder[galleryid];this.stepBy(galleryid, config.autostep.moveby, true);},stopautostep:function(config){clearTimeout(config.steptimer);},statusreport:function(galleryid){var config=stepcarousel.configholder[galleryid];if (config.statusvars.length==3){var startpoint=config.currentpanel;var visiblewidth=0;for (var endpoint=startpoint; endpoint<config.paneloffsets.length; endpoint++){visiblewidth+=config.panelwidths[endpoint];if (visiblewidth>config.gallerywidth){break}}startpoint+=1;endpoint=(endpoint+1==startpoint)? startpoint : endpoint;var valuearray=[startpoint, endpoint, config.panelwidths.length];for (var i=0; i<config.statusvars.length; i++){window[config.statusvars[i]]=valuearray[i];config.$statusobjs[i].text(valuearray[i]+" ");}};stepcarousel.selectpaginate(jQuery, galleryid);},createpaginate:function($, config){if (config.$paginatediv.length==1){var $templateimg=config.$paginatediv.find('img["data-over"]:eq(0)');var controlpoints=[], controlsrc=[], imgarray=[], moveby=$templateimg.attr("data-moveby") || 1;var asize=(moveby==1? 0:1) + Math.floor((config.lastvisiblepanel+1) / moveby);var imghtml=$('<div>').append($templateimg.clone()).html();srcs=[$templateimg.attr('src'), $templateimg.attr('data-over'), $templateimg.attr('data-select')];for (var i=0; i<asize; i++){var moveto=Math.min(i*moveby, config.lastvisiblepanel);imgarray.push(imghtml.replace(/>$/, ' data-index="'+i+'" data-moveto="'+moveto+'" title="Entrada: '+(moveto+1)+'">') +'\n');controlpoints.push(moveto);};var $controls=$('<span></span>').replaceAll($templateimg).append(imgarray.join('')).find('img');$controls.css({cursor:'pointer'});config.$paginatediv.bind('click', function(e){var $target=$(e.target);if ($target.is('img') && $target.attr('data-over')){stepcarousel.stepTo(config.galleryid, parseInt($target.attr('data-moveto'))+1);config.steptimer=setInterval(function(){stepcarousel.autorotate(config.galleryid)}, config.autostep.pause);config.autostep.hoverstate="out";};});config.$paginatediv.bind('mouseover mouseout', function(e){var $target=$(e.target);if ($target.is('img') && $target.attr('data-over')){if (parseInt($target.attr('data-index')) != config.pageinfo.curselected)$target.attr('src', srcs[(e.type=="mouseover")? 1 : 0]);}});config.pageinfo={controlpoints:controlpoints, $controls:$controls,  srcs:srcs, prevselected:null, curselected:null};}},selectpaginate:function($, galleryid){var config=stepcarousel.configholder[galleryid];if(config.$paginatediv.length==1){for (var i=0; i<config.pageinfo.controlpoints.length; i++){if(config.pageinfo.controlpoints[i] <= config.currentpanel)config.pageinfo.curselected=i;}if (typeof config.pageinfo.prevselected!=null){config.pageinfo.$controls.eq(config.pageinfo.prevselected).attr('src', config.pageinfo.srcs[0])}config.pageinfo.$controls.eq(config.pageinfo.curselected).attr('src', config.pageinfo.srcs[2]);config.pageinfo.prevselected=config.pageinfo.curselected;}},loadcontent:function(galleryid, url){var config=stepcarousel.configholder[galleryid];config.contenttype=['ajax', url];stepcarousel.stopautostep(config);stepcarousel.resetsettings($, config);stepcarousel.init(jQuery, config);},init:function($, config){config.gallerywidth=config.$gallery.width();config.offsets={left:stepcarousel.getoffset(config.$gallery.get(0), "offsetLeft"), top:stepcarousel.getoffset(config.$gallery.get(0), "offsetTop")};config.$belt=config.$gallery.find('.'+config.beltclass);config.$panels=config.$gallery.find('.'+config.panelclass);config.$paginatediv=$('#'+config.galleryid+'-paginate');if (config.autostep){config.autostep.pause+=config.panelbehavior.speed}config.onpanelclick=(typeof config.onpanelclick=="undefined")? function(target){} : config.onpanelclick;config.onslideaction=(typeof config.onslide=="undefined")? function(){} : function(beltobj){$(beltobj).stop(); config.onslide()};config.oninit=(typeof config.oninit=="undefined")? function(){} : config.oninit;config.beltoffset=stepcarousel.getCSSValue(config.$belt.css('marginLeft'));config.statusvars=config.statusvars || [];config.$statusobjs=[$('#'+config.statusvars[0]), $('#'+config.statusvars[1]), $('#'+config.statusvars[2])];config.currentpanel=0;stepcarousel.configholder[config.galleryid]=config;if (config.contenttype[0]=="ajax" && typeof config.contenttype[1]!="undefined"){stepcarousel.getremotepanels($, config);}else{stepcarousel.alignpanels($, config)}},resetsettings:function($, config){config.$gallery.unbind();config.$belt.stop();config.$panels.remove();if (config.$leftnavbutton){config.$leftnavbutton.remove();config.$rightnavbutton.remove();};if (config.$paginatediv.length==1){config.$paginatediv.unbind();config.pageinfo.$controls.eq(0).attr('src', config.pageinfo.srcs[0]).removeAttr('data-index').removeAttr('data-moveto').removeAttr('title').end().slice(1).remove();}if (config.autostep)config.autostep.status=null;if (config.panelbehavior.persist){stepcarousel.setCookie(window[config.galleryid+"persist"], 0)}},setup:function(config){document.write('<style type="text/css">\n#'+config.galleryid+'{overflow: hidden;}\n</style>');jQuery(document).ready(function($){config.$gallery=$('#'+config.galleryid);stepcarousel.init($, config)});jQuery(window).bind('unload', function(){stepcarousel.resetsettings($, config);if (config.panelbehavior.persist)stepcarousel.setCookie(config.galleryid+"persist", config.currentpanel);jQuery.each(config, function(ai, oi){oi=null});config=null})}};/* Step Carousel Viewer- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com Script Download/ http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm Usage Terms: http://www.dynamicdrive.com/notice.htm Current version (Sept 29th, 09'): 1.8 See http://www.dynamicdrive.com/dynamicindex4/stepcarouselchangelog.txt for details */
stepcarousel.setup({
  galleryid: 'SlidingEntradas',
  beltclass: 'belt',
  panelclass: 'SantyPanel',
  autostep: {enable:true, moveby:1, pause:3000},
  panelbehavior: {speed:600, wraparound:true, persist:false},
  defaultbuttons: {enable: false},
  contenttype: ['inline']
});/*]]>*/</script>
[5] Una vez agregado lo anterior necesitamos agregar el siguiente código CSS en el blog, así que de nuevo busca con 'Ctrl + F':
</b:skin>

Y antes de esa etiqueta agrega lo siguiente:
.stepcarousel{position: relative; /*leave this value alone*/overflow: scroll; /*leave this value alone*/width: 250px; /*Width of Carousel Viewer itself*/height: 145px; /*Height should enough to fit largest content's height*/}
.SantyPanel img{margin:0 2px 0 2px;padding:0;}
.stepcarousel .belt{position: absolute; /*leave this value alone*/left: 0;top: 0;}
.stepcarousel .SantyPanel a,.stepcarousel .SantyPanel a:visited,.stepcarousel .SantyPanel a:hover,.stepcarousel .SantyPanel a:active{color:white;font-size:13px;text-decoration:none !important;margin:0 !important;padding:0 !important;display:block;}
.stepcarousel .SantyPanel{font-size:11px;float: left; /*leave this value alone*/ width: 250px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */}
#HTML128 {-moz-box-shadow: 0 0 10px black;-webkit-box-shadow: 0 0 10px black;-moz-border-radius: 0 0 10px 10px;-webkit-border-radius: 0 0 10px 10px;width:250px;}
#HTML128 .widget-content{-moz-border-radius: 0 0 10px 10px;-webkit-border-radius: 0 0 10px 10px;color: white;background-image:-moz-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0.5));background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,1)), to(rgba(0,0,0,0.5)));background-color:none;line-height:normal !important;}
[6] El ultimo paso es agregar el gadget a tu blog. Para lo cual necesitas buscar con 'Ctrl + F':
<b:widget id
Encontrarás algo como lo siguiente:
<b:widget id='XXXXX' locked='false' title='XXXXXXXXXXX' type='XXXX'/>
Y justo despues de la etiqueta anterior( las "XXXXXX" representa cualquier letra o numero xD ). Agrega lo siguiente:
<b:widget id='HTML128' locked='false' title='Entradas Recientes' type='HTML'>
<b:includable id='main'>
    <b:if cond='data:title != ""'>
      <h2 class='title'><data:title/></h2>
    </b:if>
    <script type='text/javascript'>/*<![CDATA[*/ santyEntrRecRSS=function(json){var f = "";var re=/<\S[^>]*>/g;var n,x,l,th,e,t,i;var m = json.feed.entry.length;for (i=0;i<m;i++) {n = json.feed.entry[i];for(x=0;x < n.link.length;x++){l=(n.link[x].rel=="alternate"?n.link[x].href:0)}th=("media$thumbnail" in n)? n.media$thumbnail.url:"IMAGEN_GENERICA";e=(("summary" in n)? n.summary.$t : n.content.$t).substring(0,144)+"...";e=e.replace(re,'');e=e.replace(/'/g,'');e=e.replace(/"/g,'');th=th.replace(re,'');t = n.title.$t.link(l).bold();f=f+"<div class='SantyPanel'><img style='float:left;margin-right:3px;' height='72' width='72' title='"+n.title.$t+"' src='"+th+"'/>"+t+"<br/>"+e+"</div>";}document.write(f);};    /*]]>*/</script>
    <div class='widget-content'>
      <data:content/>
      <div class='stepcarousel' id='SlidingEntradas'>
        <div class='belt'>
          <script src='http://AQUI_TU_BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=santyEntrRecRSS&amp;max-results=5' type='text/javascript'></script>
        </div>
      </div>
      <p id='SlidingEntradas-paginate' style='width: 250px; text-align:center'>
        <img alt='*' data-moveby='1' data-over='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSy4kn9ZS4Ix1YbqlQZiI87HUDg5ndCSkq3SQtf49gRFbSb5pz7sBUEs1oBihBF0BpTjq7H3NrFDajlUpr2Lw02syO5zYcHiigKlb8Iln5e1l_9BtsJuUh1wiCVltEgaYZDd9kZLGnrVm9/' data-select='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6iHmpcfM9octRA6JNjtA76dEwfTA2-gB_nOj9NJ_5hYneNmJF7AQd7JHDgN7kgXo9Ca_ahxnJpi9F5A275SpKV3xVim__z6S5DH0v989tjP0HkGNxgAYaFTi-xKJTzwIwd4PJb46YHAW9/' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCD2wXj3gpvfB6HfdELuN53V6y1hjXDrx5rgDRX2nP87Jb63ZjJMu4cuUuuAyepeeaIALZUUniHBi4jlw6_VGJyoaa-wk3fa1cxd36rHUrlt7vS-sTwDCHA1IqUcBGZjUJ-ZV4sdhHfqHu/'/>
      </p>
    </div>
  </b:includable>
</b:widget>

IMAGEN_GENERICA: Sustituye esto por cualquier imagen, esta imagen saldrá cuando la entrada no tenga imagen.
AQUI_TU_BLOG: Sustituyelo por el nombre de tu blog, el que va en la URL claro.
5: Son el número de entradas que mostrará este gadget.

Si sigues estos pasos justo al final del dia tendrás un Gagdet de entradas recientes deslizandose en tu blog xD!!Es posible que en algunos blogs no funcione, debido a que aún esta en pruebas Suerte!

18 comentarios:

  1. santy que tal, como estas?? necesito hablar contigo para un par de cuestiones, si no te importa avisame mi correo es erfrancis@hotmail.com (cuando hemos hablado era abreparentesis) ya me tienes agregado de cuando hemos hablado, avisame necesito tu ayuda en un par de cuestiones please! y proponerte que iniciemos un proyecto web tambien, saludos!

    ResponderBorrar
  2. Hola, muy buena ayuda aqui ;)
    Solo una duda, en mi blog tengo tanto Jquery como Script.aculo.us, que puede provocar esta combinacion? (jaja suena como pregunta medica)
    Saludos

    ResponderBorrar
  3. ReverieM, como cuando vas con el doctor, jaja!

    Bien el síntoma mas grave y mas frecuente es que dejen de funcionar totalmente estos grandiosos frameworks, o mucho menos probable puede ser que dejen de funcionar algunas caracteristicas de los dos frameworks.

    Pero si no te dan problemas no hay por que temer, existe una forma de tenerlos a los dos juntos sin problemas. Trabajando cada cual separadamente claro. Aunque la página se pone mas pesada.

    Suerte!!

    ResponderBorrar
  4. Santy te he enviado un correo con una duda respecto a una herramienta para hacer zoom en una página web, como tu tienes, pero tu lo tienes solamente en el texto, yo hablo de algo que haga zoom en todo el body, si no te ha llegado comentamelo y te lo envio otra vez, a ver si podemos hablar! gracias

    ResponderBorrar
  5. Anónimo, Si me llegó ;)

    No te preocupes por ello:P. Ahora trabajo en ello xD

    Saludos!

    ResponderBorrar
  6. muchas gracias santy, cuando lo tengas, para verlo, que vas a hacer? me contestas por aquí o me mandas un correo?? es para estar al loro con tu blog o mirar mas mi correo... gracias ;)

    ResponderBorrar
  7. Anónimo, que te parece si lo publico :D

    Y lo hacemos público ;)!

    Saludos:P

    ResponderBorrar
  8. Me parece fenomenal, si, además podemos ayudar a mas gente o aportar más herramientas... publicalo por mi lo que quieras... espero que lo hayas conseguido hacer!!! ;)

    ResponderBorrar
  9. Santy cuando publicas eso!! ?? saludos!

    ResponderBorrar
  10. Hola santy! oye una pregunta, hay algún hack o css no se, para que solo sea leido por explorer 8? o mejor, por cualquier version de explorer? es que intento con varios para un menu emergente con un margin-top negativo y en explorer se queda un espacio entre el div que aparece y la imagen, con respecto a otros navegadores, te hablo de un -140px de margen top y explorer lo interpreta como más pixelaje, algo para resolver esto???? graciassss

    ResponderBorrar
  11. Anónimo,hola!!

    Para eso coloca antes del CSS doble diagonal:

    //margin-top:-140px;

    Así solo IE podrá tener acceso a ese CSS, suerte;)!

    ResponderBorrar
  12. hola amigo soy yo de tiempo y ahora estoy en linea, no tenía el tiempo para poder dedicarle a la web pero ahora que ya iniciaron las clases, estoy mucho con mas tiempo,
    y es un gusto poder revisar tu página sabes me parece un excelente aporte el que haces me gusta mucho ya lo estaré colocando en mi página y redireccionanlo la tuya para compartirla com más usuarios.
    es un gusto saludarte y hasta la próxima

    ResponderBorrar
  13. Oscar, un saludo!

    gracias por la visita y el comentario, yo he estado ocupadisimo con esto de los examenes, parece que no termina la temporada de examenes :\. No he tenido mucho tiempo de revisar como esta el blog, pero me da gusto que comentes.

    Si te da problemas este gadget, avisame ;) y . . .

    Saludos desde México!

    ResponderBorrar
  14. Quiero implementarlo al Blog, pero uso las librerias Scriptaculous y Prototype, habia leido que causa algunos problemas con JQuery. Quisiera aclarar esta duda, o bien, ver si hay alguna forma de crear gadgets de "ultimas entradas" con Scriptaculous y Prototype lo cual he buscado mucho por la Web y nada.

    Saludos

    ResponderBorrar
  15. GuillermoVM, hola!

    Existe una manera de tener JQuery y Scriptaculous funcionando juntos, esperame unas horas en lo que modifico el slider y tembien el post, te aviso por un comentario de estos ;)

    ResponderBorrar
  16. Gracias, estaré esperando.... Saludos desde Puebla, Santy.

    ResponderBorrar
  17. amigo muy interesante el tema que trata, lo ise tal co explicas paro hay una cosa que no me sale como debeser no idea como corregir aver si me ayuda aqui te dejo mi link http://perudeportesmas.blogspot.com/

    ResponderBorrar
  18. Disculpa, se puede usar aunque yo utilice Scriptaculous y Prototype?
    gracias :D

    ResponderBorrar

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.