Personalizar los links de navegación

Hoy he estado mirando por Ciudad Blogger para ver si me podía solucionar un problema relacionado con la plantilla y he dado con esta entrada que nos explica como cambiar los links del pie de navegación, esos que dicen: "Entradas antiguas", "Entradas más recientes" y "Página principal".
Estos enlaces son de mucha utilidad para el lector ya que facilitan la navegación dentro del blog, sin embargo, no siempre se ven muy atractivos, así que podemos personalizarlos para poner otro texto o sustituirlos con algún icono.
Para hacerlo, entra en "Diseño", "Edición de HTML" y con la casilla de "Expandir artilugios" marcada buscamos los siguiente:
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl + &quot;?max-results&quot; ' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
La parte que está en color rojo es la que muestra el texto "Entradas más recientes", puedes eliminarlo y poner cualquier otro texto, o cambiarlo por una imagen, para ello tendrías que sustituir lo que está en rojo por esto:
<img src='URL de la imagen'/>
Cambias lo que está en rojo por la dirección donde está ubicada la imagen y listo.
________________
Ahora buscamos un poco más abajo y encontramos este código:
<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>
Este es el que muestra el link de "Entradas antiguas". Haremos lo mismo que en el anterior cambiando lo que está en color rojo.
Si quieres cambiarlo por una imagen, tendrías que sustituir lo que está en rojo por esto:
<img src='URL de la imagen'/>
Cambias lo que está en rojo por la dirección donde está ubicada la imagen y listo.
________________
Y por último, más abajo nos encontramos con este código:
<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>
Este es el que muestra el texto "Página principal", igual se cambia lo que está en rojo por otro texto o imagen.
Si quieres cambiarlo por una imagen, tendrías que sustituir lo que está en rojo por esto:
<img src='URL de la imagen'/>
Cambias lo que está en rojo por la dirección donde está ubicada la imagen y listo.

Si los links se han quedado juntos, es decir, sin separación entre cada uno, tenemos que buscar los siguientes códigos y agregarles lo que está en color rojo
#blog-pager-newer-link {
float: left;
margin-right:100px;
}
#blog-pager-older-link {
float: right;
margin-left:100px;
}


Y aquí les dejo unos iconos que pueden usar para sustituir los enlaces:






Fuente: Ciudad Blogger

No hay comentarios:

Publicar un comentario

BUSCA EN EL BLOG