Quitar la barra de Blogger y cambiar el favicon

Seguimos una semana más con nuestros tutoriales para Blogger, esta semana vamos a tocar cosas estéticas, como ya en anteriores hemos hecho con el nuevo editor de temas de Blogger, o bien para cambiar la cabecera de un blog de Blogger.

Algo que comparten todos los blogs de Blogger son dos cosas muy características: la barra de navegación superior y el favicon (el pequeño icono con la letra B al lado de la barra de direcciones).
Como digo, son dos cosas características pero que puede que no queramos tener. Ya sea por diferenciar nuestro blog un poco del resto de los de Blogger y hacerlo más nuestro o porque simplemente no nos gusta.

El caso es que si cumplís alguna de las premisas de arriba no hay de qué preocuparse ya que es muy fácil eliminar la barra de navegación y cambiar el favicon. Vamos a ello.

Eliminar la barra de navegación

Más que eliminarla os voy a dar dos opciones, quitarla por completo o hacerla invisible y que sólo se muestre cuando situemos el ratón en la parte superior del blog. Lo primero de todo y que siempre remarco es que guardemos una copia de nuestra plantilla por si acaso hacemos algo mal poder dejarlo como antes. Ahora vamos al tema.

Para eliminarla totalmente lo que tendremos que hacer es ir a “Diseño” – “Edición de HTML” y buscar donde ponga

]]></b: skin>

Una vez encontrada esa línea tenemos que pegar justo encima el siguiente código:

#navbar-iframe {
opacity:0.0;
filter:alpha(Opacity=0)
}

Con esto la barra desaparecerá para siempre. Pero si queremos hacer lo que he comentado de que sea visible si dejamos el cursor en el hueco que ha dejado tendremos que pegar el siguiente código justo encima del que acabamos de pegar.

#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100)
}

ocultar barra de navegación

Cambiar el favicon

Como ya he comentado antes, el favicon es ese pequeño icono con la letra B de Blogger que está en la barra de direcciones o en las pestañas de nuestro navegador. El icono en sí no es feo, pero es el mismo que llevan por defecto todos los blogs de Blogger, por lo que si queremos personalizar un poco más el blog no está de más que lo modifiquemos a nuestro gusto.

Lo primero será crear nuestro propio favicon. Para ello debemos saber que es un icono de 16×16 píxeles y tiene que tener el formato .ico.
Así que tendremos que crear una imagen de 16×16 píxeles y luego pasarla a ese formato. Para ello podemos utilizar cualquiera de estas dos webs que nos transforman nuestra imagen al formato deseado: Web Script Lab o Dynamic Drive.
Con el icono ya en el formato adecuado tendremos que alojarlo en alguna web, por ejemplo en nuestro Dropbox o Fileden o SkyDrive.

Lo siguiente será ir a “Diseño” – “Edición de HTML” y tenemos que buscar la línea donde ponga:

<head>

Justo debajo de ella pegaremos lo siguiente:

<link href=’url_imagen.ico’ rel=’shortcut icon’ type=’image/x-icon’/>

<link href=’url_imagen.ico’ rel=’icon’ type=’image/x-icon’/>

Deberemos cambiar donde pone “url_imagen.ico” por la dirección de nuestro icono.

Y sin más, de una manera tan fácil ya tendremos nuestro favicon propio, a nuestro gusto y totalmente personalizado.

Como siempre, para cualquier duda usad los comentarios y estaré encantado de ayudaros.
¡En dos semanas más!

  1. Buen post sobre personalización de nuestro blog desligándolo de las omnipresentes marcas que deja la plataforma Blogger. Era una de las cosas que me echaba para atrás a la hora de escoger Blogger como plantilla.
    Saludos

  2. Hola: en la plantilla de mi blog no encuentro exactamente ]]> sino
    <title><data:blog.pageTitle/></title>
    <![CDATA[/*
    ¿Pego las líneas que nos das entre estas dos o me estoy equivocando de sitio?
    Gracias

  3. ¿Te refieres a la parte de la barra de navegación o a la del favicon?
    Si es a lo primero, te tiene que salir la línea de “]]>“.
    ¿Tienes marcado lo de “Expandir plantillas de artilugios”? Márcalo a ver si así lo ves mejor.

    Ya me dices 🙂

  4. Álvaro, era sobre la barra, ya lo encontré y resuelto como podrás comprobar, gracias por todo 😉

  5. Gracias Martín!
    Ahora ya ves que puedes tener un blog en Blogger sin que sea tan parecido al resto, ya dedicaré otro post a cómo tener nuestro propio dominio y así será más personalizado aun.

    Un saludo 🙂

  6. […] Quitar la barra de Blogger y cambiar el favicon […]

  7. Clara Alvarez 15-4-2010, 14:14

    Hola,
    cuando pego el código y cambio la url de mi imagen, pero al guardar me dice.

    Open quote is expected for attribute “{1}” associated with an element type “href”.

    ¿qué es lo que hago mal?

    Muchas gracias

  8. Pues no te sabría decir bien, ¿tienes la imagen bien alojada en el formato y tamaño correcto y pones bien el enlace?

  9. Hola Álvaro. A mí también me pasa lo mismo. Y a priori, creo que tengo el icon bien alojado… esta es su dirección:

    http://pti2aw.bay.livefilestore.com/y1p4-2GVbWx

    ¿Qué puede pasar?

    ¡GRACIAS!

  10. Hola, me sirvio mucho los datos que proporcionas. Pero tengo un nuevo problema: unas lineas celestes recorren perpendicularmente todo mi blog
    http://balletperu.blogspot.com/
    creo que tienen que ver con los margenes (que tambien los visualiso en el sidebar, pero estas se encuentran bien encuadradas). SOS, por favor.

    Buen fin de semana.

    mi correo,

  11. Para una mejor solucion utiliza este code

    #navbar-iframe {
    visibility:hidden;

    }

    El problema es que con lo que se plantea la barra sigue ahí, incluso responde a los eventos del Mouse …

  12. No funciona eso de cambiar el icono…
    aun cuando ya no salga el error del xml que han mencionado…
    alguna idea?? observo varios blogs que si han cambiado su icono.. pero hay varios de los aqui citados que no han cambiado…

Comments are closed.

Shares
Share This

Share This

Share this post with your friends!