DISEÑO Y SERVICIO WEB, RECURSOS EN LINEA, TUTORIALES, PROGRAMAS Y MÁS...

lunes, 27 de julio de 2009

Cambiar iconos de navegacion en blogger

Si ya estas aburrido de los links "entradas antiguas", "entradas nuevas", "next", "previous" cuando esta navegando por tu blog, o simplemente queres darle más atractivo, una solución puede ser cambiar estos links por iconos de navegación

¿Qué es un icono de navegación?

La respuesta es:
Son imágenes enlace que incluimos en las páginas y que suelen tener la apariencia de botones o flechas, cuya función es ayudar al visitante a navegar por nuestra página.
Ejemplo:siguienteanterior


Si ya estas seguro de que queres cambiar en link por un icono
estos son los pasos:

Ir en tu blogger a Diseño/ Edición de HTML y tildar la opción expandir plantillas de artilugios

Recomendación: descargar la plantilla para que en culquier caso de que cometas un error, puedas dejar todo como esta subiendo nuevamente la plantilla, pero eso es tu decisión

En el cuadro de edición buscar el siguiente código:

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


a este remplazar 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="la direccion donde esta tu icono";

</b:if>



<b:if cond='data:olderPageUrl'>

<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>

<img src="la direccion donde esta tu icono";

</b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'>

<img src="la direccion donde esta tu icono"

</div>

<div class='clear'/>

</b:includable>


Donde dice "la direccion donde esta tu icono" debe ser el elace de tu imagen que ya debe estar subida a la red, ya sea en un servidor o en otra página.
La primera corresponde al icono que equivale con next o siguiente
La segunda corresponde al icono que equivale con previo o anterior
y el tercero equivale a home o pagina principal

Si te arrepientes y quieres volver a tener texto, lo que debes hacer es sustituir en el código

<img src='http://...left.gif'/>

por el texto

Cualquier duda comenten

No hay comentarios:

Publicar un comentario