El Header o la cabecera del blog es lo primero que verán nuestros visitantes al entrar al blog, por ello su aspecto debe dejar a mejor impresión. A través del diseñador de plantilla lo podemos manipular pero solo podemos cambiar cosas como el color de fondo, color de la letra del titulo y de la descripción. Igualmente existe la posibilidad de incluir una imagen pero aumentaría el peso y el tiempo de carga del blog, lo cual no conviene en el posicionamiento web. En ese ejemplo vamos a tomar la plantilla mínima que con el diseñador de plantilla hice lo siguiente.
Paso 1. Vamos a blogger e ingresamos a la plantilla y buscamos el siguiente código.
/* Header */
.header-outer {background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none;}
.Header h1 { font: $(header.font); color: $(header.text.color); text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);}
.Header h1 a {color: $(header.text.color);}
.Header .description { font-size: $(description.text.size); color: $(description.text.color);}
.header-inner .Header .titlewrapper { padding: 22px $(header.padding);}
.header-inner .Header .descriptionwrapper { padding: 0 $(header.padding)}
Paso 2. sustituimos el código anterior por el siguiente.
/* Header */
.header-outer {/*estilo para el header*/
height:110px; background: -moz-linear-gradient(#00ABE3, #013E77); /* firefox*/
background: -webkit-gradient(linear, center top, center bottom, from(#00ABE3), to #013E77));/* crome*/
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#00ABE3,endColorStr=#013E77);" EndColorStr='#FF333388'); /*internet explorer*/
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #00ABE3), color-stop(1, #013E77)); /*safari*/
background:-o-linear-gradient(top, #00ABE3, #013E77); /* opera */}
/*personalización del título*/
.Header h1 { color: #fffeee; text-align: left; margin:0;font: bold 5em Yanone Kaffeesatz;text-shadow: 0px 2px 2px rgba(0, 0, 0.4, 0);}
.Header h1 a {color: $(header.text.color);}
/*personalización de la descripción del blog, podemos cambiar, tamaño, color, tipo de letra*/.Header .description { color: #fffeee; font-size: 13px; text-align: left; margin:0;}
/*separación entre el título y el texto de la descripción del blog*/
.header-inner .Header .titlewrapper { padding:2px; }
.header-inner .Header .descriptionwrapper { padding: 2px; }
Finalmente obtenemos algo como lo que se muestra a continuación. Parecido a Mi blog en blogger seorimícuaro
Nos vemos en otra seorimícuaro entrada.
