Cómo cambiar la cabecera y el fondo a un blog de Blogger

Hola chicos!

Hoy me han hecho la siguiente pregunta  ¿Cómo puedo cambiar la cabecera y fondo  de Blogger y añadir una imagen?  Hoy os voy a hacer una entrada para explicaros cómo.

 

PLANTILLA NORMAL DE BLOGGER

 

CABECERA

En primer lugar decide qué fotografía colocarás en la cabecera de tu blog.  Recuerda que tiene que tener 950px de ancho.  Puedes combinar tu logotipo con algo de texto o con una imagen representativa de tu blog.

Una vez preparada la fotografía ve al ESCRITORIO de Blogger, en VISIÓN GENERAL seleccionamos  

Nos aparecerá el esquema organizativo de nuestra web y seleccionaremos que queremos editar la CABECERA.  Aparecerá el siguiente cuadro:

Como puedes observar tienes varias opciones en la apariencia de la cabecera.

1. Título del Blog

2. Descripción del blog

3. Añadir Imagen

Te sugiero que o añadas el título y la descripción o sólo una imagen.  Las tres opciones a la vez harán que el cabecero esté demasiado saturado de información. Así que:

1.  Rellena los campos título y descripción

2. Sube la imagen desde tu equipo

3. Selecciona la opción: En lugar del título y la descripción

Pincha a GUARDAR.  Y a partir de este momento te aparecerá la imagen que has seleccionado.

 

 

FONDO 

Si vuestra plantilla es normal, o sea, sin vista dinámica es una acción muy sencilla:

1.  Accede a tu blog y ve al apartado PLANTILLA.
2.  En el apartado PLANTILLA veréis una presentación preliminar y justo debajo un botón anaranjado.  Pinchad en PERSONALIZAR para acceder al diseñador de plantillas.
3.  La cabecera se modifica desde FONDO.  Hacemos click y vemos que nos aparecerá una fotografía llamada IMAGEN DE FONDO con una flecha que señala opciones.  Haz click en la flecha.
4.  Se abrirá un cuadro de diálogo para que elijas la foto que quieres en tu portada.  Pero también te ofrece la posibilidad de customizar la entra simplemente  eligiendo la primera opción SUBIR IMAGEN.  La eliges de entre tus imágenes que tienes en tu ordenador y pinchamos FINALIZADO.

Aquí os dejo un «print-pant» para que sea más fácil de entendimiento.

 

 

PLANTILLA VISTA DINÁMICA DE BLOGGER

Si vuestra plantilla es dinámica, las acciones a llevar van a ser un poco diferente ya que vamos a añadir código de estilos, CSS.  Tened en cuenta que una vez añadida la imagen de cabecera perderéis la barra de PAGINAS que aparece justo debajo de la cabecera.

1.  Accede a PERSONALIZAR, en el aparado PLANTILLA y en el diseñador de plantillas ve a AVANZADO.

2.  En el apartado AVANZADO, la última opción que aparece es AÑADIR CSS.  Elije la opción y te aparecerá un cuadro para rellenar con el código que te dejo aquí:

.feedback {display:none !important;} /* Para quitar el Feedback */

.header-bar {background:url(PON AQUÍ LA URL DE LA FOTO DE FONDO) no-repeat left !important; position:absolute !important; }  /* Cambiar el fondo */

.header h1 {color:white !important;text-shadow:none!important;margin-left:200px !important; font-size:42px !important; font-family: Century Gothic, sans-serif !important; }  /* Cambiar el color del título del blog */

div.header-drawer {background:orange !important;padding-left:200px !important;position:absolute !important;} /* Cambiar el color de la barra de paginas */
div.header-drawer a {color:#fff !important;} /* Cambiar el color de la letra de la barra de paginas */

#main {background:#f8f8f8 !important;} /* Cambiar el fondo de las entradas*/

.title {font-size:40px !important;border-bottom:4px solid orange !important; } /* Cambiar el título de las entradas*/

.ribbon .top {background:orange !important;} /* Cambiar el color del lazo de fecha */
.ribbon .bottom {background:orange !important;}
.ribbon .tail {display:none!important;}

.article-footer {width:800px !important; background:orange !important; color:#fff !important;} /* Cambiar el pie de pagina de la entrada*/

.labels, .label {color:#fff !important;} /* Cambiar el color del texto de las etiquetas*/

.publish-info, .time {color:#fff !important;} /* Cambiar el color quien ha publicado */

Fuente: http://www.ayuda-bloggers.info

3.  Puedes ver que he tintado en rojo la parte donde pegarás la URL donde tienes alojada la imagen! pero ¿cómo obtener una URL de una imagen que tenemos en nuestro ordenador?  Pues a través de páginas web como : http://www.imageurlhost.com (Tal vez  la web no responda, busca otras webs que ofrezcan el mismo servicio)

4.  Edita cada una de las opciones según tu gusto… En verde te he escrito qué significa cada una de las líneas.

Ahora te toca a ti practicar en el diseño de tu blog!

Suerte y un saludo!

El pase de diapositivas requiere JavaScript.