COMO PONER UN FAVICON Y OTROS TRUCOS PARA BLOGGER

Como antes de la implantación por parte de blogger de realizarse uno mismo  las plantillas yo estaba en blogger, y hacia plantillas para mí o por encargo, manejando css, html etc. pues aquí van algunos trucos sencillos para mejorar vuestras plantillas.

Hablare en este post sobre la eliminación de navbar, el poner un favicon, y los problemas que veo que tienen muchas personas con el alto y ancho de los gadgets o videos que ponen en sus páginas.

Para encontrar con mayor facilidad los códigos en una plantilla html escribiendo ctrl+F os aparecerá una barra de búsqueda.

Primero empezaré con la navbar, eso ya va al gusto de cada uno hay quien la encuentra útil, a otros les molesta, la forma más fácil de eliminarla es añadir antes de <head>

<style type=”text/css”>
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
</style>

Y ya estaría eliminada.

Para colocar un favicon que identifique vuestra página que se verá tanto en las pestañas, como al lado de la url en vez de ese con perdón horrible favicon naranja, tendremos que seguir unos cuantos pasos:

  • Escoger la imagen que deseamos como favicon, ya sea una fotografía, unas letras…

Si lo que queremos es realizar nuestro favicon con letras con photoshop u otros programas es muy fácil, pero si queremos una página que nos los cree existe Cool Text donde encontrareis muchos temas a realizar.

  • Una vez creado el grafico o escogida la fotografía hay que convertirla en formato ico.

Una excelente página donde los crean al instante es Dynamic Drive como veréis hay que subir la imagen, la genera y solo tenéis que guardarla en el ordenador.

  • El siguiente paso es alojarla en un centro de almacenamiento de imágenes.

Si estáis pensando en picasa no da  la dirección url que necesitáis, hay diferentes paginas de hospedaje como es Fileden, Skydrive o archive.org hay muchas y muy buenas.

  • Una vez alojada y obtenida la url la tendremos que introducir dentro de un código, pero existe variaciones de código si aun utilizáis plantillas antiguas o en cambio las nuevas.

Para las nuevas plantillas lo que cambia es que el código se ha de introducir después de <head>y de  <meta content=’IE=EmulateIE7′ http-equiv=’X-UA-Compatible’/> luego hay que volverlo a introducir de la misma forma que en las plantillas antiguas despues de <b:include data=’blog’ name=’all-head-content’/>, hay que introducirlo dos veces porque sino se veria solo en IE pero  en otras plataformas como firefox no.

Para las plantillas antiguas no realizadas con el nuevo generador, buscáis <head> tenéis que introducir el código en rojo justo después de <b:include data=’blog’ name=’all-head-content’/> este sería el resultado:

<b:include data=’blog’ name=’all-head-content’/>

<link href=http://ia700307.us.archive.org/1/items/mafalda_647/favicon.ico ‘ rel=’shortcut icon’ type=’image/x-icon’/>
<link href=http://ia700307.us.archive.org/1/items/mafalda_647/favicon.ico ‘ rel=’icon’ type=’image/x-icon’/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*

El codigo en rojo es el mismo tanto para las plantillas nuevas como las antiguas.

La dirección url que hay entre los códigos en rojo, la tenéis que sustituir por la vuestra, solo os la he puesto como ejemplo, y siempre al final de la url os ha de salir el formato de la imagen ya sea JPEG, PNG o en este caso ico.

Y ya el último tema, gadgets, reproductores de música, videos, que salen de los márgenes de la sidebar (barra o barras laterales) o del main-wrapper (donde escribís los artículos) si tenéis alguna duda del tamaño de ambos en las plantillas antiguas si buscáis:

#main-wrapper {
width: 410px; (este sería el ancho de la zona de escritura) por lo que el video, imagen etc. no puede ser mayor por lo que deberíais modificar el ancho.

En el caso de la sidebar el código a buscar es:

#sidebar-wrapper {
width: 220px; (ancho de la sidebar)

En las nuevas plantillas tanto el ancho de la zona de escritura como de la sidebar la podéis modificar vosotros, así que si veis que los videos, reproductores, imágenes son mayores, ya sabéis que tenéis que modificar el width (ancho) y el height (alto) que normalmente se calcula en px (pixel).

Espero que os haya servido y si tenéis alguna duda o pregunta sobre otro tema no dudéis en lo que pueda os ayudare.

4 thoughts on “COMO PONER UN FAVICON Y OTROS TRUCOS PARA BLOGGER

    1. Yo por suerte o desgracia solo suelo hablar de lo que se y al estar en .com y no en .org no he tocado nada de ese asunto ni comprado para tocar el css en cuanto sepa la primera en publicarlo, aun no he ido ha visitar tu blog ahora voy, pero me da que tú sabes mas que yo. Gracias por el comentario y un saludo😉

      Me gusta

Tu opinión me interesa, compártela aquí : )

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s