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:

Diseño Blogger2

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.

Cambiar imagen cabecera de blogger

 

 

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.

Cambiar imagen cabecera de blogger vistas dinamicas

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.

About these ads

14 comentarios en “Cómo cambiar la cabecera y el fondo a un blog de Blogger

  1. Pingback: Cómo dejar de seguir un blog en Blogger « elenarueda.com

  2. Acabo de “utilizar” tu código y me va de maravilla,
    El único pequeño fallo que le veo es que al mover la barra lateral de la página principal había abajo, la página se desplaza detrás de la cabecera, creando un efecto no muy elegante
    Se podría corregir ?

    Me gusta

  3. Pues si he probado con varios tamaños y siempre igual
    Este es el código, veras que es el tuyo pero con algunos cambios de formato y CCS adicional para personalizar más mi blog http://peacockrestaurantsabadell.blogspot.com.es/

    * Para quitar el Feedback */ /* Canviar el fondo i Posar la imatge del blog *//
    .feedback {display:none !important;}
    .header-bar {background:url(http://www.automatica.cat/PCock/Tast19juny/logo5.jpg) no-repeat left !important;

    position:absolute !important; }

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

    /* Cambiar la descripción del blog */
    #header.header .header-bar span.title h3
    {position: absolute;
    top: 40px;
    left: 500px;
    right: 1px;
    line-height: 20px;
    color:#ad3a2b !important;}

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

    /*Cambiar el color de la barra de paginas */
    div.header-drawer a {color:#fff !important;}

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

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

    .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 */

    /* Elimina “Buscar”*/
    .header-bar #search{display: none !important;}

    /* Immobitza capálera*/
    #views{ display: none !important;}
    #header #pages, #header #pages:before
    {border-left: 0px !important;}

    #header .header-drawer.sticky{
    margin-top: 0px !important;
    position: fixed !important;
    top: 65px !important;
    -moz-transition: top 0.0s linear 0.0s !important;
    -webkit-transition: top 0.0s linear 0.0s !important;
    -ms-transition: top 0.0s linear 0.0s !important;
    -o-transition: top 0.0s linear 0.0s !important;
    }

    /* Elimina menu dimàmic*/
    #header #pages, #header #pages:before{ border-left: 0px !important; }

    A ver que se pude hacer
    Gracias y buenas noches

    Me gusta

    • Hola Pere,
      El problema radica en que la imagen que has insertado es de un tamaño aproximado a 188×68 px por lo que blogger considera al resto del espacio como espacio transparente.

      Prueba a crear una imagen en photoshop o Gimp de tamaño 1360x68px. Coloca tu logo en la parte de la izquierda y guárdala como jpg. Súbela de nuevo e insértala en el codigo de arriba a ver qué efecto tiene.

      Un saludo
      Elena

      Me gusta

  4. Pingback: Comenzando con Blogger | cursobloggerleon

Anímate,... Deja tu comentario 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