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

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

Agrega un Favicon a tu Blogger

A "Favicon" or "Favorite Icon" is a small image that is shown inside the browser's location bar and bookmark menu when your site is called up. It is a good way to brand your site and increase it's prominence in your visitor's bookmark menu.

Favicons can be in any format such as PNG, GIF, JPG etc. But most of the people use 16*16 pixel and 32*32 pixel favicon with ".ico" format. you cannot only make static faviconsbut you can also make animated favicons for your blogger blogs.

The main advantage of creating and using favicon is ,it makes it easy to find your blog or site when someone favourited or bookmarked your site/blog among several blog/sites.

Step 1: choose your own icon.

First you will need to find nice logo, suitable to your blog.

Using the following online favicon generators you can create your own favicon.

• Dynamic Drive
• Favicon
• HTML Kit ( Marquee Favicon )
• Iconj

Step 2: (OR ) Make your own favicon.

now you have to make your icon using your logo or any image and save it as any image format[ jpg, gif, png ].
Then upload it.

Step 3: Upload it.

After choosing your icon, upload the icon to the image hosting websites and then get direct link for that icon.

Step 4: Add a code to your blogger.

Log in to Blogger. Now go to "Design" and then click on "Edit HTML" tab.Then download the present template as a backup.

Then look for this code.

<title><data:blog.pagetitle/></title>

Just AFTER that code add these lines

<link href='DIRECT LINK OF IMAGE' rel='shortcut icon'/>
<link href='DIRECT LINK OF IMAGE' rel='icon'/>

and replace the 'DIRECT LINK OF IMAGE' with the url of your icon file from Step 3.

Step 4: Now Save The Template.

Read More