Faviconera adaptable con rollover

Parece que hay un movimiento bloguero relacionado con los faviconos, que se está extendiendo cual mancha de aceite: la faviconera.

La idea consiste en reservar un espacio en tu blog, para poner en él los faviconos de una serie de webs, incluyendo en la imagen un enlace a las mismas. La finalidad es diversa: promoción ajena, mini blogroll, intercambio de enlaces, darse a conocer, ingresos mediante alquiler de los espacios...

El caso es que sea para lo que fuere, resulta una buena idea para incluir muchos enlaces en poco espacio y con una estética que me gusta.

FAVICONERA

Montar uno de estos espacios es sencillo, pero si no te ves capaz, sólo tienes que añadir un elemento HTML en tu barra lateral con el siguiente esquema y la faviconera se adaptará al ancho disponible:

<style type="text/css">
#faviconera {
text-align:center;
margin:10px auto 10px auto;
}
#faviconera .contimg img {
padding:1px 1px 1px 1px;
border:1px solid #000000;
}
#faviconera .contimg a:hover img{
border:1px solid #ffffff;
}
</style>

<div id="faviconera">
<div class="contimg">
FAVICONERA
<br/>
<a href="URL_ENLACE1"><img src="URL_FAVICON1" title="ETIQUETA1"/></a>
<a href="URL_ENLACE2"><img src="URL_FAVICON2" title="ETIQUETA2"/></a>
<a href="URL_ENLACE3"><img src="URL_FAVICON3" title="ETIQUETA3"/></a>
<a href="javascript:void(0);"><img src="URL_IMAGEN_HUECO" title="Tu favicono aquí"/></a>
<br/>
</div>
</div>

Una línea como la marcada en verde por cada casillero con enlace y favicono.
Una línea como la marcada en gris, por cada casillero sin enlace.

URL_ENLACEx: Dirección de la web X a enlazar
URL_FAVICONx: Dirección de la imagen (favicono) de la web X
ETIQUETAx: Texto que describe el nombre de la web al pasar el puntero por encima del icono
URL_IMAGEN_HUECO: Imagen a mostrar cuando no hay todavía ninguna web.

Quizás prefieras hacer esto mismo pero en vertical. En ese caso, la parte de CSS habría que cambiarla por el siguiente:

<style type="text/css">
#faviconera {
width:20px;
text-align:center;
margin:10px auto 10px auto;
}
#faviconera .contimg img {
padding:1px 1px 1px 1px;
border:1px solid #000000;
display:block;
}
#faviconera .contimg a:hover img{
border-left:2px solid #000000;
border-right:2px solid #000000;
}
</style>

Variantes:

Se puede incluir la parte de CSS en la plantilla, antes del ]]></b:skin>, pero en ese caso habría que hacerlo eliminando <style type="text/css"> y <style>

También podemos con ambas versiones, crear un elemento fijo en cualquier parte del blog. Para ello añadimos en la clase #faviconera las líneas...

position:absolute;
top:300px;
left:30px;

...con los valores de pixels que necesitemos. Esto tiene un problema y es que con distintas resoluciones, el lugar dónde aparece irá cambiando en relación con el resto del diseño. Pero eso ya es para otro post...

Otra forma de hacerlo con tablas.

¿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