Ya hemos visto cómo poner una flechita flotante para volver arriba, un botón de Twiter flotante, una imagen flotante en el blog, la navbar de blogger flotante y en el pie del blog e incluso un aviso o anuncio flotante que permanece fijo al navegar por el blog.
Ahora es el turno de los enlaces o links de navegación, situados al final del bloque en el que aparecen los posts y que dicen 'Entradas antiguas - Entradas más recientes'. Facilitan la navegación dentro del blog por lo que son de mucha utilidad para el lector.
Dado que estos enlaces no suelen destacar o llamar la atención, vamos a reemplazarlos por iconos y hacer que 'floten' en una esquina.
Aquí les dejo una imagen del resultado:
Diseño>Edición de HTML>expandimos artilugios
Localizamos esta parte de código en la plantilla:
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
Ahora, justo después de <b:includable id='nextprev'> añadimos este código:
<div id='blPagerjte'><b:if cond='data:newerPageUrl'><a expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img src='IMAGEN IZQUIERDA'/></a></b:if><b:if cond='data:olderPageUrl'><a expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img src='IMAGEN DERECHA'/></a></b:if><b:if cond='data:blog.homepageUrl != data:blog.url'><a expr:href='data:blog.homepageUrl'><img src='IMAGEN PORTADA'/></a><b:else/><b:if cond='data:newerPageUrl'><a class='home-link' expr:href='data:blog.homepageUrl'><img src='http://cdn1.iconfinder.com/data/icons/humano2/24x24/actions/gtk-media-record.png'/></a></b:if></b:if></div>
Reemplaza en el código IMAGEN IZQUIERDA por la URL o dirección de la flechita que apunta hacia la izquierda; IMAGEN DERECHA por la URL o dirección de la flechita que apunta hacia la derecha y IMAGEN PORTADA por la URL o dirección del icono 'inicio / portada'.
Cómo obtener la dirección de una imagen ha sido explicado en esta entrada.
A continuación, unos botones que pueden utilizar:
Una vez hecho esto, buscamos la etiqueta </head> e insertamos esta línea justo antes:
Para mostrar los botones a la izquierda:
<link href='https://sites.google.com/site/editoriosus/fds/bljjTePaginacc.css' rel='stylesheet' type='text/css'/>
Para mostrarlos a la derecha:
<link href='https://sites.google.com/site/scriptsbalcon/b/bljjTePaginacc2.css' rel='stylesheet' type='text/css'/>Guardamos la plantilla para terminar.
¿Problemas al comentar? Utiliza 
Gracias! Funciona y queda muy bien!
Pero cómo puedo ponerlo a la derecha del blog en lugar de la izquierda?
Justo me coincide con el texto y a la derecha tengo más espacio :)
Anda, qué bien!!!!! Me gusta... a ver si lo hago.
Un besote
Cristina, revisa la entrada pues he ampliado el último paso de forma que puedas situar la paginación a la derecha.
Podría quedar muy bien en tu blog, Laube. Además, es un complemento adicional pues los 'verdaderos' enlaces de navegación seguirán intactos al final del blog.
Gracias Jaime!
Eres un solazo!
Gracias también por todos los trucos y lo bien que lo explicas.:D
Jaime, como tengo las entradas con la miniatura, no me permite ver la vista previa de los cambios en la plantilla antes de guardarla.
Los iconos no se ven en la portada, sino sólo en cada una de las entradas????. Esto mismo me ha pasado con algun otro truco que quería implementar, pero no lo veía en la vista previa y me daba miedo guardar para que luego no estuviera...
¡Un placer Cristina!
Laube, antes de hacer cambios en la plantilla debes realizar una copia de seguridad. Con esto evitarás perder el aspecto de tu plantilla actual y podrás re-instalarla cuando lo desees.
Si has seguido los pasos tal y como se citan en la entrada, el truco debería funcionar. Guarda la plantilla sin hacer vista previa (una vez tengas la copia de seguridad) y comprueba el resultado. Los botones se mostrarán tanto en la portada como en las páginas de entrada.
Lo había pensado hacer alguna vez, pero nunca me había puesto con ello. Muy buena idea. :)
¡Muchas gracias compañero! Otro complemento más para la larga lista de elementos flotantes que incluímos en blogger :P.
Buenos dias Jaime.
Estupendo me funciona perfectamente.
¿como podre levantarlo un poco , esta casi encima de la barra de Wibiya .
Y ya de paso , si pudiera desplazarlo hacia el centro .
¿Puede ser ?.
Agradecido de antemano.
Claro que es posible, VRedondoF, pero necesito la dirección del blog en el que lo has instalado para ofrecerte el nuevo css a incluir.
Jaime Trujillo Escobedo,
esta es
http://bmws5gt.blogspot.com/
como veras la casita de inicio sale aun lado y no en el centro.
VRedondoF, para elevar los botones debes incluir esta línea de css bajo lo que añadiste en el último paso.
<style>#blPagerjte {bottom: 40px;right: 100px;}</style>
Con respecto al icono que conduce a la portada... Trata de trasladar su código hasta situarlo entre las flechitas (es probable que no funcione pues el CSS contiene atributos que le otorgan dicha posición).
Viejo eres un genio Me funciona de maravilla a proposito no tendras un menu horizontal con pestañas verticales necesito eso avisame si me puedes ayudar... GRACIAS!!