Imágenes en enlaces de navegación sólo con CSS. Blogger.

Es verano y por tanto además de estar medio de vacaciones también estoy muy perezoso, así que me vais a disculpar el bajo nivel de publicación y que hoy os venga con una cosa sencillita.

Para ir directamente al grano, se trata de sustituir los enlaces que de manera automática salen en todos las plantillas con el rótulo "Entradas más recientes", "Entradas antiguas" y "Página principal" por imágenes y además, incluyendo un efecto rollover o hover.

Esto ya vimos cómo hacerlo alterando la parte HTML de la plantilla, pero en esta ocasión lo vamos a hacer sólo cambiando las propiedades de las clases CSS que administran este tipo de enlaces. La ventaja de hacerlo de esta manera y no de la otra, es que cuando Blogger tenga a bien cambiarnos subrepticiamente nuestro código, las modificaciones que hayamos hecho en nuestra plantilla no afectarán tanto a las novedades que nos incorporen.

En las plantillas de 2006, la referencia para insertar el nuevo código son estas líneas que se reproducen a continuación:

#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}

Puede ser que en lugar de $startSide y $endSide, os aparezcan left y right, pero esto es indiferente. Hay que tomar todo ese trozo y sustituirlo por este otro:

.blog-pager {
background: $(paging.background);
position: relative;
}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: $(content.background.color);
padding: 5px;
}
a.home-link {
position:absolute;
left:50%;
margin:0px auto 0px -22px;
padding:0px;
width:44px;
height:44px;
text-indent:-1000px;
overflow:hidden;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw0Lspy2bay7yhKqde0ER3A0sQTxRud9TTrr978JNQYua7NVR96ZvlzyUkdjIRF6d7Z1mQmsOyRC_2OYIx84dV9HorvM8aCooendC_YanG4LpMASYjt37TZsTeR2RGHbtEz0CsXrEt02lL/);
}
a.home-link:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWYoepD1uh-ie5lf89By1cTFxe-8euMz2MttjjuRLbSZG0TEsVz1F6HfkXyrbDHJTlS6weEHNthr64dsZgkU8SMiYiHnkV32tbeBI2IR5QlYdnvcFgm1ln40ogVfsLrty_0PgiFLA8jdV8/);
}
#blog-pager-newer-link a {
float:left;
padding:0px;
width:44px;
height:44px;
text-indent:-1000px;
overflow:hidden;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin_eKDrb630ZJ_-YYPGDVoXRqHszHgDhnE79fOLjNsaNT6Z-3YqCGvOFWd6xOprMxGqAvcvWNsvRmaabAB26BJbXwYDfypL5Bp2O77USdm3rVMm5u67vMHxLZ3f0M7iDC_Hyiq3eYmTlPJ/);
}
#blog-pager-newer-link a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVzKFNCuCSef8nfU9-VC0-8KLvzrBG7tSxy-ur4ki7MnFj3_B69IDoEcgYhxFvdidh9YAI3PYBsuM7RR3lrfLY0JpYJ8D7Xo4ytMz0mEv0pdnoufWg0I2vE7g5TqGeoNAVUY38QaGbCw6j/);
}
#blog-pager-older-link a {
float:right;
padding:0px;
width:44px;
height:44px;
text-indent:-1000px;
overflow:hidden;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixVL0X0HirJQD57pEucYCVJH2W6haDIlLGyi5lnVkYzrZrFZcCEWvuvf_sIImEzaLcHmsZzw2wL7hICZwBA4oerlFFQNBh0wNyRMIV8KwERHqlP5EVsQGGWuV4EBH3G09jGiYjsD49RNJN/);
}
#blog-pager-older-link a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtYQ7m0FlQzoedMbp8CToO7eawlKJLwC1oN9XFF_HWc-VPr-4KSA0GqMwkWSXu8_Z3GWn4R1WZ6qCnK_Tw3dQPp1-OJ6_XNI75hd4acm2yOCw05YEzc2MC_ofnZUjdEnBhOLzKnDMJOPAu/);
}

La base del truco consiste en asignar un fondo gráfico determinado a las clases que controlan cada uno de los tres tipos de enlaces (home-link, blog-pager-newer-link y blog-pager-older-link) y al mismo tiempo, mandar bien lejos el texto por defecto, con un sangrado negativo (text-indent). Esto hace que sólo sea el texto el que desaparezca, viéndose sin problemas la imagen de fondo. Es necesario que el ancho y el alto de cada clase se ajuste al tamaño de las imágenes a utilizar.

Los efectos hover son opcionales y para suprimirlos sólo habría que omitir las clases y sus propiedades, que terminan con esa pseudoclase (:hover).

Por supuesto, las imágenes de este ejemplo son sólo eso, un ejemplo y las podéis/debéis personalizar a vuestro gusto. Sólo habría que sustituir las direcciones propuestas por las vuestras y cambiar los anchos y altos por los que correspondan.

En plantillas del nuevo diseñador sólo encontraréis como referencia la clase .blog-pager. En ese caso, sólo añadís en ella la propiedad position:relative; y a continuación insertáis el resto de código anteriormente reproducido, antes de ]]></b:skin>

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter