La estructura de las plantillas de Blogger y de cualquier página web está formada por contenedores, dentro de estos se ubican los diferentes elementos de la estructura, como son la cabecera, el cuerpo, el pie de página, y muchos más, todos estos son identificados con un atributo Div.
Si contiene algo, ese algo se puede editar de infinitas formas, incluyendo el fondo, a cada uno de estos contenedores podemos aplicarle un determinado fondo, de esta manera se puede empezar lo que sería un diseño agradable y salir un poco de las cosas planas que traen por defecto cada plantilla.
Ejemplo:
<div class='algo'>
</div>
Esto es la estructura HTML, para aplicar los estilos deben ubicar la hoja de los mismos dentro de su platilla, en este caso es dentro de la línea del <b:skin> que es donde van todos los estilos.
Para aplicarlo seria de esta forma:
.algo {
...Aquí van todos los estilos que le queramos agregar…
}
Hay que recordar siempre que debemos aplicar la etiqueta de estilo con corchetes tanto para abrir como para cerrar, si no se aplica uno de estos la plantilla puede quedar mal formada.
Para agregar un determinado fondo el atributo seria denominado background, esto no es más que el fondo de cada cosa de la estructura, para aplicarlo hay que agregar el color y se aplica con una paleta de colores RGB como la que vemos en Photoshop, por ejemplo un color rojo sería de esta manera: dd1919
Y para aplicarlo basta agregar el simbolo numeral # junto a la etiqueta de cierre que es el punto y coma ;
El ejemplo completo sería de esta manera:
Dentro del HTML ...
<div class='algo'>
</div>
Dentro de la hoja de estilo.Si contiene algo, ese algo se puede editar de infinitas formas, incluyendo el fondo, a cada uno de estos contenedores podemos aplicarle un determinado fondo, de esta manera se puede empezar lo que sería un diseño agradable y salir un poco de las cosas planas que traen por defecto cada plantilla.
Ejemplo:
<div class='algo'>
</div>
Esto es la estructura HTML, para aplicar los estilos deben ubicar la hoja de los mismos dentro de su platilla, en este caso es dentro de la línea del <b:skin> que es donde van todos los estilos.
Para aplicarlo seria de esta forma:
.algo {
...Aquí van todos los estilos que le queramos agregar…
}
Hay que recordar siempre que debemos aplicar la etiqueta de estilo con corchetes tanto para abrir como para cerrar, si no se aplica uno de estos la plantilla puede quedar mal formada.
Para agregar un determinado fondo el atributo seria denominado background, esto no es más que el fondo de cada cosa de la estructura, para aplicarlo hay que agregar el color y se aplica con una paleta de colores RGB como la que vemos en Photoshop, por ejemplo un color rojo sería de esta manera: dd1919
Y para aplicarlo basta agregar el simbolo numeral # junto a la etiqueta de cierre que es el punto y coma ;
El ejemplo completo sería de esta manera:
Dentro del HTML ...
<div class='algo'>
</div>
.algo {
background: #dd1919;
}
En funcionamiento quedaría algo así:
Estos contenedores no tienen nada, es decir solo estan vacíos, entonces a lo que vamos es que cada cosa que se ve en la estructura del blog está dentro de un contenedor, podemos aplicar los cambios que queramos ya que todo está ahí.
Para aplicar un color de fondo al cuerpo del post ubicamos esta etiqueta:
.post-body {
...Aquí aplicamos el fondo como lo hicimos en ese ejemplo...
}
Aplicar fondo a la cabecera o header, buscamos esta etiqueta:
.header-outer {
...Aquí va el color...
}
De esa manera se pueden ubicar todos los elementos y cambiarle los colores, cabe destacar que estas cosas se hacen muy fácil mediante el diseñador de las plantillas, pero yo en lo personal prefiero hacerlo manualmente ya que cuando aplicas cambios con el diseñador todo queda desordenado, y además así aprendemos algo de diseño web, aunque sea amateur.
No hay comentarios:
Publicar un comentario