Faviconera adaptable con rollover | Oloblogger Parece que hay un movimiento bloguero relacionado con los faviconos , que se está extendiendo cual mancha de aceite: la faviconera . La ide...

5 de febrero de 2009

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

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

follow us in feedly

24 comentarios :

  1. Bueno yo tengo una faviconera, pero por ahora no es tan avanzada como la que propones :D
    Aunque como por ahora hay pocos, siemrpe queda bien :D

    ResponderEliminar
  2. Anónimo8/2/09 4:08

    HOLA OLOBLOG...
    UNA PREGUNTA NADA MAS...
    PODRIAS DECIRME COMO ES PARA PONER LOS DESPLEGABLES QUE TENES EN: 2DONDE ESTAMOS","ARCHIVO DEL BLOG","COLABORAMOS CON..."

    GRACIAS.
    SALUDOS
    pd: tengo la plantilla minima black
    http://liniersasinotequeremos.blogspot.com

    ResponderEliminar
  3. http://oloblogger.blogspot.com/2008/05/desplegar-partes-del-blog.html

    http://oloblogger.blogspot.com/2008/10/aligerar-la-sidebar.html

    Saludos

    ResponderEliminar
  4. Hola oloman, me gustaria intercambiar enlaces, ya puse tu banner en mi blog, aqui te dejo la direccion de la imagen:

    http://i40.tinypic.com/2l8ahdt.gif

    o este miniboton:

    http://i44.tinypic.com/2l8c1z8.gif

    ResponderEliminar
  5. No te lo tomes a mal DTC, pero no intercambio enlaces. Simplemente pongo aquellos cuyos sitios me gustan o me une alguna relación (de amistad).

    Aprovecho para comentarte que quizás deberías cambiar el color de los títulos de tus posts (o el fondo), porque con el actual naranja, resulta muy difícil de leer por el poco contraste.

    Un saludo,

    ResponderEliminar
  6. Hola Oloman, estoy mirando pero en este blog no veo la imagen que enlaza al grupo. Dime tu donde esta porque lo mismo estoy medio cegata ;).

    Me a gustado ver esta entrada para incluir los favicones, algo que esta de moda ultimamente. Si tu mismo aceptas favicones, yo me apuntoooooo.

    Esta entrada va derecha al sidebar de CONECTABLOG, y quedará colocada en la sección Articulos de Ayuda.

    Un abrazo!!

    Quedo pendiente de lo de la imagen del grupo para incluir este blog en el directorio.

    ResponderEliminar
  7. Arreglado y contestado Malina.

    De momento no me he decidido a poner una colección de faviconos, pero no lo descarto.

    ResponderEliminar
  8. Hola.

    He instalado la faviconera sin problemas. Ahora me surge una duda, ¿cómo consigo el favicon del blog o web que quiero poner??.

    Un saludo.

    ResponderEliminar
  9. Hombre Miguel... lo normal es que los interesados te pasen la direccion (URL) de la imagen. No obstante, viendo el código fuente de una página (botón derecho) normalmente podrás encontrar el artilugio para poner un favicon, con una estructura parecida a la que puedes ver en el enlace.

    Ahí podrás encontrar la dirección.

    ResponderEliminar
  10. AYUDA POR FAVOR
    Necesito poner una imagen con varios hipervinculos en mi blog.
    Al subirlo a paginas de image hosting para obtener el codigo html logro tenerlo, pero sin los hipervinculos que tiene la imagen.
    como puedo hacer estoo?
    graciaaas

    ResponderEliminar
  11. hola olomán, parece que tengo mal de ojo. mira en http://paraninosconcabeza.blogspot.com el aspecto de mi faviconera (primera columna desde la derecha). ¿qué le pasa? quedan dos rectangulitos a los lados del favicon. y solo copié tu código... últimamente no tengo suerte!!

    ResponderEliminar
  12. otra pregunta. si quiero ahora una faviconera a 1 euro el favicón por tres meses, ¿cómo pongo 1€ en el cuadratín? (si me van a salir los cuadratines!!)

    ResponderEliminar
  13. Lk, creo que los enlaces a las imágenes estaban mal. Ahora veo que la cosa va mejor. Para colocar lo de 1€, lo mejor es que crees una imagen de 16x16 con ese texto y la subas para los huecos.

    ResponderEliminar
  14. Hola, muy interesante tu codigo para la faviconera funciona perfecto. Lo he tomado y en lugar de poner favicons he puesto pixel-buttons, entonces me ha quedado la pixelera.

    Visita y mira:

    www.entraraenundiskette.blogspot.com

    Saludos

    ResponderEliminar
  15. Sí, claro Jacobo. Vale para cualquier tipo de imágenes. Siempre que tengan las mismas dimensiones, la cosa quedará bien. Gracias por el link.

    ResponderEliminar
  16. Muy bueno Oloman

    No me cansó de "pulular" por este blog

    ResponderEliminar
  17. Pues nada. Pulula, pulula... :D

    ResponderEliminar
  18. ¿Dónde se añadiría lo de

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

    Es que no está muy claro

    ResponderEliminar
  19. En la parte CSS, dentro del selector con el nombre "faviconera". Como ya se dijo dónde poner esa clase, sólo anoté que se deberían insertar ahí esas líneas para conseguir fijar la faviconera. Por ejemplo, con la primera versión (horizontal):

    #faviconera {
    position:absolute;
    top:300px;
    left:30px;

    width:20px;
    text-align:center;
    margin:10px auto 10px auto;
    }

    ResponderEliminar
  20. ya t agregue a mi faviconera

    saludoosss

    oye no veo tu faviconera :S

    ResponderEliminar
  21. No tengo Pato. Sólo hablo de ellas y recopilo aquellas direcciones que las ofrecen gratuitamente:

    http://oloblogger.blogspot.com/2009/04/faviconeras-idea-buena-idea-mala.html

    Ahí estás tú... ;)

    ResponderEliminar