Tutorial: personalizar "entradas antiguas, recientes e inicio" del blog

Pues hoy he podido sacar un ratito para hacer el tutorial que os prometí: Como personalizar los links de "entradas antiguas", "entradas recientes" e "inicio". La verdad es que yo he visto este tutorial muy pocas veces y puede resultar un poco complicado encontrarlo. Pero ya está aquí para vosotros, para que personaliceis el blog y quede más personal. Porque yo pienso que un blog refleja un poco como es cada persona ¿no? Los colores, los tipos de letras, la manera que tiene de escribir, la decoración... todo en general.

Así que he decidido que a parte del tutorial que escribiré hoy, mañana os traeré más tipos de botones para que tengais más variedad. 

Pues allá vamos, estad atentos:

1. Antes de nada vamos a subir a Dropbox los tres botones que vamos a utilizar para poder copiar el código. Si aún no sabes como hacerlo pincha aquí.

2. Ahora nos vamos a ir a nuestra Plantilla, a edición HTML para cambiar los códigos. 

3. Una vez que estemos en el Código HTML, pinchamos en cualquier parte del código y le damos a Ctrl + F para buscar un código.

4. Cuando se nos ha habierto la cajita de buscar, tenemos que buscar ahora este código:

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

Para que os resulte más fácil, yo sólo copié la primera línea que viene pero atención porque en vuestra plantilla puede que no lo encontréis a la primera. Fijáos bien si el código es el mismo para sustituirlo y que no tengamos luego problemas.

5. Cuando ya hemos localizado lo que nos pedía sustituimos el código <data:newerPageTitle/>

Podemos sustituir ya sea cambiándole la frase para que aparezca otra más bonita o también para cambiarlo por un icono. En este caso el código que os he indicado para sustituir ( <data:newerPageTitle/> ) lo cambiamos por <img src='URL de la imagen'/>. Donde pone URL de la imagen lo quitamos y ponemos el enlace a nuestra imagen que hemos visto en este tutorial.

6. Cuando ya hemos cambiado el código de "entradas recientes" vamos a sustituir el de "entradas antiguas" utilizando el mismo método que antes. Buscamos este código que se encuentra más abajo:

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

Y sustituimos <data:olderPageTitle/> por una frase o por un icono con el mismo código que antes <img src='URL de la imagen'/>.

7. Y por último vamos con el enlace de "inicio" que se hace exactamente igual que los dos anteriores. Buscamos 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>

Y sustituimos este código <data:homeMsg/> por una frase o por un icono con el mismo código <img src='URL de la imagen'/>

 Y ya está. Guardamos la plantilla y tendremos personalizado y bonito nuestro blog. ¿Qué os ha parecido? ¿Querríais algunos botones de entradas e inicio para descargarlo y ponerlos en vuestro blog?