13

Ponerle cabecera a la plantilla Dots

Me preguntan esta tarde como poner una imagen en la cabecera de la plantilla Dots de Blogger. Esta plantilla no tiene cabecera por lo que es imposible añadir una imagen con el nuevo sistema que nos ofrece Blogger.
Los que usen esta plantilla y quieran tener la posiblidad de añadir de esta manera la imagen a su blog, tendrán que añadirle una cabecera a su plantilla:

Paso I

Vamos a plantilla -html, y buscamos esto en el CSS casi arriba del todo:

#header-wrapper {
display: none;
}

Eliminamos esa parte del código y lo sustituimos por esta otra:
#header-wrapper {
width:700px;
background:#ffffff;
margin:0 auto 10px;
border:1px solid ;
}
#header {
margin: 5px;
border: 1px solid ;
text-align: center;

}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {

text-decoration:none;
}
#header a:hover {

}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
}

Abajo, en el html de la plantilla, buscamos esto:
<div id='outer-wrapper'><div id='wrap2'>

Y justo después de esas líneas, añadimos esto:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3'
showaddelement='yes'>
<b:widget id='Header2' locked='false' title='XXXXXXXXXXX (Header)'
type='Header'/>
</b:section></div>

Donde aparecen las XX es donde luego saldrá el título del blog una vez guardados los cambios, no hay que hacer nada, sale automáticamente.

Ya tenemos la nueva cabecera, y ya podemos subir una imagen desde el PC con el nuevo sistema de Blogger, se verá así más o menos:


Si queremos quitarle los bordes en #header-wrapper { y en #header { cambiamos en "border" el 1px por el 0px.

Paso II (opcional)

Ahora eliminaremos la antigua cabecera que está al principio de la sidebar, para hacer esto iremos de nuevo a la parte del CSS y localizaremos este código, eliminándolo por completo:
/* Title & Description
----------------------------------------------- */

.Header h1 {
margin:0 0 .5em;
line-height: 1.4em;
font: $pagetitlefont;
color: $pagetitle;
}
.Header h1 a {
color:$pagetitle;
text-decoration:none;
}

.Header .description {
margin:0 0 1.75em;
color: $blogDescriptionColor;
font: $blogDescriptionFont;
}

Más abajo dentro del código HTML, localizamos en el comienzo de la sidebar la línea que corresponde a la cabecera antigua y la eliminamos:
<b:widget id='Header1' locked='false' title='XXXXXXX (cabecera)' type='Header'/>

Cuando intentamos guardar los cambios, nos aparecerá un mensaje que nos advierte de que la cabecera va a ser eliminada:

Están a punto de suprimirse los artilugios
Por favor, confirma que los siguientes artilugios deben borrarse. Se borrará toda la información de configuración de los artilugios.

* Header1

Entradas Relacionadas:

13 comentarios:


Gabriela

This comment has been removed because it linked to malicious content. Learn more.

Angie Sandino

Yo tengo esa plantilla, aunque no sé si me gustaria cambiarla, me guardo el link por si algún dia amanezco creativa y me robo tu banner para enlazarte...

Un beso para mi Rosa...! me acuso de estarte leyendo via google reader hace casi un mes y por eso no me veis... pero ya no lo hare, porque no quiero que no me veas...

Cariños!

Rosa

Hola gabriela, claro que puedes, lo miro y te mando las instrucciones al email que tienes en tu perfil ¿ok?

Rosa

angie, cielo, yo también ando de incognito, jeje, de hecho anoche estube de visita en tu "casita" pero pasé casi de puntillas, abrazotes!!!

Rosa

Gabriela, no se que pasa que no me deja mandarte el email, te lo pongo aquí:

En body { añadimos la url de la imagen de fondo, he puesto la del blog de tu ejemplo, para que pruebes:
Quedará asi:
body {
background:url(http://img384.imageshack.us/img384/637/fallftile01qw2.gif);

Si además no quieres que el fondo suba y baje a la vez que la otra imagen cuando movemos la página, a lo anterior añades:
background-attachment: fixed;

La otra imagen, la que rodea sidebar y entradas la ponemos aquí:
#outer-wrapper {
background:url(http://img384.imageshack.us/img384/9029/fallbg03gp2.gif);

¡Suerte!

Gabriela

gracias rosa:me sirvio mucho el dato y lo instalé de una en mi plantilla
lo unico que eso de la background-attachment: fixed; no me resultó parece. gracias.

elenilla69

Hola!! He intentado hacer lo que indicas en tu post, pero a la hora de guardas los cambios me indica lo siguiente. Se ha encontrado más de un artilugio con el ID: Header1. Los ID de artilugio deben ser exclusivos.

¿Podrías echarme una mano?

Muchas gracias y uno besito.

Rosa

elenilla69, tienes toda la razón.
Verás, la entrada tiene bastante tiempo y Blogger ha introducido algunos cambios en las plantillas desde entonces...lo siento, no se me ocurrió revisar esto.

He actualizado la entrada, así que vuelve a seguir los pasos y no creo que tengas problema...

elenilla69

Muchas gracias Rosa!
La verdad es que tu blog es de gran ayuda para quienes estamos empezando.
Uno besito.

Anónimo

Hola intente cambiar la cabecera tal como lo indicas, la pude modificar, pero la parte donde da la bienvenida al blog, me paso para la parte inferior del blog y no allo como subirla hacia la parte izquierda como sale en la plantilla normal dots, :(:(:(, si me puedes ayudar, muchisimas gracias, soy muy nueva en esto

Rosa

Anónimo, si has seguido los pasos correctamente esa parte debería haber desaparecido...
No obstante, no puedo ayudarte sin ver el blog...

Sidhe Terra d'Abaloris

Hola,
He intentando cambiar la cabecera de la plantilla Dots y cuando quiero tener una vista previa me pone esto:
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: Element type "b:widget" must be followed by either attribute specifications, ">" or "/>".
He copiado (Ctrl+C) tus indicaciones y después las he pegado (Ctrl+V) No sé que he podido hacer mal.
Gracias por anticipado.

Rosa

Sidhe, pues ese mensaje lo que viene a decir es que te falta un cierre en el widget, probablemente una /...asegúrate de haber copiado todo correctamente.

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S