Hacktime

Que seria de la web sin este blog

Añadiendo iconos de navegacion para el nuevo blogger

Posted by yaju en febrero 18, 2007

O bien el titulo deberia ser, ¿Como cambiar las palabras “Entradas antiguas” por una imagen?, o quizas, ¿como hacerlo por una palabra mas bonita?, pues bien basandome en el truco de Hoctro, lo he conseguido…

<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’><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 + “_blog-pager-older-link”‘ 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 si lo que quieres es cambiarlo por una imagen reemplaza el codigo por este:

<b:includable id=’nextprev’>
<div id=’blog-pager’>
<b:if cond=’data:newerPageUrl’>
<a expr:href=’data:newerPageUrl’ expr:title=’data:newerPageTitle’ id=’blog-pager-newer-link’>
<img src=’http://photos1.blogger.com/blogger2/3880/707811929476148/1600/left.gif‘/></a>
</b:if>

<b:if cond=’data:olderPageUrl’>
<a expr:href=’data:olderPageUrl’ expr:title=’data:olderPageTitle’ id=’blog-pager-older-link’>
<img src=’http://photos1.blogger.com/blogger2/3880/7078119
29476148/1600/right.gif‘/></a>
</b:if>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’>
<img src=’http://photos1.blogger.com/blogger2/3880/707811929476148/1600/home.gif‘/></a>
</div>
<div class=’clear’/>
</b:includable>

Guardamos cambios y nos deberia quedar asi:

Tambien podemos cambiar las imagenes recordando siempre que las imagenes deben ir en este orden: 1 Izquierda 2 Derecha 3 Inicio(Central)

Ahora si queremos cambiarlo por palabras diferentes reemplazamos el codigo por este:

<b:includable id=’nextprev’>
<div id=’blog-pager’>
<b:if cond=’data:newerPageUrl’>

<a expr:href=’data:newerPageUrl’ expr:title=’data:newerPageTitle’ id=’blog-pager-newer-link’>Hacia las mas recientes</a>
</b:if>

<b:if cond=’data:olderPageUrl’>
<a expr:href=’data:olderPageUrl’ expr:title=’data:olderPageTitle’ id=’blog-pager-older-link’>Hacia las mas antiguas</a>
</b:if>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’>Pagina de Inicio</a>
</div>
<div class=’clear’/>
</b:includable>

Yo por mi parte he decido personalizar mis iconos de navegacion… como pueden observar al final de la pagina. Que disfruten…

7 comentarios to “Añadiendo iconos de navegacion para el nuevo blogger”

  1. Srwolfman said

    Hola una pregunta se puede poner solamente en la parte de arriba del main?

  2. Sebas said

    Hi.
    Hace poco probe esto, pero no me funciona entradas antiguas.
    Mi duda o mi inquietud es la siguiente:
    En la primera parte indicas buscar un codigo, ahi ok, lo encontre.
    En la segunda parte mencionas el poner los iconos, pero comparando los códigos tanto el primero como el segundo, ha cambiado bastante a mi entender, se tiene eliminar algunos códigos?.
    Porque en mi caso no borre nada y simplemente puse los códigos, o sea reemplaze los codigos por las imagenes (iconos). Ese seria mi error?.
    Por último, se tiene que borrar algo?, porque en la página en ingles tampoco especifica bien, simplemente interpretación, ni si quiera esta la palabra en inglés, delete.
    Bye.

  3. Anonymous said

    Hola una pregunta !! todo me salio correcto ! menos una cosa que es ! que al salirme los iconos me salen debajo juntos a la izquierda y no como en la foto del ejemplo como puedo ajustarlopara que me salga centrados el de home y en los laterales las flechas gracias y salu2

  4. Antonio Herrera said

    Muy agradecido por este truco difícil pero que resuelves con tanta sencillez.

    Llevaba tiempo buscando esta solución y no encontraba el modo.

    Enlazado estás al blog http://defotosyotros.blogspot.com
    porque a bien seguro volveré para encontrar nuevas soluciones.

    De nuevo gracias.

  5. Gem@ said

    Me ha quedado perfecto, por cierto que me han gustado las imágenes que tienes como iconos de navegación y me las he llevado prestadas, eso si.. no te he copiado la url😉
    Espero no te moleste si es lo contrario me lo dices y las sustituyo por otras.

  6. Gustavo said

    Alguien conoce una versiòn de este truco para la version anterior de Blogger?

  7. Pitoche said

    Soy usuario de blogger y lo he intentado mil veces: Como no consigo ver en la plantilla el código que tú mencionas (

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: