Personalizando los enlaces "Entradas Recientes, Entradas Antiguas y Página principal" en Blogger

En este tutorial veremos distintas formas de personalizar estos enlaces que se encuentran en el pié del main-wrapper, los que para muchos se les hace dificil de editar.

Si bien Blogger no permite que modifiquemos estos links mediante una opción estándar, podemos hacerles cambios editando la plantilla directamente.

El Tutorial:

En este tutorial no veremos sólo cómo personalizar los enlaces, sino también a editar el contenedor donde se alojan, para ello les mostraré los IDs y las etiquetas de cada enlace para que ustedes puedan hacer los cambios que deseen.

Paso 1: Editando las etiquetas por algún texto distinto:

En "Diseño | Edición HTML" debemos marcar la casilla "Expandir plantillas de artilugios", en donde debemos buscar las siguientes etiquetas:


Página principal:

<data:homeMsg/>

Entradas antiguas:

<data:olderPageTitle/>

Entradas Recientes:

<data:newerPageTitle/>

Podemos reemplazar estas etiquetas por algún texto personalizado, recuerda que si deseas cambiar el texto por una imagen, basta con reemplazar cada etiqueta por el siguiente código:

<img border="0" src="URL-IMAGEN" />

En donde URL-IMAGEN corresponde a la dirección de alojamiento de la imagen en cuestión.

Paso 2: Personalizando los enlaces:


Ahora que ya hemos cambiado el texto de los enlaces, podemos empezar a modificar el estilo de éstos. Para ello, es necesario conocer los IDs para editarlos con CSS:

Una explicación mejor:

• #blog-pager: Corresponde al contenedor de estos enlaces.
• #blog-pager-newer-link: Enlace de Entradas Recientes.
• #blog-pager-older-link: Enlace Entradas Antiguas.
• #blog-pager-home-link: Enlace Página principal.

Para editar cada ID puedes hacerlo con los siguientes códigos:

#blog-pager { /*Atributos del contenedor*/
 inserta-el-css-aca;
}

#blog-pager-newer-link { /*Atributos del enlace Entradas Recientes*/
 inserta-el-css-aca;
}

#blog-pager-older-link { /*Atributos del enlace Entradas Antiguas*/
 inserta-el-css-aca;
}

#blog-pager-home-link { /*Atributos del enlace Página principal*/
 inserta-el-css-aca;
}

Recuerda que estos IDs generalmente ya están en la plantilla, sería muy raro que no aparecieran ya que por defecto se les asignan flotación y márgenes iniciales, si es así no es necesario que copies este código, busca las líneas de cada ID y añade los atributos que desees.