Sustituye la leyenda Entradas Antiguas o Entradas Recientes por una imagen

Artículo escrito en el Balcón de Jaime, uno de los mejores blogs de ambiente blogger. Te insto a visitarlo y dejarle a un mensaje a Jaime ¡Que vuelva del retiro!



En tu blog, cuando ves una entrada, te darás cuenta de que debajo de ella, sale lo siguiente:

*Entrada más recientes *Página principal *Entradas antiguas

Pero hay una manera de cambiar esas frases por iconos...

Diseño>edición HTML>expandimos artilugios 

Busca esto:
<b:includable id='nextprev'>
Ahora busca la línea <b:includable id='nextprev'> y la línea que finaliza el bloque: </b:includable>

Borra todo ese bloque incluidas las líneas de <b:includable id='nextprev'> y </b:includable>

Pega esto en su lugar:
<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='URL FLECHA 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='URL FLECHA DERECHA'/></a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='URL IMAGEN DE INICIO'/></a>
</div>
<div class='clear'/>
</b:includable>
Ahora te toca rellenar con URL (direcciones) las tres líneas marcadas.

Si también quieres los iconos de navegación encima de las entradas, para mejorar la navegación de tus usuarios, busca esto y añades la línea que está en rojo:
<b:includable id='main' var='top'>
<div id='blog-posts'>
<b:include name='nextprev'/>
Por último, buscamos la etiqueta ]]></b:skin> y antes de ella le pegamos esto:
#blog-pager-older-link {
float: right;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager {
text-align: center;
}
La función del bloque que hemos añadido ahora consiste en "recordar" dónde va cada icono, y así cuando cambiemos algo de los posts en la plantilla, no se descolocarán, si no lo haces tus iconos se acabarán juntando o descolocando.

Puedes encontrar muchos iconos de flechas en las siguientes páginas web...

Icon Finder


Icon let


Icon look

Nota:
Las páginas están en inglés, por lo que si deseas las flechas debes buscarlas así:

Left arrow: flecha izquierda
Right arrow: flecha derecha
Home: Inicio (la casita :-D)

0 comentarios:

Publicar un comentario

¡Gracias por comentar!

Related Posts Plugin for WordPress, Blogger...