Poniendo íconos de navegación


Una pregunta frecuente que se me hace en el blog y por el e-mail es cómo sustituir esto:



Por esto:



Es decir, sustituir el texto por íconos de navegación. Es muy sencillo hacerlo y vamos a ver cómo hacerlo:

♠ Vamos a Diseño - Edición HTML - Expandir plantilla de artilugio.
♠ Con ayuda de CTRL+F buscamos el siguiente código en la plantilla:

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

♠ El código anterior lo reemplazaremos por el siguiente:

<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='AQUÍ-URL-IMAGEN-IZQUIERDA'/>
</a>
</b:if>

<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img src='AQUÍ-URL-IMAGEN-DERECHA'/>
</a>
</b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='AQUÍ-URL-IMAGEN-CENTRO'/>
</a>
</div>
<div class='clear'/>
</b:includable>

♠ Reemplazamos AQUÍ URL por la imagen correspondiente, teniendo en cuenta que:
» AQUÍ-URL-IMAGEN-IZQUIERDA reemplaza a "Entrada más recientes".
» AQUÍ-URL-IMAGEN-DERECHA reemplaza a "Entrada antiguas".
» AQUÍ-URL-IMAGEN-CENTRO reemplaza a "Página principal".

♠ Damos click a guardar y listo! En próximas entradas veremos más formas de personalizar los íconos de navegación.

9 opinaron:

La inquisidora

Muy bueno; es lo que buscaba, me encanta :)

Responder
G

Pero qué buena entrada, sí, definitivamente lo voy a aplicar

Besos

Responder
Anónimo

Una pregunta cómo hago para que cuando habro una entrada aparezca el título de la entrada con +/- como tu blog y que hago click y se muestra el contenido de la entrada?

Responder
killereuler

Enhorabuena por tu blog. Está lleno de detallitos muy útiles e interesantes.

Saludos

Responder
Jéssica YK

» La inquisidora: me alegra que la entrada te sea útil.

» G: si tienes alguna duda, me avisas.

» Anónimo: para logras que los títulos se expandan, mira esta entrada.
Por cierto, la próxima vez trata de tener tu perfil habilitado o deja algún enlace a tu blog.

» killereuler: gracias por tu visita :)

Responder
Smark

que buena información gracias por compartirla ya tengo mis iconos de navegación :D

saludos Jéssica YK

Responder
Jéssica YK

Smark: sí, me pasé por tu blog y quedaron muy bien :)

S@lu2

Responder
Kuston

Exelente, quiero aplicar esto a mi blog... :D
pero en donde puedo conseguir unos iconos asi

Gracias, muy bueno ;)

Responder
Jéssica YK

Kuston: hay muchas páginas donde puedes conseguir íconos de navegación, aquí una

S@lu2

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio