THECIRCUS: Edita tu fotter o header!

Hola mis adorables astronautas! (Aclaro: adoro sin motivo alguno a los astronautas...)

¿Como se encuentran el día de hoy? Yo demasiado alterada, se supone que hoy me dan la nota de un final... esperemos que toda me ande bien, ~~sino tendré que suspender una semana el sorteo~~.

Recuerdo que en una entrada de respuestas a comentarios, explique como encontrar en el código de tu plantilla el pie de pagina, pero nunca dedique un tutorial a esto mismo, así que hoy voy a explicar como editar el Footer de tu blog o el Header.

Bien, así como no todas las plantillas del diseñador traen el mismo CSS, vamos a directamente añadir los efectos tengas la plantilla que tengas para entender mejor:

Edita tu Header:

Primero que nada, nos dirigimos a Plantilla/Edición HTML/ & buscamos (CTRL + F) la siguiente linea:

]]></b:skin>

ARRIBA de esta colocamos lo siguiente:

.header-outer {
margin-top: -30px!important;
background-image: url('URL DE TU IMAGEN') fixed; /* IMAGEN DE FONDO */
border-bottom: 1px solid #FFFFFF; /* BORDE INFERIOR */
box-shadow: 1px 1px 3px #000000; /* SOMBRA */
}
.Header h1 { /* TITULO */
text-align: center; /* POSICIÓN */
text-shadow: 1px 1px 3px #000000; /* SOMBRA */
}
.Header h1:HOVER { /* TITULO HOVER */
color: #FFFFFF; /* COLOR */
text-shadow: 1px 1px 3px #000000; /* SOMBRA */
}
.Header .description { /* DESCRIPCIÓN */
color: #FFFFFF!important; /* COLOR DEL TEXTO */
text-align: center; /* POSICIÓN DEL TEXTO */
font-style: italic;
background: #FFFFFF; /* COLOR DE FONDO */
padding: 5px;
border-radius: 222px; /* BORDES REDONDEADOS DEL FONDO */
text-shadow: 1px 1px 3px #000000; /* SOMBRA DEL TEXTO */
}

Luego editas lo marcado & listo!

Como podrás observar, al comienzo del código, solo puedes cambiar la imagen de fondo, ya que si quieres cambiar el "color", esta es una opción que traen todas las plantillas del diseñador de blogger al igual que el "color del titulo", estas opciones pueden editarlas desde Plantilla / Personalizar / Avanzado / & alli buscas "Titulo del blog", así al igual que el tipo de letra.

Edita el Footer:

Bien, aquí vamos a editar el "Pie de pagina" donde comúnmente se encuentra los créditos de la plantilla y demás: el gadeget de ·Reconocimientos".

Nos dirigimos a Plantilla/Edición HTML/ & buscamos (CTRL + F) la siguiente linea:

]]></b:skin>

ARRIBA de ella colocaremos:

.footer-fauxborder-left { /* FOTTER*/
border: 1px solid #FFFFFF; /* BORDE */
background-color: #FFFFFF!important; /* COLOR DE FONDO */
background-image: url('URL DE TU IMAGEN')!important; /* IMAGEN DE FONDO */
box-shadow: 1px 1px 3px #000000; /* SOMBRA */
color: #FFFFFF; /* COLOR DEL TEXTO */
border-radius: 0px; /* BORDES REDONDEADOS */
}
.footer-outer h2 { /* TITULOS GADGET DEL FOTTER */
color: #FFFFFF!important; /* COLOR DEL TITULO */
background: #000000; /* FONDO */
padding: 7px;
border: 1px solid #FFFFFF; /* BORDES */
text-shadow: 1px 1px 3px #000000; /* SOMBRA DEL TITULO */
border-radius: 0px; /* BORDES REDONDEADOS */
}
.footer-outer .widget { /* TITULOS GADGET DEL FOTTER */
background: #000000; /* FONDO */
padding: 7px;
border: 1px solid #FFFFFF; /* BORDES */
border-radius: 0px; /* BORDES REDONDEADOS */
box-shadow: 1px 1px 3px #000000; /* SOMBRA */
}

Luego editas lo marcado & listo!

Así, como en el fotter se le pueden colocar gadgets, dejo en el mismo código CSS como editarlos, para que puedas colocarlos sin problema si colocas una imagen de fondo (si no le das fondo a los gadget, no se podrán leer bien, ya que quedan transparentes!).