Código de la cabecera Blogger

Vamos a analizar el código de la cabecera en blogs de Blogger. Es conveniente conocerlo para el caso en que queramos hacer alguna modificación a la cabecera, sepamos qué partes del mismo debemos alterar. Plantillas nuevas Tomaremos como referencia la plantilla Simple. Cabecera por defecto: (El título y la descripción están, por defecto, alineados a la izquierda; los hemos puesto en el centro para una mejor presentación del tutorial) Vamos a Editar HTML: Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ► ...y localizamos el siguiente código, correspondiente a la cebecera, poniendo .header-outer dentro del rectángulo de búsqueda (Search): /* 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); } Hemos puesto colores diferentes a los bloques del código para diferenciarlos en la explicación que, de cada uno de ellos, haremos a continuación. Primer bloque Este bloque corresponde a la envoltura de la cabecera; cualquier modificación que hagamos en este bloque de código afectará al fondo de la cabecera, por ejemplo si le cambiamos el color: Segundo bloque Este bloque corresponde al fondo del título del blog; por consiguiente cualquier modificación que hagamos en este bloque de código afectará a dicho fondo, por ejemplo si le cambiamos el color: Tercer bloque Este bloque corresponde a los caracteres del título del blog visto en cada entrada en particular; por consiguiente cualquier modificación que hagamos en este bloque de código afectará a las letras del título del blog visto en cada entrada en particular, por ejemplo si les cambiamos el color: Cuarto bloque Este bloque corresponde a los caracteres de la descripción del blog; por consiguiente cualquier modificación que hagamos en este bloque de código afectará a las letras de la descripción del blog, por ejemplo si les cambiamos el color: Quinto bloque Este bloque corresponde a la sección de la cabecera o espacio que ocupa la cabecera dentro de la envoltura de la misma; cualquier modificación que hagamos en este bloque de código afectará al fondo de la cabecera, por ejemplo si le cambiamos el color: Es conveniente anotar que esta sección de la cabecera está encima de la envoltuta (primer bloque); es por eso que el color de fondo que se verá será el de la sección de la cabecera. Debemos tener cuidado al hacer cambios en las dimensiones de la envoltura y de la sección, procurando que queden iguales ya que, si por ejemplo, la envoltura es más larga que la sección, o viceversa, se nos va a presentar alguna desconfiguración en la ubicación del título y la descripción. Para asegurarnos de que esto no ocurra les ponemos, a las dos, colores diferentes, y dejamos más larga la envoltura que la sección; notaremos la diferencia en el contraste de los colores, entonces modificamos la dimensión de la envoltura hasta igualarla con la sección y después les ponemos el mismo color. Sexto bloque Este bloque corresponde al fondo de la descrición del blog; por consiguiente cualquier modificación que hagamos en este bloque de código afectará a dicho fondo, por ejemplo si le cambiamos el color: Plantillas Antiguas Tomaremos como referencia la plantilla Mínima. Cabecera por defecto: Vamos a Editar HTML: Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ► ...y localizamos el siguiente código, correspondiente a la cebecera, poniendo #header-wrapper dentro del rectángulo de búsqueda (Search): /* Header ----------------------------------------------- */ #header-wrapper { width:660px; margin:0 auto 10px; border:1px solid $bordercolor; } #header-inner { background-position: center; margin-left: auto; margin-right: auto; } #header { margin: 5px; border: 1px solid $bordercolor; text-align: center; color:$pagetitlecolor; } #header h1 { margin:5px 5px 0; padding:15px 20px .25em; line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; } #header a { color:$pagetitlecolor; text-decoration:none; } #header a:hover { color:$pagetitlecolor; } #header .description { margin:0 5px 5px; padding:0 20px 15px; max-width:700px; text-transform:uppercase; letter-spacing:.2em; line-height: 1.4em; font: $descriptionfont; color: $descriptioncolor; } #header img { margin-$startSide: auto; margin-$endSide: auto; } Hemos puesto colores diferentes a los bloques del código para diferenciarlos en la explicación que, de cada uno de ellos, haremos a continuación. Primer bloque Este bloque corresponde al fondo externo de la cabecera; cualquier modificación que hagamos en este bloque de código afectará a ese fondo, por ejemplo si le cambiamos el color: Segundo bloque Este bloque corresponde al fondo interno de la cabecera; cualquier modificación que hagamos en este bloque de código afectará a ese fondo, por ejemplo si le cambiamos el color: Tercer bloque Este bloque corresponde al fondo intermedio de la cabecera; cualquier modificación que hagamos en este bloque de código afectará a ese fondo, por ejemplo si le cambiamos el color: Los anteriores tres fondos están superpuestos, así: ...por consiguiente cualquier modificación que hagamos en las magnitudes (alto o ancho) de la cabecera, la debemos hacer en los tres fondos, guardando las proporciones para conservar la congruencia. Cuarto bloque Este bloque corresponde a los caracteres del título del blog. Por consiguiente para cualquier modificación al texto en el título del blog (color, tamaño de fuente, familia de fuente, etc.) debemos hacerla en este bloque. Quinto bloque Este bloque corresponde a los caracteres del título del blog visto en cada entrada en particular. Sexto bloque Este bloque corresponde a los caracteres del título del blog cuando ponemos el cursor encima y visto en cada entrada en particular. Séptimo bloque Este bloque no desempeña ninguna función.