El nuevo dise?o en la Edici?n HTML de Blogger

Blogger nos ha sorprendido desde ayer con un nuevo cambio, una Edici?n de HTML m?s moderna y profesional. Esta nueva interfaz en la Edici?n de HTML incluye una Vista Previa sin abrir una nueva pesta?a; numeraci?n y colores en los c?digos para que nos permita identificar cada una de las partes de la plantilla; men? de gadgets para acceder a ellos r?pidamente; expandimiento de artilugios de forma individual; organizar apropiadamente los c?digos a?adidos; y su propio buscador.

S?, todo esto han modificado en el nuevo dise?o que nos ha sorprendido a todos. ?Y para qu� sirve cada cosa?

Los colores de los c?digos es algo que ha confundido a muchos pues algunos crees que tienen una funci?n espec?fica pero no es as?, es s?lo para ayudarnos a diferenciar cada sector de la plantilla y no ver s?lo un mundo de letras negras como lo hab?amos visto siempre hasta ayer. De hecho, la mayor?a de los editores profesionales suelen ser as?.

?D?nde se expande los artilugios en la nueva Edici?n de HTML?

Cada ?rea est? m?s organizada de forma individual, para expandir los artilugios de alg?n ?rea que necesites s?lo dale click a la flecha correspondiente y se expandir? esa ?rea, por ejemplo, los estilos CSS ahora los ver?s agrupados entre <b:skin>...</b:skin>

El men? Ir al widget nos permite desplazarnos directamente hasta el gadget que hemos seleccionado ahorr?ndonos un poco de tiempo.

Este nuevo dise?o incluye su propio buscador que aparece con CTRL+F, y este quiz?s es el cambio que a muchos no les ha gustado pues algunos dicen que a veces puede ser tardado y lento para encontrar los c?digos a buscar.

El bot?n Editar Plantilla nos permite regresar al editor cuando hemos estado en la Vista Previa misma que ahora se muestra dentro del mismo editor. Yo en lo personal prefiero que se abra en una pesta?a aparte para tener mayor espacio de visibilidad de la plantilla y los cambios que se est?n aplicando.

El bot?n Plantilla de formato nos organiza el c?digo que hemos a?adido o modificado, de manera que el cambio que hayamos hecho quede de una forma limpia y organizada.

Sin duda en su mayor?a son cambios bastante buenos con la esperanza de que nos ayuden a trabajar mejor a la hora de modificar la plantilla del blog. ?A ustedes qu� les ha parecido?

Personalizar la barra de desplazamiento (scrollbar) con jScrollPane

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?

Valoraci?n de estrellas en el blog por parte del autor

La mayor?a de los sistemas de valoraci?n que conocemos son para que los usuarios califiquen una entrada, pero qu� pasa si no queremos la calificaci?n de los usuarios sino la propia. Por ejemplo, algunos blogs hacen rese?as de pel?culas, de libros, aplicaciones, etc. y quieren calificar el "producto" del que hablan, pues es ah? cuando podemos usar un sistema de valoraci?n de estrellas como el siguiente, para que el autor le ponga una calificaci?n a su entrada, rese?a, pel?cula, o lo que quiera calificar.

El resultado ser? algo como esto:

Calificaci?n:

Este sistema de valoraci?n lo haremos s?lo con CSS apoy?ndonos de sprites, y tiene la caracter?stica de mostrar calificaciones fraccionadas, es decir, que podemos darle una o cinco estrellas, o una estrella y media, dos estrellas y media, etc.

Lo primero que haremos es entrar en Plantilla | Edici?n de HTML y pegar antes de ]]></b:skin> el CSS:

/* Estrellas de valoraci?n
----------------------------------------------- */
.val-fieldset {
width:100px;
border:none;
font-weight:bold;
font-size:12px;
}
.valoracion {
width: 100px;
height: 21px;
display: block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQLau62fdYE1fEDL_Oz7jc8HR4_B98_O_VwGEr9nyCIVRLzlX14d4YdchUZTHdshPV6MpNitA_WxGQ345glLF_rRWMmfifuDEf23cgVB5eGiJezsybM86EeJUadOHZk3rf2T9Peh3y13s/s0/estrellas.png) 0 0 no-repeat;
}
.val-0 {background-position: -100px -0;}
.val-5 {background-position: -81px -21px;}
.val-10 {background-position: -81px 0;}
.val-15 {background-position: -61px -21px;}
.val-20 {background-position: -60px 0;}
.val-25 {background-position: -40px -21px;}
.val-30 {background-position: -40px 0;}
.val-35 {background-position: -21px -21px;}
.val-40 {background-position: -21px 0;}
.val-45 {background-position: 0 -21px;}
.val-50 {background-position: 0 0;}

Y luego en tu entrada donde quieras mostrar la calificaci?n agrega lo siguiente:

<fieldset class="val-fieldset"><legend>Calificaci?n:</legend><span class="valoracion val-40"></span></fieldset>

Lo que est? en rojo es la calificaci?n que le dar?s, en este caso son 4 estrellas. Los valores son en m?ltiples de 5 donde 0 es ninguna estrella, 5 media estrella, 10 una estrella, 15 una estrella y media, 20 dos estrellas, etc. hasta el 50, que son cinco estrellas.

Calificaci?n:

<fieldset class="val-fieldset"><legend>Calificaci?n:</legend><span class="valoracion val-0"></span></fieldset>

Calificaci?n:

<fieldset class="val-fieldset"><legend>Calificaci?n:</legend><span class="valoracion val-5"></span></fieldset>

Calificaci?n:

<fieldset class="val-fieldset"><legend>Calificaci?n:</legend><span class="valoracion val-10"></span></fieldset>

Calificaci?n:

<fieldset class="val-fieldset"><legend>Calificaci?n:</legend><span class="valoracion val-15"></span></fieldset>

Calificaci?n:

<fieldset class="val-fieldset"><legend>Calificaci?n:</legend><span class="valoracion val-20"></span></fieldset>

Calificaci?n:

<fieldset class="val-fieldset"><legend>Calificaci?n:</legend><span class="valoracion val-25"></span></fieldset>

Calificaci?n:

<fieldset class="val-fieldset"><legend>Calificaci?n:</legend><span class="valoracion val-30"></span></fieldset>

Calificaci?n:

<fieldset class="val-fieldset"><legend>Calificaci?n:</legend><span class="valoracion val-35"></span></fieldset>

Calificaci?n:

<fieldset class="val-fieldset"><legend>Calificaci?n:</legend><span class="valoracion val-40"></span></fieldset>

Calificaci?n:

<fieldset class="val-fieldset"><legend>Calificaci?n:</legend><span class="valoracion val-45"></span></fieldset>

Calificaci?n:

<fieldset class="val-fieldset"><legend>Calificaci?n:</legend><span class="valoracion val-50"></span></fieldset>

Es un m�todo bastante sencillo que le permitir? al autor calificar cualquier cosa. Hemos usado la etiqueta FIELDSET para acomodar el texto "Calificaci?n" y las estrellas, por lo que puedes personalizar esas etiquetas si lo deseas.

Si lo que buscas es un sistema de valoraci?n de estrellas donde sea el p?blico quien califique, entonces tal vez quieras usar las propias estrellas de valoraci?n que provee Blogger.

Men? horizontal con subpesta?as y buscador integrado 2

Hace alg?n tiempo vimos el men? horizontal con subpesta?as y buscador integrado y desde eso me han preguntado c?mo hacer ese mismo men? pero de varios niveles, es decir, que las subpesta?as del men? tambi�n tengan subpesta?as. El men? a continuaci?n tiene esa caracter?stica, adem?s de conservar el buscador dentro del men?.

Los estilos redondeados en los submen?s se han quitado por cuestiones est�ticas, pero ya saben que cualquiera de estas moner?as pueden personalizarse a consideraci?n y gusto propio.

El men? puedes verlo en este blog de pruebas.

ATENCI?N: Si usas una plantilla hecha a trav�s del Dise?ador de plantillas de Blogger primero necesitas seguir los pasos de esta entrada.

Para poner este men? horizontal con submen?s en tu blog entra en la Edici?n HTML de tu plantilla, y antes de ]]></b:skin> pega los estilos:

/* Menu horizontal con buscador
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del men? */
height:35px;
padding-left:14px;
background:#333; /* Color de fondo */
border-radius:20px; /* Bordes redondeados de la barra principal */
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ccc;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tama?o de la fuente */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul,
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu li:hover ul.sub {
left:0;
top:35px;
background:#333; /* Color de fondo del submen? */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#ccc;
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* Color de fondo del submen? */
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPMm7zw3hlo7y1sEwwLMtLoEL2he_0GreEeUCP7VneK8uDymrHleg_dE8_CHvuZC7YwYiLP4no2dKXiTKNiiObED27xe0pY1rGUGHzgNjwDSyRqWnpTYUuGlh5BluHw8wHsie6D0yPwifN/) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#2580a2; /* Color de fondo al pasar el cursor */
color:#fff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Color de fondo al pasar el cursor */
background:#2580a2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPMm7zw3hlo7y1sEwwLMtLoEL2he_0GreEeUCP7VneK8uDymrHleg_dE8_CHvuZC7YwYiLP4no2dKXiTKNiiObED27xe0pY1rGUGHzgNjwDSyRqWnpTYUuGlh5BluHw8wHsie6D0yPwifN/) 185px 10px no-repeat; color:#fff;}

.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #333; /* Color de fondo del submen? */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search {
width: 228px; /* Ancho del buscador */
height: 22px;
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/* Imagen de fondo del buscador */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHziyOXb2qNmFiwj1z3CaPq15Zy4OcXEXDFQS9FKC3s9XWoY8Kl-0wOY7vLBwu0kghBcWhIcPteokfdCOxoHeJzJpO1SaNW4EUpFnTOqZS3lqUhYPp2sdIeWQ3tE-T6q5giNA4yP3DByY/s1600/search-bar.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

Luego entra en Dise?o y en un gadget HTML/Javascript pega lo siguiente:

<div id='menuWrapper'>
<ul class='menu'>
<li class='top'><a class='top_link' href='URL del enlace'><span>Pesta?a 1</span></a></li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pesta?a 2</span></a><ul class='sub'><li><a class='fly' href='#'>Pesta?a 2.1</a><ul>
<li><a href='URL del enlace'>Pesta?a 2.1.1</a></li>
<li><a href='URL del enlace'>Pesta?a 2.1.2</a></li>
<li><a href='URL del enlace'>Pesta?a 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='#'>Pesta?a 2.2</a>
<ul>
<li><a href='URL del enlace'>Pesta?a 2.2.1</a></li>
<li><a href='URL del enlace'>Pesta?a 2.2.2</a></li>
<li><a href='URL del enlace'>Pesta?a 2.2.3</a></li>
<li><a class='fly' href='#'>Pesta?a 2.2.4</a>
<ul>
<li><a href='URL del enlace'>Pesta?a 2.2.4.1</a></li>
<li><a href='URL del enlace'>Pesta?a 2.2.4.2</a></li>
<li><a href='URL del enlace'>Pesta?a 2.2.4.3</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pesta?a 2.2.5</a></li>
<li><a class='fly' href='#'>Pesta?a 2.2.6</a>
<ul>
<li><a href='URL del enlace'>Pesta?a 2.2.6.1</a></li>
<li><a href='URL del enlace'>Pesta?a 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='URL del enlace'>Pesta?a 2.3</a></li>
<li><a href='URL del enlace'>Pesta?a 2.4</a></li>
<li><a href='URL del enlace'>Pesta?a 2.5</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pesta?a 3</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pesta?a 3.1</a></li>
<li><a href='URL del enlace'>Pesta?a 3.2</a></li>
<li><a href='URL del enlace'>Pesta?a 3.3</a></li>
<li><a href='URL del enlace'>Pesta?a 3.4</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pesta?a 4</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pesta?a 4.1</a></li>
<li><a class='fly' href='#'>Pesta?a 4.2</a>
<ul>
<li><a href='URL del enlace'>Pesta?a 4.2.1</a></li>
<li><a href='URL del enlace'>Pesta?a 4.2.2</a></li>
<li><a href='URL del enlace'>Pesta?a 4.2.3</a></li>
<li><a href='URL del enlace'>Pesta?a 4.2.4</a></li>
<li><a href='URL del enlace'>Pesta?a 4.2.5</a></li>
<li><a href='URL del enlace'>Pesta?a 4.2.6</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pesta?a 4.3</a></li>
<li><a href='URL del enlace'>Pesta?a 4.4</a></li>
<li><a href='URL del enlace'>Pesta?a 4.5</a></li>
<li><a href='URL del enlace'>Pesta?a 4.6</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pesta?a 5</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pesta?a 5.1</a></li>
<li><a href='URL del enlace'>Pesta?a 5.2</a></li>
<li><a href='URL del enlace'>Pesta?a 5.3</a></li>
</ul>
</li>


<!-- Buscador -->
<li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>
</li>

</ul>
</div>

Guarda los cambios y listo. En color verde puedes ver las ?reas para cambiar los colores.

Antes de <!-- Buscador --> puedes agregar m?s pesta?as si lo deseas.
Si quisieras a?adir otra pesta?a simple, agrega una l?nea como esta:

<li class="top"><a href="URL del enlace" class="top_link"><span>Pesta?a</span></a></li>

Si quisieras agregar una pesta?a con subpesta?as entonces agrega este c?digo:

<li class="top"><a href="#" class="top_link"><span class="down">Pesta?a</span></a>
<ul class="sub">
<li><a href="URL del enlace">Sub pesta?a</a></li>
<li><a href="URL del enlace">Sub pesta?a</a></li>
<li><a href="URL del enlace">Sub pesta?a</a></li>
</ul>
</li>

Y si quisieras que una de las subpesta?as tuviera otras subpesta?as entonces elimina una l?nea como la que est? en color naranja y c?mbiala por un c?digo como este:

<li><a href="#" class="fly">Sub pesta?a</a>
<ul>
<li><a href="URL del enlace">Otra Sub pesta?a</a></li>
<li><a href="URL del enlace">Otra Sub pesta?a</a></li>
<li><a href="URL del enlace">Otra Sub pesta?a</a></li>
</ul>
</li>

Con esta variaci?n del men? podemos agrupar m?s enlaces y categor?as en poco espacio, y que adem?s, al conservar el buscador dentro del men? hace que sea un men? pr?ctico, compacto y ?til.

Bloggerest: Plantilla para Blogger

descargas

Nombre:	Bloggerest
Dise?ador:	El Potro
Compatibilidad:	Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer
Caracter?sticas:	Plantilla para Blogger, 2 columnas, 980px de ancho, Entradas estilo Pinterest, Cabecera flotante, Colores minimalistas, Comentarios del autor destacados, Botones para compartir.
Incluye:	Plantilla XML, Instrucciones de instalaci?n, Licencia

Hace ya mucho tiempo que no creaba una plantilla gratuita para Blogger, as? que esta vez quise darme un tiempo para poder dise?ar una plantilla que pudieran descargar y usar libremente.

Bloggerest es una plantilla gratuita inspirada en Pinterest, aunque no es una r�plica (ni pretende serla), ideal para blogs de fotografia, o blogs donde las im?genes juegan un rol importante.

El dise?o de la plantilla es un tanto minimalista, predominan los colores rojo y blanco con un toque de gris. El t?tulo del blog as? como los t?tulos de los gadgets usan una fuente tipo caligraf?a para darle un aire elegante.
La cabecera ocupa el 100% del ancho de la p?gina al mismo tiempo de ser flotante. Las im?genes en la portada tienen opacidad al pasar el cursor y �stas conducen a la entrada al dar click sobre ellas, tambi�n muestra la miniatura del video cuando est?n alojados en YouTube y cuando no hay una imagen que lo antecede.
Este es un ejemplo de una entrada donde se puede apreciar c?mo se visualizan los bloques entrecomillados, las listas numeradas, las listas con vi?etas, los botones para compartir, los gadgets de la sidebar y los comentarios donde se destacan los realizados por el autor.

Personalizaci?n:

La cabecera tiene un alto de 124px por lo que se recomienda usar un logotipo que no exceda esa medida.

El men? de la plantilla es el men? horizontal con subpesta?as y buscador integrado, por lo que en esa entrada podr?s ver un poco m?s sobre su personalizaci?n. En la plantilla puedes identificar el men? por la etiqueta <div id='menuWrapper'>

La forma de redactar las entradas es igual que como lo har?as siempre, sin embargo, en caso de que tu entrada s?lo contenga una imagen, o un video, sin nada de texto, tendr?s que dar uno o m?s saltos de l?nea (ENTER) al final del c?digo de tu imagen o de tu video, ya que si no lo haces la imagen no se formar? en miniatura y se distorcionar?.

---

Es compatible con todos los navegadores m?s conocidos (arriba se especifica cu?les) seg?n la ?ltima versi?n actual de cada uno de ellos.

El sistema magazine que utiliza permite mostrar muchas entradas en la portada ya que en la portada las entradas no cargan de forma completa, permitiendo agilizar la carga del blog. Las pocas im?genes que usa la plantilla est?n alojadas directamente en base 64 por lo que no depender?s de ning?n servicio externo para cargarlas.

Espero que sea de su entero agrado, que la disfruten, y que no retiren los cr�ditos :P

ACTUALIZACI?N 4/abr/2013
Si en la pesta?a Dise?o no ves la sidebar, entra en Plantilla | Edici?n de HTML y elimina estas partes en color rojo:

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<b:if cond='data:blog.pageType != &quot;archive&quot;'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' mobile='yes' title='Categorías' type='Label'/>
<b:widget id='PopularPosts1' locked='false' mobile='yes' title='Entradas populares' type='PopularPosts'/>
<b:widget id='BlogArchive1' locked='false' mobile='yes' title='Archivo del blog' type='BlogArchive'/>
</b:section>
</div>
</b:if>
</b:if>
</b:if>

Eso har? que la sidebar aparezca en la secci?n Dise?o. Si notaras que con ese cambio tarda un poco m?s en cargar la portada del blog, o si aparecen menos entradas, pon de nuevo ese c?digo despu�s de haber hecho todas las modificaciones deseadas en la sidebar.


ACTUALIZACI?N 12/abr/2013
Se ha modificado la plantilla para resolver el problema de las entradas que ten?an a?adido el salto de l?nea (Leer m?s) manualmente. Tambi�n se ha agregado un enlace a la imagen predeterminada para las entradas que no tienen una imagen.

Twitcker, para mostrar los ?ltimos tuits en forma de marquesina

Twitcker es un servicio gratuito que nos permite mostrar en el blog los ?ltimos tuits en forma de marquesina, como si de un anuncio de noticias se tratara. Lo que hace es mostrar en una barra todos los ?ltimos tuits que hemos publicado, pudiendo configurar la velocidad con la que pasan, la forma como se muestran, los colores, enlaces, etc.
Puedes verlo funcionando aqu? mismo, arriba de esta p?gina.

Para conseguir este gadget de ?ltimos tuits entra a Twitcker y da click en el bot?n Sign in with Twitter.

Autoriza a la aplicaci?n para que se cree un script ?nico para ti.

Una vez que lo hagas ver?s el nombre de tu usuario, y debajo un link para configurar las opciones de la barra de tuits.

Ah? ver?s una serie de opciones para tu barra de tuits, como por ejemplo controlar la velocidad con la que pasan los tuits, el color de la barra, si se muestran como marquesina o m?quina de escribir, etc.

Una vez que termines de personalizarla da click en Create y tendr?s el c?digo, c?pialo y luego entra en Dise?o | A?adir un gadget | HTML/Javascript y ah? pega el c?digo que has copiado.

La posici?n puedes elegirla para que se muestre arriba de la p?gina, al final, o en un lugar concreto; si deseas esta ?ltima opci?n (por ejemplo para ponerlo en la sidebar) elige Own container dentro de Twitcker position. Ah? escribe TwitterTicker. Despu�s en un gadget HTML/Javascript agrega esto:

<div id="TwitterTicker">
...Aqu? el script...
</div>

Ah? deber?s colocar donde se indica el script que te da Twitcker. De esta forma podr?s mostrar tu barra de tuits en cualquier parte del blog.

Como puedes ver es un gadget bastante simp?tico que puede ayudarnos a conseguir m?s seguidores ya que nuestros lectores podr?n leer en el blog un poco de lo que tuiteamos. Adem?s que, el gadget est? lindo ?no creen?

Enlaces de navegaci?n que aparecen al bajar la p?gina y muestran el nombre de las entradas

Los enlaces de navegaci?n son esos que aparecen al final de la p?gina que dicen "Entradas antiguas", "Entradas recientes" y "P?gina principal" y nos sirven para desplazarnos por las entradas del blog. Lo que haremos con esta entrada son dos cosas:

1. Cambiar los textos "Entradas antiguas" y "Entradas recientes" por los t?tulos de las entradas.
2. Hacer que �stos datos aparezcan en un recuadro "desvaneciente" cuando se baje el scroll de la p?gina.

Puedes verlo en funcionamiento en este blog de pruebas, al bajar el scroll aparecer?n los enlaces de navegaci?n mostrando los t?tulos de las entradas que anteceden y preceden al post.

Esta forma de mostrar los enlaces de navegaci?n s?lo se ver? en las entradas individuales, ya que en la portada y dem?s partes del blog se seguir?n mostrando como siempre.

La instalaci?n es muy sencilla en realidad. Primero entra en Plantilla | Edici?n de HTML, marca la casilla Expandir plantillas de artilugios y busca esta l?nea:

<b:include name='nextprev'/>

Y c?mbiala por esto:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='blog-pager-note'>
<h4>Tambi�n hemos publicado:</h4>
<b:include name='nextprev'/>
</div>
</b:if>

Ahora pega antes de </head> lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script>
// <![CDATA[
$(function() {
$('#blog-pager-note').toggle()
.css({
width: '520px',
height: '150px',
position: 'fixed',
padding: '1em',
bottom: 0,
right: 0,
background: 'url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig0yTNGnT9ld4ahuz9IDBUYFOywTlWOJBEu7annJf9BAxb6GuCLhwlcnsw8Rs2B65ydbTs9_NGF_5sBwhEsMody7G50y4lEmGtka1WJmOQFAEEQEC8kF08Ii9qawGpl-ulcC4MMqYTI2o/s10/negro85.png)'
});

$(window).scroll(function() {
if($(this).scrollTop() > 150) {
$('#blog-pager-note').fadeIn();
} else {
$('#blog-pager-note').fadeOut();
}
});
});
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$(".blog-pager-newer-link").html("<div>Entrada anterior:</div>" + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$(".blog-pager-older-link").html("<div>Entrada siguiente:</div>" + olderLinkTitle);
});
});
// ]]>
</script>

<style type='text/css'>
<!--
#blog-pager-newer-link {float:left;clear:both;line-height:30px;}
#blog-pager-older-link {float:left;clear:both;line-height:30px;}
.home-link {display:none;}
.blog-pager-older-link, .blog-pager-newer-link {
background-color: transparent !important;
background-image: none !important;
border:0 !important;
color:#0577AB !important; /* Color de los t?tulos de las entradas */
float: left;
width: 500px;
clear:both;
}
a.blog-pager-older-link:hover, a.blog-pager-newer-link:hover {
text-decoration:none !important;
}
a.blog-pager-newer-link:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMFmQ7TEq44h8fInVRct8LbI1hkqzx7hB_3K8O9GsEl_zUxhsrkmcu-P7O4tEYGIZSo5QocWkCdjUSA9rIPcZ4hKROv7OLLsEw885CT0VhQBNLUac1KIUHAtHhQHVn7WelpkXOHKj27a8/s32/flecha2.png);
float:left;
}
a.blog-pager-older-link:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdIr_bSEUL62YsHbF-XwD7Euu65pHXXd22RYgvfs1GiSp-5YJS6UsI124jZZRT2j0Z4BiDNNfVBnJjEptEyTqt4y8NvAJK_Ex5cYQOOJ0oMFPPFLAfKNpX_22Sbl2ryH1Ny3z0mAuo9lE/s32/flecha1.png);
float:left;
}
#blog-pager {
width:500px;
background-color: transparent !important;
background-image: none !important;
border:0 !important;
text-align:left;
}
#blog-pager div {
color:#fff; /* Color de los textos "Entrada anterior" y "Entrada siguiente" */
font-weight:bold;
margin-bottom: -5px;
}
a#blog-pager div:hover {
text-decoration:none !important;
color:#fff; /* Color de los textos "Entrada anterior" y "Entrada siguiente" */
}
#blog-pager-note {
z-index:9;
}
#blog-pager-note h4 {
margin:0;
padding:0;
color:#4898B9; /* Color del t?tulo del recuadro */
font-size:16px; /* Tama?o del t?tulo del recuadro */
}
-->
</style>
</b:if>

Hay tres URLs en color azul, la primera es la imagen de fondo semitransparente del recuadro, las otras dos corresponden a los ?conos de las flechas.

En color verde puedes ver d?nde cambiar los colores de los textos.
El n?mero en color rojo es la distancia en pixeles que activa el gadget, es decir, que como est? ahora, el recuadro aparecer? cuando se haya bajado el scroll 150px. Puedes usar un valor m?s alto en caso de que tus entradas suelan ser largas y por lo tanto la "altura" del scroll sea mayor.

Cabe mencionar que este gadget usa jQuery, as? que procura tener s?lo una versi?n, y si usas Scriptaculous deber?s aplicar un hack, de lo contrario podr?a no funcionar.

Tambi�n puedes cambiar las palabras "Entrada anterior" y "Entrada siguiente" por alguna otra frase.