Hace poco, me encontré como poner una faviconera en Blogger, gracias a Joaco un compañero de Forobeta, y es muy fácil implementarlo en la cabecera (header) de nuestro Blog.
Si no sabes que es un favicon?, checa la siguiente entrada que publique hace tiempo. La faviconera que vamos a colocar, así quedaría:
Primero nos vamos a Diseño > Edición de HTML y antes de ]]</b:skin> pegamos lo siguiente:
#faviconera { padding: 2px; /* espacio general entre los favicons y el borde de la faviconera */ padding-top: 4px; /* espacio superior entre los favicons y el borde de la faviconera */ text-align: center; /* alineacion de los favicones */ border-bottom: 1px solid #DDDDDD; /* estilos del borde inferior */ border-left: 1px solid #DDDDDD; /* estilos del borde izquierdo */ border-right: 1px solid #DDDDDD; /* estilos del borde derecho */ background: #FAFAFA; /* color del fondo de la faviconera */ -moz-border-radius-bottomleft:10px; /* grado de la curva de la esquina inferior izquierda (mozilla firefox) */ -webkit-border-bottom-left-radius:10px; /* grado de la curva de la esquina inferior izquierda (google chrome, safari, opera) */ -moz-border-radius-bottomright:10px; /* grado de la curva de la esquina inferior derecha (mozilla firefox) */ -webkit-border-bottom-right-radius:10px; /* grado de la curva de la esquina inferior derecha (google chrome, safari, opera) */ } #faviconera img { padding:1px; /* espacio entre cada favicon */ border:1px solid #dddddd; /* estilos del borde de las imagenes */ filter:alpha(opacity=50); /* opacidad de los favicones (mozilla firefox) */ opacity:.50; /* opacidad de los favicones (google chrome, safari, opera) */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* opacidad de los favicones (internet explorer)*/ } #faviconera a img:hover { filter:alpha(opacity=100); /* opacidad de los favicones al pasar el cursor (mozilla firefox) */ opacity:1; /* opacidad de los favicones al pasar el cursor (google chrome, safari, opera) */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* opacidad de los favicones al pasar el cursor (internet explorer) */ }
Luego de hacer esto, buscamos ahí mismo en la plantilla lo siguiente:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Lo que está en rojo muestra el número de gadgets que podemos colocar en la cabecera (header), tenemos que poner un número más grande, por ejemplo "5" para agregar más gadgets.
Ahora guardamos los cambios, y nos vamos a Diseño > Elementos de la página > Añadir un elemento HTML/Javascript y agregamos lo siguiente:
<div id="faviconera"> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> <a href="URL FAVICON"><img src="http://i1205.photobucket.com/albums/bb440/VJunkercom/interrogacionfinal.png" /></a> </div>
Solamente cambiamos lo que está en rojo por la url del enlace donde va dirigido el favicon y lo que está en azulpor la url de la imagen del favicon que tiene que estar en tamaño 16 x16, ahora guardamos y tenemos que mover el gadget por encima de la cabecera (header) y listo ya tendremos nuestra faviconera.
