Ocultar pero no quitar la barra de Blogger

| 0 comentarios

Si no te gusta como queda la barra de Blogger tienes dos opciones: quitarla u ocultarla. En mi caso yo he decidido (después de investigar por ahí) no quitarla, es decir, no la vemos pero está ahí.
He encontrado opiniones para todos los gustos, y la verdad es que decidí no quitarla después de leer este post, el caso es que al poner la imagen de fondo en la página, no se porque, la barra se movió un poco hacia abajo y quedaba muy fea. Por más que le di vueltas al código de la plantilla no conseguí arreglar nada así que volví a "rebuscar" para encontrar el código que me permitiera quitarla y fue cuando encontré este que la oculta.

Hay que pegarlo entre las etiquetas head en la plantilla del blog Edición html

Yo lo he puesto en el CSS antes de ]]></b:skin>:

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

Compartir Enlace

Colocar imagen como cabecera del blog

| 0 comentarios

Para empezar tenemos que alojar la imagen que queremos en algún alojamiento de archivos y,si es gratuito mejor ¿no? yo uso siempre Imageshack y nunca me ha dado problemas, está en inglés pero tiene una interfaz muy intuitiva, o sea, que es fácil de manejar.
Cuando tengas tu imagen alojada copias su ruta.Vas al panel de control de blogger pinchas en “Plantilla” y a continuación en “Edición HTML”.
Buscas el siguiente código:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Añades la url tu la imagen para que aparezca como fondo, dentro del bloque “header”, si quieres eliminar los bordes,borra la línea “border”: border:1px solid $bordercolor;Si tu imagen mide 660px de ancho perfecto, sino puedes establecer otro ancho, si lo que quieres cambiar es la altura puedes añadir el valor height, especificando la altura que quieres. Yo hice mi propia imagen, así que le di el tamaño de la cabecera de plantilla.
Quedaría así:
#header-wrapper {
width:660px;
margin:0 auto 10px;
}
#header {
margin: 5px;height:100px;
background-image: url(http://URL DE TU IMAGEN);
text-align: center;
color:$pagetitlecolor;
}


Usando la vista previa puedes ir variando el alto y el ancho según lo necesites para adaptar la imagen, ya sabes: ancho-width, alto-height.

Actualización
Aunque Blogger actualmente permite subir una imagen directamente a nuestro header desde el panel de edición de elementos, este sistema puede seguir usándose si necesitas añadir la cabecera directamente en el código de la plantilla.
Compartir Enlace