Personaliza tu barra de dirección
Seguro que alguien se habrá dado cuenta de la nueva personalización de mi blog, el último detalle que he añadido ha sido el de una estrellita en la barra de direcciones, con esto también se consigue que este icono se grabe cuando nos agreguen a marcadores. Pues nada, para el que le guste aquí os cuento cómo se hace.
Primero debemos diseñar nuestro dibujo, da igual el tamaño, puesto que utilizaremos una página web para convertir nuestro diseño en un icono. La página en la que debemos entrar para ello es http://www.chami.com/html-kit/services/favicon/. Lo único que hay que hacer es darle al botón de examinar para buscar nuestro archivo en el ordenador y cuando lo tengamos pinchamos en el botón Generate FavIcon.ico. Pues ya está, ahora sólo tenemos que descargar el comprimido generado a nuestro ordenador y descomprimirlo. Ya tenemos nuestros iconos, estáticos y dinámicos, aunque con blogger debemos utlizar el icono dinámico.
Vamos a comenzar el proceso. Primero vamos a guardar la imagen en el sevidor de Blogger, para ello hacemos una entrada nueva e insertamos la imagen (la que se mueve). Ahora necesitamos el código de esa imagen, para obtenerlo pinchamos en Edición en HTML (está en la parte superior derecha del recuadro en el que escribimos las entradas) y tendremos algo así:
El paso siguiente es entrar en la pestaña Plantilla (del diseño del blog) y luego en Edición en HTML. De lo que sale ahí posiblemente no entendamos nada, pero no importa, tenemos que buscar al principio de ese texto la etiqueta HEAD y justo debajo de ella tenemos que poner lo siguiente, pero atención, los símbolos <> vienen '<' y '>', las comillas esas no hay que ponerlas, solo las pongo yo aquí puesto que es código html y no podría ponerlo de otra forma, entonces sería <>, sin las comillas simples.
'<'link href='http://bp3.blogger.com/
_sH5-mdzelg4/RnFijs_uUUI/AAAAAAAAABI/rdQ_51cWqPg
/s400/animated_favicon1.gif'
rel='shortcut icon' type='image/x-icon'/ '>'
La parte amarilla si os dais cuenta es la misma que copiamos antes, entonces en ese lugar tendréis que poner lo vuestro, ya que ese texto equivale a mi imagen. Pues nada, guardais los cambios en la plantilla y si todo está bien, cuando visualiceis el blog os aparecerá el icono elegido :).
Primero debemos diseñar nuestro dibujo, da igual el tamaño, puesto que utilizaremos una página web para convertir nuestro diseño en un icono. La página en la que debemos entrar para ello es http://www.chami.com/html-kit/services/favicon/. Lo único que hay que hacer es darle al botón de examinar para buscar nuestro archivo en el ordenador y cuando lo tengamos pinchamos en el botón Generate FavIcon.ico. Pues ya está, ahora sólo tenemos que descargar el comprimido generado a nuestro ordenador y descomprimirlo. Ya tenemos nuestros iconos, estáticos y dinámicos, aunque con blogger debemos utlizar el icono dinámico.
Vamos a comenzar el proceso. Primero vamos a guardar la imagen en el sevidor de Blogger, para ello hacemos una entrada nueva e insertamos la imagen (la que se mueve). Ahora necesitamos el código de esa imagen, para obtenerlo pinchamos en Edición en HTML (está en la parte superior derecha del recuadro en el que escribimos las entradas) y tendremos algo así:
'<'a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://bp2.blogger.com/_sH5-mdzelg4/ Rm-jj8_uUQI/AAAAAAAAAAo/ KeHP18VJrYw/s1600-h/ animated_favicon1.gif"'>' '<'img style="margin: 0pt 10px 10px 0pt; float: left; cursor:pointer;"src=
"http://bp2.blogger.com/_sH5-mdzelg4/
Rm-jj8_uUQI/AAAAAAAAAAo/KeHP18VJrYw/
s320/animated_favicon1.gif"
alt="" id="BLOGGER_PHOTO_ID_5075455143133991170"
border="0" /'>' '<'/a'>'
La parte que está en amarilla es la que vamos a necesitar, así que la guardamos en un documento de texto o la apuntamos, pero exáctamente igual puesto que vamos a modificar el html de la plantilla.
El paso siguiente es entrar en la pestaña Plantilla (del diseño del blog) y luego en Edición en HTML. De lo que sale ahí posiblemente no entendamos nada, pero no importa, tenemos que buscar al principio de ese texto la etiqueta HEAD y justo debajo de ella tenemos que poner lo siguiente, pero atención, los símbolos <> vienen '<' y '>', las comillas esas no hay que ponerlas, solo las pongo yo aquí puesto que es código html y no podría ponerlo de otra forma, entonces sería <>, sin las comillas simples.
'<'link href='http://bp3.blogger.com/
_sH5-mdzelg4/RnFijs_uUUI/AAAAAAAAABI/rdQ_51cWqPg
/s400/animated_favicon1.gif'
rel='shortcut icon' type='image/x-icon'/ '>'
La parte amarilla si os dais cuenta es la misma que copiamos antes, entonces en ese lugar tendréis que poner lo vuestro, ya que ese texto equivale a mi imagen. Pues nada, guardais los cambios en la plantilla y si todo está bien, cuando visualiceis el blog os aparecerá el icono elegido :).
