Entradas antiguas/recientes. Menú flotante. | Oloblogger 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 ma...

6 de junio de 2009

Entradas antiguas/recientes. Menú flotante.

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.

Enlaces de navegación entradas antiguas/recientes en BloggerAunque 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.

Menú flotante con enlaces de navegación
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'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</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 + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>


...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 + &quot;_blog-pager-newer-link&quot;' 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> </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 + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img alt='Entradas anteriores' src='http://img41.imageshack.us/img41/3490/dcha.jpg' title='Entradas anteriores'/></a>
</span>
</b:if>

<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</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.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

24 comentarios :

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

    ResponderEliminar
  2. Si lo pruebas, me cuentas como resultó Espinelli

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

    ResponderEliminar
  4. @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.

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

    ResponderEliminar
  6. Sólo veo el icono de inicio Kenji ¿has cambiado algo después de escribir tu comentario?

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

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

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

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

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

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

    ResponderEliminar
  13. Perdon pero no entendi que partes exactemente son las que hay que cambiar. Que son los "contenedores de enlaces"?

    ResponderEliminar
  14. Realmente no hay que tomar los contenedores, por lo que no importa cuales son. Me refería a que había que cambiar las propiedades CSS de esos elementos -los que contienen los enlaces antiguos/recientes-

    Por tanto, lo que hay que hacer es buscar un trozo de código muy similar al que puse en primer lugar y cambiarlo por el que se propone. La pista es que vienen seguidos en la plantilla y utilizan los nombres BLOG-PAGER, BLOG-PAGER-NEWER-LINK y BLOG-PAGER-OLDER-LINK.

    ResponderEliminar
    Respuestas
    1. Puede que haya entendido mal. Pero lo que hay que hacer es usar los dos ultimos codigos. Donde al primero se lo remplaza por el segundo. No?

      Eliminar
    2. No :)

      El primero hay que ponerlo nuevo en la parte CSS, pero como seguro que tienes esas mismas clases (blog-pager, etc.) ya definidas en tu plantilla, lo que comento es que hay que borrarlas primero para sustituirlas por las de ese trozo.

      Luego hay un segundo trozo de código en esta entrada que también hay que borrar. Es el que tiene un desplegable para verlo entero. Una vez localizado, se elimina y en su lugar se pone el que sale aquí en tercer lugar.

      Eliminar
    3. El problema es que hay muchas cosas que tienen estos nombres BLOG-PAGER, BLOG-PAGER-NEWER-LINK y BLOG-PAGER-OLDER-LINK. Asi que no se que es exactamente lo que tengo que reemplazar. No se si podria mandarte mi plantilla para que pudieras indicarme con mayor precision cuales son las partes a editar.

      Saludos!

      Eliminar
    4. Pues en tu caso sólo tienes que reemplazar este trozo:

      /*
      #blog-pager {
      padding: 15px;
      font-size: 120%;
      background-color: #141414;
      border: 1px solid #222222;
      -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .2);
      -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .2);
      -goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, .2);
      box-shadow: 0 0 0 rgba(0, 0, 0, .2);
      -moz-border-radius: 0;
      -webkit-border-radius: 0;
      -goog-ms-border-radius: 0;
      border-radius: 0;
      -moz-border-radius-topleft: 0;
      -moz-border-radius-topright: 0;
      -webkit-border-top-left-radius: 0;
      -webkit-border-top-right-radius: 0;
      -goog-ms-border-top-left-radius: 0;
      -goog-ms-border-top-right-radius: 0;
      border-top-left-radius: 0;
      border-top-right-radius-topright: 0;
      margin-top: 1em;
      }
      */

      Ponle las dos barras y los dos asteriscos que he incluido yo por si no te funciona y tienes que volver a ponerlo. Para ello sólo quitas esos símbolos.

      Eliminar
    5. Lamentablemente sigue sin funcionar. No veo cual es el problema. Cambie lo que me indicaste y no aparecen los botones, si bien desaparecen los links de entras antiguas y recientes.
      Probe cambiando las imagenes a una cuenta de photobucket por si ese era el problema pero siguen sin verse.
      Tendra algo que ver el codigo de "mobileLinkUrl" que aparece en mi plantilla y que no aparece en el codigo que escribiste?

      Eliminar
  15. No sé para qué es ese mobileLinkUrl, pero parece que canta que es para móviles. No sé qué te puede estar ocurriendo pero normalmente estas cosas ocurren cuando te saltas alguna línea por borrar o pones otra de más. Envía plantilla como adjunto en este formulario. Da igual que ponga "imagen" ;)

    ResponderEliminar
    Respuestas
    1. Arreglado. El mobile no tenía nada que ver directamente, pero probablemente copiabas el código antes de esas líneas en lugar de sustituirlas también.

      He actualizado el código a copiar en la entrada. Utiliza el que ves ahora sustituyendo por completo el INCLUDABLE.

      Eliminar
    2. Pues no, sigue sin andar. En determinado momento con la vista previa logre ver el boton de la derechar, pero no logro hacerlo andar.
      Note que en mi plantilla faltan los terminos de
      class='home-link' expr:href='data:blog.homepageUrl'
      class='home-link' expr:href='data:blog.homepageUrl'

      Es decir faltan esos terminos en el codigo a cambiar, ya se que de todas maneras esos terminos los voy a borrar pero tal vez indica que faltan agregar algunos codigos a mi plantilla.

      Eliminar
    3. Las modificaciones las hice directamente sobre la plantilla que me enviaste. En vista previa sólo se tiene que ver el botón derecho porque en esa no hay enlace a Home ni a Entradas más recientes. ¿Puedes probar de nuevo?

      Eliminar
    4. si, perdon. Tenias toda la razon! Ahora si, esta totalmente funcional.

      Muchisimas Gracias!

      Eliminar