Personalizar la barra de desplazamiento (scrollbar) con jScrollPane

8 de abril de 2013 115 comentarios ,
jScrollPane es un script de jQuery que permite cambiar la barra de desplazamiento del blog, es decir, el scrollbar del navegador.
Si bien podemos usar CSS para modificarlo, el problema es que no está estandarizado, por lo que con CSS sólo podemos hacerlo funcionar en Chrome y Safari; y en el caso de Internet Explorer también tiene su propio código pero obviamente sólo funciona en ese navegador (no sé en cuáles versiones). Así que lo que haremos a continuación es darle un nuevo aspecto al scrollbar pero usando jQuery, de esta manera el cambio será visible en todos los navegadores.

Puedes ver un ejemplo en este blog de pruebas, verás que la barra de desplazamiento tiene otra forma y color.

Para cambiar el scrollbar de tu blog primero entra en Plantilla | Edición de HTML y antes de </head> pega este código:
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

<style>
.jspContainer {overflow: hidden;position: relative;}.jspPane {position: absolute;}
.jspVerticalBar {position: absolute;top: 0;right: 0;width: 16px;height: 100%;background: #ccc;}
.jspHorizontalBar {position: absolute;bottom: 0;left: 0;width: 100%;height: 16px;background: #ccc;}
.jspVerticalBar *,.jspHorizontalBar * {margin: 0;padding: 0;}
.jspCap {display: none;}.jspHorizontalBar .jspCap {float: left;}

.jspTrack {
background: #dde; /* Color de fondo de la barra */
position: relative;
}
.jspDrag {
background: #bbd; /* Color del botón de desplazamiento */
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag {
float: left;
height: 100%;
}
.jspArrow {
background: #50506d; /*Color de los límites */
text-indent: -20000px;
display: block;
cursor: pointer;
}
.jspArrow.jspDisabled {
cursor: default;
background: #80808d; /*Color de los límites cuando el botón llega hasta ellos */
}
.jspVerticalBar .jspArrow {
height: 16px;
}
.jspHorizontalBar .jspArrow {
width: 16px;
float: left;
height: 100%;
}
.jspVerticalBar .jspArrow:focus {outline: none;}.jspCorner {background: #eeeef4;float: left;height: 100%;}* html .jspCorner {margin: 0 -3px 0 0;}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#blog-container {
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
</style>
<script>
//<![CDATA[
/*! Copyright (c) 2013 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
* Version: 3.1.3
*/

(function (factory) {
if ( typeof define === 'function' && define.amd ) {
define(['jquery'], factory);
} else if (typeof exports === 'object') {
module.exports = factory;
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {

var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'];
var toBind = 'onwheel' in document || document.documentMode >= 9 ? ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'];
var lowestDelta, lowestDeltaXY;

if ( $.event.fixHooks ) {
for ( var i = toFix.length; i; ) {
$.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks;
}
}

$.event.special.mousewheel = {
setup: function() {
if ( this.addEventListener ) {
for ( var i = toBind.length; i; ) {
this.addEventListener( toBind[--i], handler, false );
}
} else {
this.onmousewheel = handler;
}
},

teardown: function() {
if ( this.removeEventListener ) {
for ( var i = toBind.length; i; ) {
this.removeEventListener( toBind[--i], handler, false );
}
} else {
this.onmousewheel = null;
}
}
};

$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},

unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});

function handler(event) {
var orgEvent = event || window.event,
args = [].slice.call(arguments, 1),
delta = 0,
deltaX = 0,
deltaY = 0,
absDelta = 0,
absDeltaXY = 0,
fn;
event = $.event.fix(orgEvent);
event.type = "mousewheel";
if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta; }
if ( orgEvent.detail ) { delta = orgEvent.detail * -1; }
if ( orgEvent.deltaY ) {
deltaY = orgEvent.deltaY * -1;
delta = deltaY;
}
if ( orgEvent.deltaX ) {
deltaX = orgEvent.deltaX;
delta = deltaX * -1;
}
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY; }
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = orgEvent.wheelDeltaX * -1; }
absDelta = Math.abs(delta);
if ( !lowestDelta || absDelta < lowestDelta ) { lowestDelta = absDelta; }
absDeltaXY = Math.max(Math.abs(deltaY), Math.abs(deltaX));
if ( !lowestDeltaXY || absDeltaXY < lowestDeltaXY ) { lowestDeltaXY = absDeltaXY; }
fn = delta > 0 ? 'floor' : 'ceil';
delta = Math[fn](delta / lowestDelta);
deltaX = Math[fn](deltaX / lowestDeltaXY);
deltaY = Math[fn](deltaY / lowestDeltaXY);
args.unshift(event, delta, deltaX, deltaY);
return ($.event.dispatch || $.event.handle).apply(this, args);
}
}));

/*
* jScrollPane - v2.0.0beta5 - 2010-09-18
* http://jscrollpane.kelvinluck.com/
* Copyright (c) 2010 Kelvin Luck
* Dual licensed under the MIT and GPL licenses.
*/
(function(b,a,c){b.fn.jScrollPane=function(f){function d(C,L){var au,N=this,V,ah,v,aj,Q,W,y,q,av,aB,ap,i,H,h,j,X,R,al,U,t,A,am,ac,ak,F,l,ao,at,x,aq,aE,g,aA,ag=true,M=true,aD=false,k=false,Z=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aE=C.css("paddingTop")+" "+C.css("paddingRight")+" "+C.css("paddingBottom")+" "+C.css("paddingLeft");g=(parseInt(C.css("paddingLeft"))||0)+(parseInt(C.css("paddingRight"))||0);an(L);function an(aH){var aL,aK,aJ,aG,aF,aI;au=aH;if(V==c){C.css({overflow:"hidden",padding:0});ah=C.innerWidth()+g;v=C.innerHeight();C.width(ah);V=b('<div class="jspPane" />').wrap(b('<div class="jspContainer" />').css({width:ah+"px",height:v+"px"}));C.wrapInner(V.parent());aj=C.find(">.jspContainer");V=aj.find(">.jspPane");V.css("padding",aE)}else{C.css("width",null);aI=C.outerWidth()+g!=ah||C.outerHeight()!=v;if(aI){ah=C.innerWidth()+g;v=C.innerHeight();aj.css({width:ah+"px",height:v+"px"})}aA=V.innerWidth();if(!aI&&V.outerWidth()==Q&&V.outerHeight()==W){if(aB||av){V.css("width",aA+"px");C.css("width",(aA+g)+"px")}return}V.css("width",null);C.css("width",(ah)+"px");aj.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}aL=V.clone().css("position","absolute");aK=b('<div style="width:1px; position: relative;" />').append(aL);b("body").append(aK);Q=Math.max(V.outerWidth(),aL.outerWidth());aK.remove();W=V.outerHeight();y=Q/ah;q=W/v;av=q>1;aB=y>1;if(!(aB||av)){C.removeClass("jspScrollable");V.css({top:0,width:aj.width()-g});n();D();O();w();af()}else{C.addClass("jspScrollable");aJ=au.maintainPosition&&(H||X);if(aJ){aG=ay();aF=aw()}aC();z();E();if(aJ){K(aG);J(aF)}I();ad();if(au.enableKeyboardNavigation){P()}if(au.clickOnTrack){p()}B();if(au.hijackInternalLinks){m()}}if(au.autoReinitialise&&!aq){aq=setInterval(function(){an(au)},au.autoReinitialiseDelay)}else{if(!au.autoReinitialise&&aq){clearInterval(aq)}}C.trigger("jsp-initialised",[aB||av])}function aC(){if(av){aj.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));R=aj.find(">.jspVerticalBar");al=R.find(">.jspTrack");ap=al.find(">.jspDrag");if(au.showArrows){am=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",az(0,-1)).bind("click.jsp",ax);ac=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",az(0,1)).bind("click.jsp",ax);if(au.arrowScrollOnHover){am.bind("mouseover.jsp",az(0,-1,am));ac.bind("mouseover.jsp",az(0,1,ac))}ai(al,au.verticalArrowPositions,am,ac)}t=v;aj.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});ap.hover(function(){ap.addClass("jspHover")},function(){ap.removeClass("jspHover")}).bind("mousedown.jsp",function(aF){b("html").bind("dragstart.jsp selectstart.jsp",function(){return false});ap.addClass("jspActive");var s=aF.pageY-ap.position().top;b("html").bind("mousemove.jsp",function(aG){S(aG.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",ar);return false});o()}}function o(){al.height(t+"px");H=0;U=au.verticalGutter+al.outerWidth();V.width(ah-U-g);if(R.position().left==0){V.css("margin-left",U+"px")}}function z(){if(aB){aj.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));ak=aj.find(">.jspHorizontalBar");F=ak.find(">.jspTrack");h=F.find(">.jspDrag");if(au.showArrows){at=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",az(-1,0)).bind("click.jsp",ax);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",az(1,0)).bind("click.jsp",ax);
if(au.arrowScrollOnHover){at.bind("mouseover.jsp",az(-1,0,at));x.bind("mouseover.jsp",az(1,0,x))}ai(F,au.horizontalArrowPositions,at,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aF){b("html").bind("dragstart.jsp selectstart.jsp",function(){return false});h.addClass("jspActive");var s=aF.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aG){T(aG.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",ar);return false});l=aj.innerWidth();ae()}else{}}function ae(){aj.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});F.width(l+"px");X=0}function E(){if(aB&&av){var aF=F.outerHeight(),s=al.outerWidth();t-=aF;b(ak).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;ah-=aF;F.parent().append(b('<div class="jspCorner" />').css("width",aF+"px"));o();ae()}if(aB){V.width((aj.outerWidth()-g)+"px")}W=V.outerHeight();q=W/v;if(aB){ao=1/y*l;if(ao>au.horizontalDragMaxWidth){ao=au.horizontalDragMaxWidth}else{if(ao<au.horizontalDragMinWidth){ao=au.horizontalDragMinWidth}}h.width(ao+"px");j=l-ao;ab(X)}if(av){A=1/q*t;if(A>au.verticalDragMaxHeight){A=au.verticalDragMaxHeight}else{if(A<au.verticalDragMinHeight){A=au.verticalDragMinHeight}}ap.height(A+"px");i=t-A;aa(H)}}function ai(aG,aI,aF,s){var aK="before",aH="after",aJ;if(aI=="os"){aI=/Mac/.test(navigator.platform)?"after":"split"}if(aI==aK){aH=aI}else{if(aI==aH){aK=aI;aJ=aF;aF=s;s=aJ}}aG[aK](aF)[aH](s)}function az(aF,s,aG){return function(){G(aF,s,this,aG);this.blur();return false}}function G(aH,aF,aK,aJ){aK=b(aK).addClass("jspActive");var aI,s=function(){if(aH!=0){T(X+aH*au.arrowButtonSpeed,false)}if(aF!=0){S(H+aF*au.arrowButtonSpeed,false)}},aG=setInterval(s,au.arrowRepeatFreq);s();aI=aJ==c?"mouseup.jsp":"mouseout.jsp";aJ=aJ||b("html");aJ.bind(aI,function(){aK.removeClass("jspActive");clearInterval(aG);aJ.unbind(aI)})}function p(){w();if(av){al.bind("mousedown.jsp",function(aH){if(aH.originalTarget==c||aH.originalTarget==aH.currentTarget){var aG=b(this),s=setInterval(function(){var aI=aG.offset(),aJ=aH.pageY-aI.top;if(H+A<aJ){S(H+au.trackClickSpeed)}else{if(aJ<H){S(H-au.trackClickSpeed)}else{aF()}}},au.trackClickRepeatFreq),aF=function(){s&&clearInterval(s);s=null;b(document).unbind("mouseup.jsp",aF)};b(document).bind("mouseup.jsp",aF);return false}})}if(aB){F.bind("mousedown.jsp",function(aH){if(aH.originalTarget==c||aH.originalTarget==aH.currentTarget){var aG=b(this),s=setInterval(function(){var aI=aG.offset(),aJ=aH.pageX-aI.left;if(X+ao<aJ){T(X+au.trackClickSpeed)}else{if(aJ<X){T(X-au.trackClickSpeed)}else{aF()}}},au.trackClickRepeatFreq),aF=function(){s&&clearInterval(s);s=null;b(document).unbind("mouseup.jsp",aF)};b(document).bind("mouseup.jsp",aF);return false}})}}function w(){F&&F.unbind("mousedown.jsp");al&&al.unbind("mousedown.jsp")}function ar(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");ap&&ap.removeClass("jspActive");h&&h.removeClass("jspActive")}function S(s,aF){if(!av){return}if(s<0){s=0}else{if(s>i){s=i}}if(aF==c){aF=au.animateScroll}if(aF){N.animate(ap,"top",s,aa)}else{ap.css("top",s);aa(s)}}function aa(aF){if(aF==c){aF=ap.position().top}aj.scrollTop(0);H=aF;var aI=H==0,aG=H==i,aH=aF/i,s=-aH*(W-v);if(ag!=aI||aD!=aG){ag=aI;aD=aG;C.trigger("jsp-arrow-change",[ag,aD,M,k])}u(aI,aG);V.css("top",s);C.trigger("jsp-scroll-y",[-s,aI,aG])}function T(aF,s){if(!aB){return}if(aF<0){aF=0}else{if(aF>j){aF=j}}if(s==c){s=au.animateScroll}if(s){N.animate(h,"left",aF,ab)}else{h.css("left",aF);ab(aF)}}function ab(aF){if(aF==c){aF=h.position().left}aj.scrollTop(0);X=aF;var aI=X==0,aH=X==j,aG=aF/j,s=-aG*(Q-ah);if(M!=aI||k!=aH){M=aI;k=aH;C.trigger("jsp-arrow-change",[ag,aD,M,k])}r(aI,aH);V.css("left",s);C.trigger("jsp-scroll-x",[-s,aI,aH])}function u(aF,s){if(au.showArrows){am[aF?"addClass":"removeClass"]("jspDisabled");ac[s?"addClass":"removeClass"]("jspDisabled")}}function r(aF,s){if(au.showArrows){at[aF?"addClass":"removeClass"]("jspDisabled");
x[s?"addClass":"removeClass"]("jspDisabled")}}function J(s,aF){var aG=s/(W-v);S(aG*i,aF)}function K(aF,s){var aG=aF/(Q-ah);T(aG*j,s)}function Y(aN,aL,aF){var aJ,aH,s=0,aG,aK,aM;try{aJ=b(aN)}catch(aI){return}aH=aJ.outerHeight();aj.scrollTop(0);while(!aJ.is(".jspPane")){s+=aJ.position().top;aJ=aJ.offsetParent();if(/^body|html$/i.test(aJ[0].nodeName)){return}}aG=aw();aK=aG+v;if(s<aG||aL){aM=s-au.verticalGutter}else{if(s+aH>aK){aM=s-v+aH+au.verticalGutter}}if(aM){J(aM,aF)}}function ay(){return -V.position().left}function aw(){return -V.position().top}function ad(){aj.unbind(Z).bind(Z,function(aI,aJ,aH,aF){var aG=X,s=H;T(X+aH*au.mouseWheelSpeed,false);S(H-aF*au.mouseWheelSpeed,false);return aG==X&&s==H})}function n(){aj.unbind(Z)}function ax(){return false}function I(){V.unbind("focusin.jsp").bind("focusin.jsp",function(s){if(s.target===V[0]){return}Y(s.target,false)})}function D(){V.unbind("focusin.jsp")}function P(){var aF,s;C.attr("tabindex",0).unbind("keydown.jsp").bind("keydown.jsp",function(aJ){if(aJ.target!==C[0]){return}var aH=X,aG=H,aI=aF?2:16;switch(aJ.keyCode){case 40:S(H+aI,false);break;case 38:S(H-aI,false);break;case 34:case 32:J(aw()+Math.max(32,v)-16);break;case 33:J(aw()-v+16);break;case 35:J(W-v);break;case 36:J(0);break;case 39:T(X+aI,false);break;case 37:T(X-aI,false);break}if(!(aH==X&&aG==H)){aF=true;clearTimeout(s);s=setTimeout(function(){aF=false},260);return false}});if(au.hideFocus){C.css("outline","none");if("hideFocus" in aj[0]){C.attr("hideFocus",true)}}else{C.css("outline","");if("hideFocus" in aj[0]){C.attr("hideFocus",false)}}}function O(){C.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp")}function B(){if(location.hash&&location.hash.length>1){var aG,aF;try{aG=b(location.hash)}catch(s){return}if(aG.length&&V.find(aG)){if(aj.scrollTop()==0){aF=setInterval(function(){if(aj.scrollTop()>0){Y(location.hash,true);b(document).scrollTop(aj.position().top);clearInterval(aF)}},50)}else{Y(location.hash,true);b(document).scrollTop(aj.position().top)}}}}function af(){b("a.jspHijack").unbind("click.jsp-hijack").removeClass("jspHijack")}function m(){af();b("a[href^=#]").addClass("jspHijack").bind("click.jsp-hijack",function(){var s=this.href.split("#"),aF;if(s.length>1){aF=s[1];if(aF.length>0&&V.find("#"+aF).length>0){Y("#"+aF,true);return false}}})}b.extend(N,{reinitialise:function(aF){aF=b.extend({},aF,au);an(aF)},scrollToElement:function(aG,aF,s){Y(aG,aF,s)},scrollTo:function(aG,s,aF){K(aG,aF);J(s,aF)},scrollToX:function(aF,s){K(aF,s)},scrollToY:function(s,aF){J(s,aF)},scrollBy:function(aF,s,aG){N.scrollByX(aF,aG);N.scrollByY(s,aG)},scrollByX:function(s,aG){var aF=ay()+s,aH=aF/(Q-ah);T(aH*j,aG)},scrollByY:function(s,aG){var aF=aw()+s,aH=aF/(W-v);S(aH*i,aG)},animate:function(aF,aI,s,aH){var aG={};aG[aI]=s;aF.animate(aG,{duration:au.animateDuration,ease:au.animateEase,queue:false,step:aH})},getContentPositionX:function(){return ay()},getContentPositionY:function(){return aw()},getIsScrollableH:function(){return aB},getIsScrollableV:function(){return av},getContentPane:function(){return V},scrollToBottom:function(s){S(i,s)},hijackInternalLinks:function(){m()}})}f=b.extend({},b.fn.jScrollPane.defaults,f);var e;this.each(function(){var g=b(this),h=g.data("jsp");if(h){h.reinitialise(f)}else{h=new d(g,f);g.data("jsp",h)}e=e?e.add(g):g});return e};b.fn.jScrollPane.defaults={showArrows:false,maintainPosition:true,clickOnTrack:true,autoReinitialise:false,autoReinitialiseDelay:500,verticalDragMinHeight:0,verticalDragMaxHeight:99999,horizontalDragMinWidth:0,horizontalDragMaxWidth:99999,animateScroll:false,animateDuration:300,animateEase:"linear",hijackInternalLinks:false,verticalGutter:4,horizontalGutter:4,mouseWheelSpeed:10,arrowButtonSpeed:10,arrowRepeatFreq:100,arrowScrollOnHover:false,trackClickSpeed:30,trackClickRepeatFreq:100,verticalArrowPositions:"split",horizontalArrowPositions:"split",enableKeyboardNavigation:true,hideFocus:false}})(jQuery,this);
//]]>
</script>

<script>
$(document).ready(function() {
$('.scroll-pane').jScrollPane({showArrows: true});
});
</script>
Luego busca la etiqueta:
<body>
O esta línea:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Debajo de cualquiera de ellas dos agrega esto:
<div class='scroll-pane' id='blog-container'>
Por último busca la etiqueta </body> y arriba de ella pega esto:
</div>
Guarda los cambios y listo. En color verde verás dónde se cambian los colores de la barra de desplazamiento y sus diferentes áreas, como es CSS puedes añadirle otros estilos si lo deseas, somo sombras, bordes redondeados, etc.
Si quisieras que no aparezcan los límites superior e inferior (como en el ejemplo) entonces elimina lo que está en color rojo.

Recuerda que el script usa jQuery, así que si ya lo tuvieras no pongas de nuevo el script (la primera línea del código). Si usas Scriptaculous o Mootools deberás hacerle unos ligeros cambios para que funcione.

Parece largo el código pero siempre es mejor alojar los scripts directo en la plantilla que subirlo a un hosting, de estar forma los scripts siempre estarán disponibles y cargarán más rápido. Independientemente de todo eso el resultado final es bastante estético, ¿no lo creen?


115 comentarios en:

" Personalizar la barra de desplazamiento (scrollbar) con jScrollPane "

  1. muy bueno Potro! lo voy a implementar en mi blog. Saludos

    ResponderEliminar
  2. A mi no me ha funcionado no se porque pero cuando pongo todo el codigo y aplico cambios lo unico que sale es 2013 y no se ve el blog solo un 2013 en la esquina superior izquierda alguna solucion?

    ResponderEliminar
    Respuestas
    1. Puede ser por lo de jQuery, o por algún otro script que sea incompatible con este.

      Eliminar
    2. me pasa lo mismo
      http://www.futbollaloma.blogspot.com.ar/

      Eliminar
    3. Cierto ami tampoco me funciono

      Eliminar
  3. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  4. Gracias potro como siempre buenos aportes :) saludos

    ResponderEliminar
  5. Como hago para cambiar el ancho de la barra la quiero un poco mas fina ya que no da un buen aspecto esta barra tan gruesa.

    ResponderEliminar
  6. Como puedo cambiar el ancho de la barra por que esta muy gruesa la quiero algo mas fina ya que eso no le da un buen aspecto se be muy robusta.

    ResponderEliminar
    Respuestas
    1. En esta área puedes modificar el ancho del scrollbar:

      .jspVerticalBar {
      position: absolute;
      top: 0;
      right: 0;
      width: 16px;
      height: 100%;
      background: red;
      }

      Eliminar
  7. Hola Potro como estas, la verdad esta muy bueno el aporte pero no lo he podido implementar en mi blog (http://www.fanaticosdelpadel.com.ar/) debe haber por ahi algun script que no es compatible, no asi en un blog de pruebas donde si me funciono y la verdad que me gustaria solucionar el problema, desde ya muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola mariano, puede ser porque tienes tres versiones de jQuery y debes tener sólo una. También podría ser por el script de la flecha que aparece con el scroll.

      Eliminar
    2. Ok muchas gracias Potro, tratare eliminando todas las versiones de JQuery y dejando solo la mas nueva, muchas gracias, tu pagina es espectacular, me ha servido mucho.

      Eliminar
  8. como puedo saber lo que utilizo o no? ahora mismo nose :S
    otra pregunta si utilizo ya jQuery solo tengo que quitar la primera linea o ademas modificar algo mas?

    ResponderEliminar
  9. Vale ahora ya me funciona pero sigue teniendo el mismo color el scroll

    ResponderEliminar
  10. y se me ha olvidado decirlo pero si le he cambiado el color pero lo que no se es si el color se pone entre /*color*/ o se quita todo y se pone el codigo

    ResponderEliminar
    Respuestas
    1. Hola Jesús, lo que debes cambiar es el código del color, por ejemplo, esto:
      background: #dde; /* Color de fondo de la barra */

      Por esto:
      background: #000; /* Color de fondo de la barra */

      Eliminar
  11. Eres un astro potro, gracias por semejante aporte vallas que bueno! Saludos

    ResponderEliminar
  12. Muchas gracias con google chrome si se ve la barra pero con mozila no... esto a que se puede deber? hay solucion?

    ResponderEliminar
    Respuestas
    1. Desconzco la razón, no sé si sea por otro script que usas, en todas las pruebas que yo hice funcionó en todos los navegadores, incluyendo el blog de pruebas que menciono en el post.

      Eliminar
  13. Potro, hay una nueva actualización en blogger, según veo ahora es mas fácil editar la plantilla...

    ResponderEliminar
    Respuestas
    1. Así es Jose Maria, de hecho hace algunos minutos publiqué sobre ello :)

      Eliminar
  14. Hola Potro, la configuración html de plantillas de blogger ah cambiado, ahora es mas dificil buscar las etiquetas y ya no da la opcion de expandir las etiquetas de artilugios ni nada, no he podido ni siquiera encontrar la etiqueta body ni la /body ni la alternativa que mencionaste, sabes algun truco para poder editar el html como antes? Gracias!.. T-T

    ResponderEliminar
    Respuestas
    1. Hola Joan, ahora se expanden los artilugios de forma individual dando click en la flechita junto al elemento que deseas expandir.

      Eliminar
    2. Ahhh ok Potro gracias... ¿y para buscar la etiqueta < body > y la < /body > que flechita debo expandir?... si sabes?... Es que llevo horas buscándola y no la encuentro T-T

      Eliminar
    3. Ninguna, sólo usa el buscador del navegador CTRL+F, ¡saludos!

      Eliminar
  15. Excelente y muy sencillo.

    Lamentablemente ya no motiva mucho cuando no funciona con todos los navegadores, por eso odio a esta terrible tortuga que tiene por navegador Microsoft.

    ResponderEliminar
    Respuestas
    1. En este caso funciona con todos, incluyendo el malévolo y poco querido Internet Explorer.

      Eliminar
  16. Estamos listos! Blogger ha cambiado la edicion de plantillas en HTML hoy mismo y ya no veo ni la opción de expandir artilugios, ni entiendo dónde están las cosas. ¿Puedes ayudarme? Quería usar tu post de ocultar la sidebar en las páginas estáticas, pero no hay nada donde antes.

    ResponderEliminar
    Respuestas
    1. Hola Eli, mira la última entrada que he publicado, ahí se habla sobre todo ello :)

      Eliminar
  17. Socorro Potro!! cambiaron - mal - el editor de plantillas en blogger. No existe el boton para expandir y el buscador ctrl f no funciona. Y fue hoy, cuando tengo que hacer muchísimos cambios en los blogs que administro... Realmente muuuy desalentador. Siempre aconsejo a mis clientes blogspot por la facilidad con que se puede trabajar en ellos. Ahora, hoy específicamente, me arrepiento.
    Si tenes tiempo, danos una ayudita por ese lado. Saludos y gracias!

    ResponderEliminar
    Respuestas
    1. Hola Silvia, mira esta última entrada, ahí se habla sobre ello y sobre cómo expandir los artilugios:
      http://ciudadblogger.com/2013/04/el-nuevo-diseno-en-la-edicion-html-de.html

      Saludos.

      Eliminar
  18. Muchas gracias!! Llevaba tiempo buscando esto! :-D

    ResponderEliminar
  19. Una pregunta potro espero que la puedas responder!
    Mira en este ejemplo http://www.comptongame.com/default.aspx#!all
    El desplazamiento en esa pagina es suave, pero en mi blog es diferente como igual en el tuyo. Que tengo que hacer para tener ese efecto suave? Se diria "Scroll Suave" pero no quiero los botones de ir Arriba ni Abajo que sea todo completo sin presionar nada, me entiendo? Espero tu respuesta hermano

    ResponderEliminar
    Respuestas
    1. No sé decirte, igual no veo nada distinto en ese blog, es decir, que no "veo" el suaviado del scroll por ninguna parte. En el caso del mío sólo se da con los botones, no conozco otra forma de hacerlo :/

      Eliminar
  20. Justo ayer noche me di cuenta pensé que podia ser virus o que hice algo mas , menos mal que entrando aqui como de costumbre a leerte, ya se disiparon mis dudas.

    Felicidades estás siempre al dia . Gracias por tu ayuda .Saludos

    ResponderEliminar
  21. Buen aporte! Gracias!

    ResponderEliminar
  22. Estupendo! ya lo he insertado en mi blog! Gracias por compartir tu sabiduria con el resto! ;-)

    ResponderEliminar
  23. Potro, si alguna ves quiero eliminar el scrollbar como hago para saber cual de todos los widgets es?? ayuda pliss

    ResponderEliminar
    Respuestas
    1. Hola Katty, el scrollbar no es un gadget, es un elemento propio del navegador; si quisieras que ya no esté personalizado sólo deshaz los cambios aplicados de esta entrada :)

      Eliminar
  24. Potro eso me quedo todo raro me ayudas?
    tecnologiando-katty.blogspot.com

    ResponderEliminar
    Respuestas
    1. Cuando has puesto el código del color has dejado un espacio antes de éste y después del signo de número #
      Debe estar todo junto.

      Eliminar
    2. Potro eres un genio!!! Solucionaste mi problema! xD
      Mira el blog, ya está como la queria. También quería saber una cosa:
      • ¿¿si uno quiere quitar algún script (no se si así se llama), como por ejemplo este, como hago para encontrarlo o diferenciarlo y saber hasta donde llega??

      Eliminar
    3. Busca el tutorial donde lo conseguiste, ahí verás los códigos que debes buscar para eliminar o cambiar :)

      Eliminar
  25. Quería cambiar el scrollbar de mi web por ese y al ir a editar el código html le doy a ctrl+f y a parte de que al darle no me aprece cómo en la foto de tu entrada en la que lo explicas no me sale cuando copio y pego head o body . Ya mire tu entrada sobre el nuevo diseño pero no se me ha aclarado la duda , por favor potro me podrías ayudar?

    ResponderEliminar
    Respuestas
    1. No sé cómo ayudarte, las instrucciones son las mismas sin importar el nuevo o viejo editor, quizás el problema sea jQuery o Scriptaculous, de ambos se hace mención en la entrada.

      Eliminar
  26. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. No conozco la plantilla, tendrías que preguntarle al autor de ese blog.
      Saludos.

      Pd. Elimino el comentario por el aviso que está al final.

      Eliminar
  27. Hola Potro: Perdona por ponerme en contacto contigo por esta entrada pero no encuentro otra manera. En dias pasados te hice dos preguntas y me estraña muchisimo que no me hayas contestado a las mismas porque si algo te caracteriza es lo amable y gentil que eres, pero quizas y casi segura de ello que no se la entrada donde las realice y por lo tanto es obvio que no encuentro la respuesta. Serias nuevamente tan amable de volver a ayudarme diciendome en las mismas si me contestates y donde, por favor o de lo contrario y de no haberte llegado si no te importa te las formularia de nuevo. Un gran saludo y muchas gracias por todo.
    Maria Dolores

    ResponderEliminar
    Respuestas
    1. Hola Maria Dolores, me disculpo por la tardanza, estos días han sido de un exceso de trabajo increíble que me deja pocos minutos para el blog, estoy muy retrasado con los comentarios (con todos) pero es seguro que el tuyo ya ha sido respondido. El último comentario tuyo que tengo registrado es el de esta entrada:
      http://ciudadblogger.com/2009/06/eliminar-titulo-y-descripcion-de.html

      Saludos!

      Eliminar
  28. Potro me funciona perfecto "PERO"

    Mi menu es asi:

    Inicio Blogger(incluye submenu) Contacto

    y cuando pongo los codigos sale se repite asi:

    Inicio Blogger(incluye submenu) Contacto Inicio Blogger(incluye submenu) Contacto

    Ya mire lo de la vercion de Jquerry pero aun nada. Espero y me puedas ayudar Saludos!

    ResponderEliminar
    Respuestas
    1. ¿En cuál blog tienes el problema Alejandro?

      Eliminar
    2. Ya lo solucione cambie mi menu era porque este estaba con jQuery, ya no siento que deba de poner cual es mi blog para no hacer spam hehe.

      Saludos!

      Eliminar
  29. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. No sé decirte, supongo que es algún tipo slider de contenido.
      Pd. Elimino el comentario por el aviso que está al final.
      Saludos.

      Eliminar
  30. Hola buenas Potro, gracias por el breve tutorial, pero lo he echo de todas las maneras posibles desde dreamweaver y no consigo hacer funcionar el script, he echo los pasos y nada... tengo una plantilla personalizada,

    ResponderEliminar
    Respuestas
    1. Hola, no lo he probado en otra plataforma, quizás sea conveniente que lo instales según las instrucciones de la página:
      http://jscrollpane.kelvinluck.com/#usage

      Eliminar
  31. NO FUNCIONA. No se porque, Aclaro que tengo otros jquery porque al parecer el slider y el ir arriba no funcionan de otra maneraen mi blog
    www.creacionmuebles.blogspot.com

    ResponderEliminar
    Respuestas
    1. Posiblemente no sean compatibles con esos scripts, o tal vez este script no funcione con la versión de jQuery que usas.

      Eliminar
  32. Hola Potro, una pregunta con respecto a los dominios, ¿como puedo hacer para que al entrar a mi blog redireccione a una pagina?

    Por ej, si mi blog es ejemplo.com, quiero que al entrar redireccione a ejemplo.com/entrada

    Espero que este sistema de redirección sea posible en Blogger, gracias.

    ResponderEliminar
    Respuestas
    1. Hola Hockster, mira esta entrada de Oloblogger, seguro podrá servirte:
      http://www.oloblogger.com/2013/04/portada-facil-para-blogger.html

      Eliminar
  33. Buenas tardes Potro, me ha encantado tu entrada, como soy una asidua a tus conocimientos lo he implantado pero horror para mi...no hay cambio alguno, no me funciona y no se lo que puede ser ¿me puedes ayudar? me gustaria mucho ponerlo

    un beso

    ResponderEliminar
    Respuestas
    1. Hola teofermi, he entrado a tu blog pero no lo veo puesto :/

      Eliminar
    2. Buenas potro, como vi que estabas en pausa lo quite pero acabo de ponerlo de nuevo y sigue sin verse ningun cambio, si fueras tan amble de echarle un vistazo te lo agradeceria..

      un saludo

      Eliminar
    3. Tendrías que dejarlo puesto para cuando yo pueda revisarlo, lamentablemente no puedo revisar los comentarios tan pronto como antes, así que no podría decirte cuándo lo vería para que lo pongas :(

      Eliminar
  34. Hola amigo, disculpa la pregunta, como puedo hacer para que en las entradas de mi blog (con plantilla dinamica) se visualizen las imagenes que coloco? saludos espero tu ayuda

    ResponderEliminar
    Respuestas
    1. Hola, en la portada de esas plantillas sólo se puede mostrar una imagen, la primera, el resto de ellas se ve sólo al entrar al post.

      Eliminar
  35. ¡Hola Potro! ¿Existe alguna manera de poner el "archivo del blog" en una barra de menú arriba debajo de la cabecera? Quiero limpiar los laterales de mi blog y no añadirles gadgets a los lados, pero no quiero que el archivo se quede al final de la página, ¿Me das algún consejo/idea/sugerencia?
    ¡Estoy empezando con esto de modificar la plantilla y me estás resultando de mucha ayuda!
    ¡Muchísimas gracias!

    ResponderEliminar
    Respuestas
    1. No que yo sepa Laura, al ser un gadget no veo la forma de "meterlo" dentro de otro gadget :(

      Eliminar
  36. Hola, Potro. ¿Serías tan amable de indicarme cómo puedo crear una sección como la de 'destacamos' de esta página? http://www.jotdown.es/ Quiero crear un espacio en horizontal de enlaces con imágenes sobre una franja de color gris, exactamente como la de ahí -o lo más similar posible-.

    ResponderEliminar
    Respuestas
    1. Hola, por ahora como ando corto de tiempo sólo podría decirte que copies de su código fuente el contenido que está desde:
      <div class="featured_carousel">
      hasta
      </div><!-- /.featured -->

      Luego en la hoja de estilos custom.css copia todo lo correspondiente a .featured_carousel

      Eliminar
  37. Excelente gracias funciona del IE7 hacia arriba!

    ResponderEliminar
  38. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hola, al final de la entrada dice qué hacer si ya usas jQuery.

      Pd. He eliminado el comentario por el aviso que está al final.
      Saludos.

      Eliminar
  39. No funcionó... museohistoricoim.blogspot.com.ar

    ResponderEliminar
    Respuestas
    1. Pon tu versión de jQuery al inicio del código, si lo pones hasta abajo (donde está ahora) no podrá funcionar ya que el script no es capaz de leer el archivo de jQuery.

      Eliminar
  40. Hola potro, agregue la barra pero me salia una barrita blanca la cual nunca pude eliminar lo que si pude fue ponerle un color.
    Dejo el codigo por si te sirva o le sirva a alguien.
    Agregue "background: #ccc;" a ".jspContainer" ccc es el color de la barra quedando asi:

    .jspContainer {background: #ccc; overflow: hidden;position: relative;}

    ResponderEliminar
    Respuestas
    1. Hola!! Sii, a mi me paso justo lo mismo que a el, ahora ya no sale esa barrita horizontal blanca tanto, pero la parte inferior sale cortada, por ejemplo si doy click a una entrada o un post, los comentarios salen cortados :(
      Por queee? Si me pudieras dar una solucion te estaria muuy agradecida porque en serio me encanto este escrollbar, va perfecto con mi blog <3
      Gracias mil de antemano

      Eliminar
    2. No sé decirte la razón, supongo que debe ser un fallo del script :/

      Eliminar
  41. ¡Atención señores! Encontre una nueva forma de cambiar la Barra de Desplazamiento en Blogger u otros sitios.
    Lo que tienen que hacer es los siguiente:

    Van a Plantilla - Editar HTML, y luego en la barra de HMTL agan click en cualquier lado y buscan el siguiente código: ]]>
    Luego arriba del código que les deje recién ponen esto:
    ::-webkit-scrollbar {
    height: 12px;
    width: 15px;
    background: #FA9529;
    }

    ::-webkit-scrollbar-thumb {
    background: #00BFFF;
    -Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px; -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px;
    }
    Allí cambien el color por el que quieran.

    ResponderEliminar
  42. Muchas gracias, pero con esa barra el blog no se ve entero. Cierto contenido no se ve entero, se ve mal, o hasta ni siquiera se llega a ver. D=

    ResponderEliminar
  43. Hola, me parece raro que nadie lo haya preguntado pero me he dado cuenta que falla una cosa:
    Con el scroll predefinido si no tienes maximizada la ventana del blog éste se centra automáticamente y el scroll permanece a la derecha sin embargo personalizándolo como explicas, se pierde esta propiedad.

    Incluso en la página de ejemplo que pones si haces más pequeña la ventana pasa eso, que el blog no se centra y desaparece el scroll y aparece un scroll sin personalizar en la parte inferior para moverte de izquierda a derecha, vamos una chapuza en ese sentido.

    Hay alguna forma de arreglarlo?

    ResponderEliminar
    Respuestas
    1. Podrías ocultar el scroll de abajo, pero eso no solucionaría el hecho de que no se centre, supongo que es un fallo del script.

      Eliminar
  44. Hola Potro!

    Soy algo novato y no lo entiendo muy bien. No me sale ni se me modifica nada, creo que mi fallo es que no tengo los archivos de jQuery en el servidor, no se cuales colocar. También creo que puede ser la línea de código que he de poner después de < body >. No se dónde está mi error. Si me pudieras ayudar te estaría muy agradecido.
    Aquí está la página donde puedes ver el código:
    http://mikkilozano.com/prueba.html

    ResponderEliminar
  45. Hola Potro!

    He seguido los pasos y no entiendo muy bien porque no me sale. El script del jQuery es online así que no tengo que ponerlo en mi FTP verdad? Creo que mi problema radica en apartado donde he de poner una línea de código después de BODY. Es el mismo body que uso para poner mis contenidos de la web?
    He probado y no me sale nada, aquí está la web donde lo estoy haciendo por si quieres ver mi código para ver donde fallo.
    http://mikkilozano.com/prueba.html

    Un saludo y muchas gracias!!

    ResponderEliminar
    Respuestas
    1. Hola Mikki, no he podido ver la prueba porque ha sido eliminada. El BODY es el cuerpo del blog, debajo es donde tienes que poner el código.
      Si te es mejor ve al enlace del autor, sus ejemplos están especificados para páginas web y no como en mi caso que todo es adaptado para Blogger.

      Saludos.

      Eliminar
  46. a mi me aparece un caramelo que dice "up" por que sera?
    tengo chrome.

    ResponderEliminar
  47. hola queria saber como puedo hacer los bordes redondeados ?

    ResponderEliminar
  48. Cierto ami tampoco me funciono

    ResponderEliminar
  49. Saludos Potro, siempre agradeciendo tu apoyo con nuestros blogs, en el siguiente: http://todoeventosgt.blogspot.com/ tengo el problema que habia incluido en la barra lateral un menu segun la entrada: http://ciudadblogger.com/2010/06/menu-tipo-acordeon-con-efecto.html pero al aplicar este efecto funciono pero dejo de hacerlo el menu, mi pregunta concreta es: me dejo de funcionar por la version de jquery o por el uso de Scriptaculous o Mootools. Gracias de antemano por tu respuesta!

    ResponderEliminar
    Respuestas
    1. Hola Daniel. Ese menú no usa Scriptaculous pero sí usa Mootools así que a este de jquery tendrías que aplicarle un pequeño hack:
      http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

      Saludos.

      Eliminar
    2. Gracias! eso supuse, ahora aprovechando otra molestia, si notaste en el blog también esta el fanbox de facebook, aplicando este efecto como puedo correr la alineación para que este adentro del blog a la derecha y no interfiera con la scrollbar, gracias de nuevo.

      Eliminar
    3. Siempre que se tiene ese tipo de gadgets flotantes se tiene ese problema, la otra opción es no ponerlo :/

      Eliminar
  50. Y si el gadget de facebook estuviera a la izquierda en lugar de la derecha funcionaria??

    ResponderEliminar
    Respuestas
    1. De que funcionará, funcionará. Quizá el único inconveniente será al querer bajar arrastrando el scroll y el fanbox se activará.

      Eliminar
  51. Hola Potro! hace tiempo q estoy buscando poner scroll infinito en mi blog,ya intente varios pero ningun resultado consigo...uso jquery,ojala puedas hacer algo!!Saludos y un placer que estes de vuelta!!

    ResponderEliminar
    Respuestas
    1. Hola, qué gusto leerte :)
      El único que probé hace poco es este, creo que es el que circula por todas partes, de hecho en Compartidísimo hay una entrada igual sobre ese método.
      http://blog.manki.in/2012/04/how-to-add-infinite-scrolling-to.html

      ¡Saludos!

      Eliminar
  52. Potro Jesús te ama. Por favor, dime cómo cambio en la barra las mayúsculas para que salgan minúsculas.

    ResponderEliminar
    Respuestas
    1. Amén Hulda Meza.
      ¿En cuál barra aparecen letras mayúsculas y en cuál blog?

      Eliminar
  53. Buenotutorial como siempre Potro.

    Lo que yo estoy buscando es que la scrollbar aparezca al parar el ratón por encima en caso contrario que no aparezca y no modifique el fondo del blog.

    ¿Se puede hacer con css? En el caso que sea sí, ¿cómo?

    Yo tengo esto:



    ::-webkit-scrollbar {
    background:#ffffff;
    width:7px;
    }
    ::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.0);

    -webkit-transition: width 2s(top, #81d8cf 10%,#81d8cf 51%);

    border-radius: 7px}
    ::-webkit-scrollbar-track {
    }

    Desde ya muchas gracias.

    Libertad.

    ResponderEliminar
    Respuestas
    1. quito el fondo pero me sigue saliendo una franja blanca que me corta el diseño el footer y la cabecera...

      Eliminar
    2. disculpa, el código es este:

      ::-webkit-scrollbar {
      background:#F8F8F8;
      width:7px;
      }
      ::-webkit-scrollbar-thumb {
      -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.0);

      background-image: -webkit-linear-gradient(top, #81d8cf 10%,#81d8cf 51%);

      border-radius: 7px}
      ::-webkit-scrollbar-track {
      }

      Eliminar
    3. Lo siento, desconozco cómo se haga lo que pides :(

      Eliminar
  54. Referente a este tema, crees que me puedas ayudar a quitarle el scroll que tiene pegado al lado derecho de la pantalla?

    http://x-yu-gi-oh-x.blogspot.com/

    porque se supone que no hay nada que mostrar más abajo y aun así sale y no se desplaza ni nada solo se quedó el scroll fijo

    porfavor :D

    ResponderEliminar
    Respuestas
    1. A mí no me aparece ningún scroll abajo (he entrado desde Safari).

      Eliminar
    2. Efectivamente mi Potro abajo no sale el scroll creo que te confundí, me refiero a que en las entradas me sale un Scroll al lado derecho de la pantalla y no funciona y quisiera quitarlo porque en sí no hay nada que mostrar abajo

      Eliminar
    3. No sé si será el navegador porque tanto en Safari como en Firefox (no probé más) sólo aparece un scroll y es el que muestra toda la entrada completa, no veo otro scroll además de ese.

      Eliminar
  55. ¿Y si quiero poner este tipo de scroll, que oculte la barra de abajo, cuales serian los codigos? aqui lo encontré http://jscrollpane.kelvinluck.com/image.html

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger