Poner una faviconera en la cabecera del blog

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.

-Fuente 

Read More

Poner una faviconera en Blogger

Como habíamos visto anteriormente de cómo colocar una faviconera en la cabecera del Blog, ahora les mostrare comoponerla en la sidebar, abajo de las entradas, al final del Blog o donde ustedes quieran.

Es muy fácil colocarla, lo primero que tenemos que hacer es irnos a Diseño > Elementos de la página > Añadir un elemento HTML/Javascript, y ahí pegamos el siguiente código:

<style type="text/css"> #faviconera { width:300px; text-align:center; margin:10px auto 10px auto; } #faviconera .contimg img { padding:1px 1px 1px 1px; border:1px solid #8C8984; } #faviconera .contimg a:hover img{ border:1px solid #ffffff; } </style> <div id="faviconera"> <div class="contimg"> <a href="URL DEL BLOG A ENLAZAR"><img src="URL DE LA IMAGEN DEL FAVICON" title="TITULO DEL ENLACE" /></a> <a href="URL DEL BLOG A ENLAZAR"><img src="URL DE LA IMAGEN DEL FAVICON" title="TITULO DEL ENLACE" /></a> <a href="URL DEL BLOG A ENLAZAR"><img src="URL DE LA IMAGEN DEL FAVICON" title="TITULO DEL ENLACE" /></a> <a href="URL DEL BLOG A ENLAZAR"><img src="URL DE LA IMAGEN DEL FAVICON" title="TITULO DEL ENLACE" /></a> </div> </div>

Si quieren cambiar el tamaño de la faviconera lo pueden hacer en la opción de width, así también como el tamaño delborde y el color del mismo.

Luego debemos cambiar lo que está en color azul por lo que nos pide, el código lo coloque para 4 favicons pero para mostrar más, tenemos que agregar: <a href="URL DEL BLOG A ENLAZAR"><img src="URL DE LA IMAGEN DEL FAVICON" title="TITULO DEL ENLACE" /></a> Guardamos y listo.

Por V-Junkie

Read More

Crear una faviconera en minutos

Si deseas añadir en tu blog una faviconera como la siguiente deberemos seguir los siguientes pasos:

1) Vamos a Diseño
2) Elementos de página
3) Añadir un gadget
4) Pegamos en él el siguiente código:

---

<style type="text/css">
#faviconera {
width:300px;
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">

<a href="http://URLdelBLOGaENLAZAR.com"><img src="http://URLdeLAimagenDELfavicon.ico" title="Nombre de la web enlazada"/></a>

<a href="http://URLdelBLOGaENLAZAR.com"><img src="http://URLdeLAimagenDELfavicon.ico" title="Nombre de la web enlazada"/></a>

</div>
</div>

---

Podemos modificar el tamaño de la faviconera cambiando el valor del width. Lo mismo haremos con el borde. 

Si queremos añadir más favicons deberemos pegar tantos códigos como el siguiente queramos añadir:

<a href="http://URLdelBLOGaENLAZAR.com"><img src="http://URLdeLAimagenDELfavicon.ico" title="Nombre de la web enlazada"/></a>

Seguimos las instrucciones para colocar las URL correctamente. 



Tomado de quiero crear un blog.com

Read More

Como armar una faviconera para Blogger

El uso de una caja de favicones como se muestra en laimagen es una de las técnicas utilizadas para intercambio de enlaces por medio de favicon.

Se trata de un bloque o caja destinado a almacenar los favicones de otros sitios web con los que desee intercambiar, desde luego cada favicon guarda el enlace a la página principal correspondiente, por ejemplo puede explorar mi faviconera que esta situada a su derecha.

¿Que es un Favicon?

Un favicon es una pequeña imagen de tamaño 16X16 px. que hace parte de la identidad gráfica de un sitio web.  El nombre favicon proviene de la composición Favorites Icon (Iconos favoritos)  y son utilizados por los navegadores web en las pestañas y en los marcadores (favoritos).

Es importante hacer una acotación antes de proseguir.  Como ya se acaba de definir acerca del favicon, pero si no estas familiarizado con el uso de este y probablemente poseas un blog de blogger (como este), entonces verás que en la pestaña del navegador el favicon será el de Blogger :

Este resultado (el ver el favicon en la pestaña) se logra con un procedimiento que requiere intervención en el código fuente del blog, algo que no es parte de esta entrada, pero que posteriormente veremos como se hace.

Una característica acerca del uso del favicon en su aplicación original (como se ve en la anteriorimagen) es que este sea creado con la extensión .ICO, aunque para las últimas actualizaciones de navegadores ya se acepta el favicon con la extensión .PNG y .GIF.   De todas formas para el uso de favicon en faviconeras no es camisa de fuerza y preferiblemente se aconseja el uso del .PNG, 

¿Como hacer una faviconera para intercambio de favicones?

Una forma sencilla de crear una faviconera para tu blog es la siguiente (en Blogger). Selecciona y copia el siguiente código, luego pegarlo en un gadget HTML/Javascript. He dejado los datos de mi favicon en azul para que les sirva de guía.

Este fragmento de código se repite seguidamente cada vez que requieras agregar otro favicon a la faviconera, yo por ejemplo tengo dos imágenes de favicon, una en color, que es la original y otro en gris que se repite continuamente y a los que he dejado como enlace la entrada donde ofrezco el intercambio de favicon.

 y 

<a href="http://www.tecnotierra.blogspot.com/" target="_blank"><img src="http://www.dinamicolor.com/TT/tecnotierra.png" title="Tecno Tierra" style="padding:2px; border:1px solid gray" /></a>

Recuerda bien los datos básicos para un favicon que son siguiendo el orden de las partes en azul  del anterior código:

1.  La URL del web:  http://www.tecnotierra.blogspot.com/

2.  La URL del favicon: http://www.dinamicolor.com/TT/tecnotierra.png

3.  El título del blog (al evento de pasar el mouse sobre el favicon): Tecno Tierra

Fuente: Tecno Tierra

Read More