La idea es de La Mujer Quijote, a quién se le ocurrió que podía ser interesante unir el truco del boton para ir arriba y la creación de marcadores, para mostrar a manera de menú flotante, los enlaces Blogger de Entradas más recientes - Página principal - Entradas Antiguas.
Aunque es una cosa sencilla de hacer, para que el resultado quede más o menos mono, hay que retocar algunas líneas tanto de CSS como de la parte HTML .
Empezamos por la hoja de estilo (plantillas de artilugios expandidas para lo que vendrá después) y buscamos los contenedores de estos enlaces. Si no se ha modificado se llamarán BLOG-PAGER, BLOG-PAGER-NEWER-LINK y BLOG-PAGER-OLDER-LINK. Cogemos las tres clases, las borramos completas y en su lugar ponemos esto otro.
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: left;
}
#home-link {
float: left;
}
#blog-pager {
text-align: left;
position:fixed;
top:100px;
left:100px;
}
* html #blog-pager{ /*IE only*/
position:absolute;
}
Simplemente hemos alineado el NEWER y el OLDER flotando a la izquierda, hemos creado una nueva clase para el HOME, se ha reconfigurado el BLOG-PAGER para que quede fijo (flotando) a cierta distancia de los márgenes de pantalla y se ha añadido un pequeño hack para que en IE6 (cómo no) haga algo parecido a lo que queremos.
Dando a Vista Previa, ya podremos ver como funciona con el enlace a Entradas Antiguas que tengamos configurado actualmente, así como la posición que va a ocupar.
Esta posición puede configurarse, cambiando TOP por BOTTOM y/o LEFT por RIGHT. Asimismo con el valor en pixels de cada coordenada, que puede cambiar de valor o ser sustituido directamente por una distancia en porcentaje (10%, por ejemplo). Esto ya será al gusto de cada cual.
Para rematar la faena y recordando el post de
cómo sustituir los enlaces de entradas anteriores/siguientes por imágenes, en este caso quedarán mejor unas pequeñas imágenes que los textos estándar, así que vamos a ello.
Os recordamos que todavía no hemos grabado nada, aunque tampoco sería un problema si lo habéis hecho. Se busca el artilugio que comienza con...
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
...y se sustituye entero (desde <b:includable> hasta </b:includable>, ambos inclusive) por este otro...
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>
<img alt='Entradas posteriores' src='http://img37.imageshack.us/img37/2346/izda.jpg' title='Entradas posteriores'/> </a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'><span id='home-link'> <a class='home-link' expr:href='data:blog.homepageUrl'><img alt='Inicio' src='http://img505.imageshack.us/img505/2268/inicio.gif' title='Inicio'/></a> </span> <b:else/> <b:if cond='data:newerPageUrl'> <span id='home-link'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img alt='Inicio' src='http://img505.imageshack.us/img505/2268/inicio.gif' title='Inicio'/></a></a> </span> </b:if> </b:if><b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>
<img alt='Entradas anteriores' src='http://img41.imageshack.us/img41/3490/dcha.jpg' title='Entradas anteriores'/></a>
</span>
</b:if>
</div>
<div class='clear'/>
</b:includable>
Se ha puesto el código entero para que sólo tengais que borrar, copiar y pegar, pero sólo se han reordenado los distintos enlaces para que se muestren en el orden izquierdo-inicio-derecho, se ha incluido la clase HOME-LINK para el enlace del inicio y se han sustituido los mensajes de cada enlace por imágenes. Esas imágenes las podeis cambiar por otras que hagan juego con vuestro diseño.
12 comentarios:
Buen hack!! pero no sé si podré utilizarlo por que ahora mismo estoy usando la paginación por páginas, o sea 'Anterior' 2 - 3 - 4 - 5 - 6 'Siguiente'. No se muy bien a ciencia cierta pero creo que las dos cosas a la vez son incompatibles :X
Si lo pruebas, me cuentas como resultó Espinelli
Hola Oloman.
Interesantísima entrada. Que me hizo recordar que hace poco cambié el diseño de uno de mis blogs, y no aparece al final del blog lo de "Entradas más recientes / Página principal / Entradas antiguas".
¿Me podrías explicar como hacer para colocar eso al final del blog? Si ya lo has explicado en alguna entrada, simplemente, dime en cual, que no fui capaz de encontrarla ;-)
Muchísimas gracias
@Ollodepez, la solución es fácil, pero la explicación genérica de por qué es así, es algo más larga. Como por otra parte, eso mismo ya le ha pasado a otros, en unos días monto un post. Dame un tiempo.
Esta muy bien esto , pero yo lo puse y me queda pegado a la izquierda , y no me queda el de la flecha de <- en la izquierda y el de home en el centro y el de -> hasta la derecha :/
Este es mi blog http://shinobi-retsuden.blogspot.com
Sólo veo el icono de inicio Kenji ¿has cambiado algo después de escribir tu comentario?
Hola,
me pongo en contacto contigo porque hace poco cambié la plantilla de mi blog. Tengo creadas etiquetas con más de 20 entradas cada una con lo cual si clico sobre una de estas etiquetas, me abre las 20 últimas. esto no me importaría si abajo del todo de esta página que se me abre hubiera un enlace a entradas más antiguas, pero se ve que esta plantilla que he instalado no lo tiene. Te pongo un enlace para que lo vea:
http://soulyotrosalimentosdelalma.blogspot.com/search/label/Soul
Corresponde a la etiqueta de "soul" que, como verás, tiene ya 55 entradas, pero sólo visualiza 20 sin posibilidad de ir hacia atrás. Me gustaría saber si hay alguna forma de instalar un botoncito al final con un enlace hacia entradas más antiguas. He intentado los consejos que propones pero no logro dar con ello. te agradecería mucho tu ayuda.
Muchísimas gracias de antemano,
Un saludo y enhorabuena por tu blog de ayuda.
Hola Rodrigo. Echale un vistazo a este post, porque allí se explica con detalle ese artilugio y la manera de poner los enlaces a Entradas anteriores/recientes en cualquier parte.
Cómo alternativa, tienes este otro truco.
Me gustaria saber como poner ese tipo de "entradas anteriores, entradas recientes" en el final de mis primeros 5 posts
pero SIN UTILIZAR ARTILUGIOS, estoy diseñando tablas distintas que no son de bloggers T_T
se puede aclarar mi duda? T_T
Oloman, gracias por tu respuesta. Ya he probado esas dos cosillas que dices. Por ejemplo, probé lo del artilugio de la foto con la casita (home) y efectivamente me salió pero sólo en la página principal que justo es donde no lo necesito porque ya sale. Pero en cuanto me fuí a una de las etiquetas con más de 20 entradas, sigue igual, sin instalarse el widget, por lo que no puedo ir para atrás. El otro truco que me dices también lo probé pero no me sale. Si quieres, puedo mandarte donde tú me digas una copia de mi plantilla. me vendría muy bien un poquito de ayuda en esto porque la gente que entra en estas etiquetas con más de 20 entradas no tiene opción de ver más de 20 yendo para atrás. Espero tu respuestas cuando puedas.
Muchísimas gracias,
Un salud
EriDaiho no entiendo muy bien que es lo que quieres decir con lo de no usar artilugios. Si tu plataforma es Blogger, habrá que usarlos por narices, porque son los que llaman a la base de datos que no podemos manejar los administradores. Si el blog no es de Blogger, no sabría como hacerlo.
Donny, lo único que se me ocurre es que tengas un condicional que haga que no funcione el NEXTPREV en ese tipo de páginas, porque en las normales sí funciona. Mándame una copia .xml a la dirección de un poco más abajo.
Por cierto, no te lo dije antes pero me mola tu plantilla grunge.
Gracias Oloman. te mandé la plantilla al correo que me indicas. Me alegro de que te guste la plantilla. Muchas gracias. La verdad es que esta chula pero ya ni me acuerdo de qué página la cogí, jeje.
Un saludo
PUBLICAR UN COMENTARIO