Imágenes en enlaces de navegación sólo con CSS. Blogger. | Oloblogger 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...

26 de julio de 2011

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://lh5.googleusercontent.com/-p1c6dHi1FpE/TfONzGPVH4I/AAAAAAAAOFk/Cxc6C61vFRI/home.jpg);
}
a.home-link:hover {
background:url(https://lh3.googleusercontent.com/--_riVMv6s0g/TfOVhDPXkXI/AAAAAAAAOFs/FZC4ti1QK6U/homeneg.jpg);
}
#blog-pager-newer-link a {
float:left;
padding:0px;
width:44px;
height:44px;
text-indent:-1000px;
overflow:hidden;
background:url(https://lh3.googleusercontent.com/-suBXj3s0yOU/TfONzDZ3_eI/AAAAAAAAOFc/s_pRGf23IVA/flecha1.jpg);
}
#blog-pager-newer-link a:hover {
background:url(https://lh3.googleusercontent.com/-GFENOjY2rwo/TfOVhIjHMdI/AAAAAAAAOF0/1i8MbwFCUbU/flecha1neg.jpg);
}
#blog-pager-older-link a {
float:right;
padding:0px;
width:44px;
height:44px;
text-indent:-1000px;
overflow:hidden;
background:url(https://lh5.googleusercontent.com/-m7PjPnyacHY/TfONzMAlrbI/AAAAAAAAOFg/RoTlwqQqvKI/flecha2.jpg);
}
#blog-pager-older-link a:hover {
background:url(https://lh4.googleusercontent.com/-FxzfedowoA0/TfOVhCWQfkI/AAAAAAAAOFw/4YLOBH-G0vc/flecha2neg.jpg);
}

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

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

follow us in feedly

10 comentarios :

  1. Como siempre grandes tus posts, GRACIAS!

    Llevo pocos meses metido en el mundo bloguero y descubrí por búsquedas tu blog, por supuesto, me hice seguidor al instante.

    Respecto la entrada en cuestión me lo apunto en mi lista de cosas a hacerle al blog.

    ResponderEliminar
  2. Hola amigo como no encontraba el botón de contacto te escribo por aquí;

    Me gustaría desvincular mi cuenta de Blogger de la de Google ¿Sabes cómo puedo hacerlo?

    Gracias

    ResponderEliminar
  3. Gracias a tí dPunish3r.

    Johnny, no sé con seguridad si se puede hacer, pero estoy casi convencido de que para tener una cuenta Blogger, es necesario tener una cuenta Google.

    ResponderEliminar
  4. Gracias n_n. Mi blogg se ve mas bonito con esa personalizacion.

    Te lo agradezco.

    ResponderEliminar
  5. Hola, disculpa tengo una duda; hace mucho instale LinkWithin que redirecciona a entradas pasadas, pero últimamente esta teniendo fallas la aplicación, ya no funciona y dice que no existe la entrada... Mi pregunta es: Que podría hacer para arreglarlo o si existen otras aplicaciones similares, que pueda poner en mi blog que igual tengan imagen?... Espero me respondas, te lo agradecería mucho... El link de mi blog es: http://excentricamoda.blogspot.mx/, ojala puedas ayudarme con mi problema:D

    ResponderEliminar
    Respuestas
    1. Hola. Tienes este otro sistema, pero no sé por qué demonios, el buscador interno últimamente no funciona muy bien y no aparece:

      Entradas relacionadas con miniaturas

      Eliminar
  6. No entiendo entonces no se visualiza mi blog o como??

    ResponderEliminar
    Respuestas
    1. No. Tu blog se ve bien. Me refería a que mi buscador no funciona bien y que seguramente por eso no encontraste ese enlace que te puse sobre cómo hacer algo igual que Linkwithin pero sin depender de Linkwithin... ni de nada externo.

      Eliminar
  7. A ok, muchas gracias; checare el enlace creo saber cual es:D,

    ResponderEliminar