Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Links Entradas antiguas, Entradas mas recientes flotantes y personalizados

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.

Anónimo dice...

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 :)

Laube Leal dice...

Anda, qué bien!!!!! Me gusta... a ver si lo hago.
Un besote

Jaime Trujillo Escobedo dice...

Cristina, revisa la entrada pues he ampliado el último paso de forma que puedas situar la paginación a la derecha.

Jaime Trujillo Escobedo dice...

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.

Anónimo dice...

Gracias Jaime!
Eres un solazo!
Gracias también por todos los trucos y lo bien que lo explicas.:D

Laube Leal dice...

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...

Jaime Trujillo Escobedo dice...

¡Un placer Cristina!

Jaime Trujillo Escobedo dice...

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.

Oloman dice...

Lo había pensado hacer alguna vez, pero nunca me había puesto con ello. Muy buena idea. :)

Jaime Trujillo Escobedo dice...

¡Muchas gracias compañero! Otro complemento más para la larga lista de elementos flotantes que incluímos en blogger :P.

cc.co2.vrf dice...

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.

Jaime Trujillo Escobedo dice...

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.

cc.co2.vrf dice...

Jaime Trujillo Escobedo,
esta es
http://bmws5gt.blogspot.com/

como veras la casita de inicio sale aun lado y no en el centro.

Jaime Trujillo Escobedo dice...

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).

Starz dice...

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!!

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo