Personalizando el blogger #5 – Inclusión de un Favicon

¿Qué es un favicon?
Del inglés favorites icon (icono de favoritos), también conocido como icono de página, es una pequeña imagen asociada con una página o sitio web en particular.

Por ejemplo algunos favicons famosos son el de Wikipedia Wikipedia, o el de Yahoo! Yahoo!.

Si nos fijamos, nuestro favicon por defecto es el propio de Blogger:

Blogger también permite que cambiemos nuestro favicon al blog.
Vamos a ver cómo hacerlo de una manera sencilla, quedará de la siguiente forma:

1 – Primero, deberemos de crear ésta imagen que se mostrará para nuestro blog. Ésta imagen debe de ser cuadrada y del tamaño que queramos, ya que luego reduciremos a la hora de hacer el icono. Yo por ejemplo he realizado la mía en tamaño 160×160, es ésta:

2 – Una vez tengamos ésta imagen deberemos de realizar nuestro icono a partir de ella. Éste icono deberá tener formato .ico y un tamaño de 16×16. Refiriendome al formato .ico no tenemos porqué seguir ni hacer este paso de ésta manera, pero ciertos buscadores (Explorer) no admitirán otros formatos (JPG,PNG, etc) que sí admiten el resto de buscadores (Firefox, Opera, Chrome).
Podemos usar distintos servicios Web que nos ayudarán en ésta conversión de tamaño y formato para nuestro favicon.
Yo, para éste ejemplo, usaré: favicon.cc que vemos en la siguiente imagen:

3 – Hacemos click en “Import Image“, seleccionamos nuestra imagen y hacemos click en “Upload“. Se mostrará entonces nuestro favicon en el editor y podremos modificar colores, transparencias, etc. Incluso disponemos de un “Use Animation” en el que podremos incluir más frames de nuestra imagen modificada, haciendo que nuestro favicon parezca que tenga movimiento.
Disponemos tambien de una vista “Preview” de cómo quedará nuestro favicon en una barra de direcciones.

4 – Una vez hayamos hecho los cambios oportunos, si es que queremos hacer alguno, podremos descargar nuestro favicon clickeando en “Download Favicon“. Y ya disponemos de nuestro favicon en formato .ico y tamaño 16×16.

5 – Ya realizado el favicon deberemos alojarlo (subirlo) a algún servicio de hosting. Yo por ejemplo lo subiré a mi cuenta de DropBox.

6 – Por último, editaremos nuestra plantilla de la misma forma que hacíamos en otras entradas. Iremos a “Diseño” – “Edición de HTML” y en nuestra plantilla buscaremos el texto: e insertaremos antes de él lo siguiente:

<link href='URL-de-tu-favicon' rel='shortcut icon'

type=’image/x-icon’/>

Modificando y cambiando el texto URL-de-tu-favicon por la dirección de nuestro favicon.Y listo, ya tendremos nuestro favicon para nuestro blog.

Entradas y enlaces relacionados:
http://es.wikipedia.org/wiki/Favicon
http://granisla.blogspot.com/2006/07/cmo-usar-un-favicon-en-blogger.html
http://www.favicon.cc/

Personalizando el blogger #2 – Cambio de Fondo

Bueno, antes de introducir alguna otra forma de personalización para nuestro blogger, no quería dejarme este paso sin señalarlo en una nueva entrada:

El cambio de Fondo o Background para nuestro blog.

Lo señalo en una nueva entrada ya que muchos usuarios sólo desean realizar un cambio como éste ya que jugando luego un poco con las opciones de Diseño que ofrece el propio blogger (Fuentes y colores, cómo se veía en otra entrada anterior) se pueden conseguir diseños personalizados muy buenos.
Para éste cambio, deberemos modificar el XML de nuestra plantilla a mano, nosotros mismos. Ésta tarea parece algo complicada cuando no estás metido en el mundillo, pero animaros a probarla, no se corre un gran riesgo ya que modificaremos apenas una línea en éste paso. De verdad, animaros que es muy fácil.
Para modificar éste XML deberemos ir a “Personalizar” “Diseño” y “Edición de HTML“.

Aquí, encontraremos una pantalla como ésta:

Distinguimos en la imagen anterior 2 apartados: A y B.

– El apartado A es el correspondiente a “Realizar copia de seguridad/Restaurar plantilla” donde disponemos de la opción “Descargar plantilla completa“, gracias a la cual podremos descargar la plantilla XML con los cambios que hayamos realizado en nuestro XML. 
Muy útil para situaciones como en la que nos encontramos, en la que haremos cambios en el código que llegado el caso, podremos invertir subiendo de nuevo éste archivo XML con la opción “Examinar” y “Subir” que tenemos disponible.


 – El apartado B es el propio código en sí. Aquí modificaremos lo oportuno en éste caso. (En la imagen anterior se ve parte de mi código; que no tiene porqué ser igual ni mucho menos con vuestro código específico).


Bien, sabido ésto, buscamos en éste código:

* — basic html elements — */ este es el codigo inicial
body {

padding: 0;
margin: 0;
fontsize: small;
color: $textcolor;
background:url( NUESTRAFOTOGRAFIA*) fixed no-repeat top left;

}
textalign: center;
}

Observamos concretamente la línea:
     background:url( NUESTRAFOTOGRAFIA*) fixed no-repeat top left;

Deberemos sustituir el texto en rojo por la dirección de nuestra fotografía.
Yo, por ejemplo, he subido una fotografía a blogger para usar como fondo, es ésta:

Por lo que sustituiré el texto en rojo por la dirección de mi fotografía, quedaría así:
background:url(http://2.bp.blogspot.com/_k-z9yPHb3Tg/S_A98VpGkeI/AAAAAAAAAOo/lkdcyRP5i78/s1600/banner+twitter2_8.jpg ) fixed no-repeat top left;

Podéis hacer distintas pruebas con imágenes que encontreis en la web, por ejemplo googleando:


O podeis subir vuestro propio fondo a cualquier sitio de almacenamiento (hosting) de imágenes e incluir la dirección en esa línea que modificabamos.

**Si no sabeis cómo realizar éste paso podeis subir imágenes de manera fácil y sencilla  a vuestro propio blogger creando una nueva entrada o post y haciendo click en “Insertar Imagen” como se observa en:

 Al hacer Click en “Insertar Imagen” se abrirá una pantalla en la que haremos click en “Examinar” para elegir la ubicación en donde se encuentra la imagen que queramos subir y “Aceptamos“, tal y como se ve en:

 Una vez subida, para conocer la dirección de ésta imagen, haremos click derecho sobre la imagen y seleccionaremos “Copiar la ruta de enlace“, y ya tendremos nuestra dirección de la imagen que acabamos de subir. Ya subida la imagen podremos cerrar ésta Nueva Entrada que acababamos de crear.

Por ejemplo, para la imagen anterior, si hacemos este procedimiento (“Copiar la Ruta del enlace“) la dirección que obtendremos será:

http://2.bp.blogspot.com/_k-z9yPHb3Tg/S_FlT4EvErI/AAAAAAAAAQg/KKiTcbJa-H8/s1600/A%C3%B1adir+Una+Imagen.JPG

Tambien existe la posibilidad si ya sois un poco más manitas y manejais algún programa de retoque fotográfico, personalizar alguna imagen concreta, tal y como se ve en la imagen de fondo de mi blogger, en la que existen a los lados mi nick en varios colores, por ejemplo.

Y eso es todo, una vez cambiada ésta dirección en la línea correspondiente de nuestro XML haremos click en “Guardar Plantilla” y ya podremos ver nuestra nueva apariencia (fondo) del blog. Además, acordaros de que si algo no nos ha gustado, podemos volver a subir la plantilla que teniamos antes de los cambios y de esa manera volver al estado en que nos encontrabamos antes de éste cambio.

Entradas relacionadas:
http://cuandoeltiempoteatrapa.blogspot.com/2010/05/personalizando-el-blogger.html