La idea es no copiar y pegar el código que "nos dan hecho", esta vez se trata de conseguir entender bien cómo y porqué se hace cada cosa en Blogger.
Con el mismo espíritu de dominar el código que lo conforma y la filosofía del "poco a poco", hoy vamos a aplicar estilos al cuerpo del Blog.
Muchos Bloggers desean cambiar el estilo del fondo de su Blog, su cabecera, el pie, la barra lateral... sin embargo, ante la falta de tiempo y de conocimientos suelen copiar y pegar códigos que existen por Internet para satisfacer sus necesidades. Esta vez te propongo aprender realmente cómo cambiar la presentación, los estilos y saber con exactitud porqué y dónde hay que tocar. Acompáñame con un ejemplo práctico, sencillo, explicado sin terminología técnica y con sencillez para que aprendas a dominar Blogger y en este caso, el uso de las hojas de estilo.
Vamos a dedicar una entrada para cada contenedor que creamos en nuestro Blog de pruebas. Si no has creado un blog de pruebas, igualmente podrás leer la guía para adquirir los conocimientos, ¡aunqe no hay nada como la práctica para aprender mejor los conceptos!.
NOTA IMPORTANTE: Se evita utilizar terminología compleja o excesivamente técnica en esta guía para acercar con la mayor simplificación posible el código a todas las personas que deseen conocerlo. No se va a utilizar en ningún momento palabras o nomenclatura de programación convencional, esta guía va dirigida a aquellos que no tienen ninguna o poca experiencia en programación de páginas web.
¿Qué vamos a hacer?
Como tenemos creados nuestros primeros contenedores del Blog (el contenedor para la cabecera, el cuerpo, la barra lateral y el pie), primero le vamos a dar "presentación", "estilo", al "fondo" de nuestro Blog.
Primero repasaremos la teoría, la iremos conceptualizando y finalmente realizaremos un ejemplo práctico paso a paso.
¿Qué es y dónde se encuentra el cuerpo del Blog?
El verdadero cuerpo del Blog es el "Body", es el "fondo" de todo lo que vamos a poner en nuestro Blog:
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
AQUÍ ESTÁ EL CUERPO DE TODO EL BLOG, EL "FONDO" DE TODO EL BLOG.
</body>
</html>
Su extensión va desde el comienzo de la etiqueta <body> hasta su cierre con </body>.
Es importante no confundir el cuerpo del Blog <body>, con el contenedor <div id="cuerpo">. Entendamos bien las diferencias para comprender cómo funciona el <body>.
¿Cómo funcionan el <Body> y los contenedores <div> del Blog?
Simplificándolo, el <body> es el la base donde se "dibujan", donde "flotan", los contenedores <div>.
Por ello el <body> contiene en su interior a todos los contenedores que creamos:
<body>
<data:blog.title/>
<div id="cabecera">
</div>
<div id="cuerpo">
</div>
<div id="barra-lateral">
</div>
<div id="pie">
</div>
</body>
Así pues, el "contenedor" <div id="cabecera"> , <div id="cuerpo"> ,<div id="barra-lateral">,<div id="pie"> se encuentran sobre la base del <body> y "se dibujan" o "flotan" en su interior.
Como puedes ver, el <body> de la plantilla en Blogger, es el "lienzo" donde irás colocando y dibujando los componentes que desees dentro de los contenedores que crees.
Así pues, con el <body> y los <div> tenemos montado todo el "esqueleto", la "estructura" que nos servirá para después ir metiendo los componentes que deseemos utilizar (cajas de búsqueda, entradas del blog, anuncios, imágenes, cajas de suscripción, iconos, menús.... todo lo que puede verse en un Blog).
¿Cómo se ve esta estructura en el Blog una vez "puesta"?:
Sencillamente dándole una presentación para que se "vea". Con el ejemplo de plantilla que llevamos hecho hasta el momento, tenemos toda la "base", "esqueleto", "estructura" (como prefieras llamarlo) definidida, pero no se puede ver nada porque no tiene una presentación que haga que se vea en pantalla.
Este es el ejemplo que estamos manejando actualmente:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
]]></b:skin>
</head>
<body>
<data:blog.title/>
<div id="cabecera">
<b:section id="header" class="header" showaddelement="yes" />
</div>
<div id="cuerpo">
<b:section id="main" class="main" showaddelement="yes" />
</div>
<div id="barra-lateral">
<b:section id="sidebar" class="sidebar" showaddelement="yes" />
</div>
<div id="pie">
<b:section id="footer" class="footer" showaddelement="yes" />
</div>
</body>
</html>
Si estás utilizando el Blog de pruebas, podrás ver que cuando le indicas "ver Blog", a pesar de todo el código escrito no aparece nada en pantalla, sólo el título:
Esto es porque todavía no le hemos aplicado estilos a nada, nada tiene presentación todo es "invisible" pero está ahí ;)
Hay que utilizar "reglas" o "normas" de presentación que se detallan en la hoja de estilos para "decirle" al cuerpo de la plantilla y a los contenedores cómo deben mostrarse en el navegador, qué presentación deben tener.
¿Dónde están las hojas de estilo para mi plantilla?
Volviendo a la plantilla de pruebas, al igual que en cualquier plantilla Blogger normal, se encuentran dentro de las etiquetas <b:skin><![CDATA[ y su cierre ]]></b:skin> contenidas en el <head> o cabeza del Blog. Cuando termina el <head> con su etiqueta de cierre </head> después viene el <body> o cuerpo de la plantilla que antes explicamos (donde se "dibujan" los contenedores <div> que almacenarán los conponentes de la plantilla).
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/*Aquí dentro van a ir los estilos para la presentación del Blog. */
]]></b:skin>
</head>
<body>
<data:blog.title/>
<div id="cabecera">
<b:section id="header" class="header" showaddelement="yes" />
</div>
<div id="cuerpo">
<b:section id="main" class="main" showaddelement="yes" />
</div>
<div id="barra-lateral">
<b:section id="sidebar" class="sidebar" showaddelement="yes" />
</div>
<div id="pie">
<b:section id="footer" class="footer" showaddelement="yes" />
</div>
</body>
</html>
Es en el interior de las etiquetas <b:skin><![CDATA[ y su cierre ]]></b:skin> donde dictaremos las "reglas" o "normas" que la presentación de cada componente debe tener en el Blog, lo que hará que pueda verse con la presentación que deseemos.
NOTA: Hay más formas de trabajar con hojas de estilo en Blogger que utilizando <![CDATA[]] pero escapan al ámbito de la guía. Si estás interesado en ellas, en diarios de la nube tengo realizadas diversas guías sobre cómo trabajar con hojas de estilo.
¿Cómo se aplican los estilos en Blogger?
Se pueden aplicar referenciando directamente a una clase principal como es la del <body> como haremos en el ejemplo de hoy, o por medio del atributo class (clase). Se refiere a una clase que exista en la hoja de estilos.
Esto que suena "extraño" es así de sencillo, para entendernos, conceptualmente esto es cómo se hace :
---- HOJA DE ESTILOS CONCEPTUAL ----
<b:skin><![CDATA[
#Clase en hoja de estilos para contenedor 1{
ancho:10 píxeles;
alto:10 pixeles;
color: rojo;
}
]]></b:skin>
---- FIN HOJA DE ESTILOS CONCEPTUAL ----
---- DENTRO DEL <body> EJEMPLO CONCEPTUAL ----
<body>
<div id = "Clase en hoja de estilos para dar formato al contenedor 1">
<div> Contenedor principal con el título </div>
</div>
</body>
---- FIN DEL <body> EJEMPLO CONCEPTUAL ----
He delimitado la hoja de estilos con el texto ---- HOJA DE ESTILOS CONCEPTUAL ---- y ---- FIN HOJA DE ESTILOS CONCEPTUAL ----.
EXPLICACIÓN DEL EJEMPLO CONCEPTUAL:
En el contenedor <div id = "Clase en hoja de estilos para dar formato al contenedor 1"> queremos que se le de el estilo de la #Clase en hoja de estilos para dar formato al contenedor 1 (ancho de 10 píxeles, alto de 10 pixeles y color: rojo) que contiene el título Contenedor principal con el título.
Es decir, en la hoja de estilos hemos dicho cómo debe dibujarse un título, con qué ancho, alto y color para luego indicar dentro del contenedor que queremos aplicar ese estilo al texto Contenedor principal con el título por medio de que el <div id = tiene el mismo nombre que hemos definido para su estilo en la hoja de estilos: Clase en hoja de estilos para contenedor 1.
Ese ejemplo servía para explicar cómo se aplican los estilos y cómo en concreto a los contenedores <div> que se encuentran dentro del <body>.
El ejemplo completo hasta la entrega de hoy. Explicación paso a paso para poderlo poner en práctica en tu Blog de pruebas:
Usando los conceptos aprendidos en nuestra plantilla de pruebas en Blogger:
Si te has creado un Blog de pruebas, puedes seguir estos pasos y conseguir tener una idea clara de cómo se genera tu plantilla. Si no lo has hecho, puedes leer los pasos para entender cada punto con especial énfasis en el que se explica el código de la plantilla.
En Blogger nos crearemos un contenedor llamado cabecera que contendrá el título y los elementos que conformen esa sección, otro para el cuerpo, otro para la barra lateral y otro para el pie de todo el Blog. Ahora vamos a darle formato al cuerpo del Blog antes de darle formato a los contendores.
1) En tu Blog de pruebas, ve directamente en el menú de la izquierda a la opción "Plantilla".
2) Si tenías tu Blog de pruebas ya creado, no es necesario que hagas este paso (paso 2). Pulsa el botón gris "Editar HTML" y borra todo el código que aparece en la plantilla (puedes pulsar en Chrome CONTROL + A y después cuando esté seleccionado todo el código pulsa el botón "Supr" para suprimir el texto seleccionado).
3) Ahora copia el código que te pongo a continuación y pégalo directamente como nuevo código para tu plantilla:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
#titulo_blog{
font:normal normal 5em Arial,Tahoma,Helvetica,FreeSans,sans-serif;text-shadow:1px 1px 3px rgba(0,0,0,0.3);
margin-top: 1%;
margin-bottom: 2%;
color: white;
}
#contenedor-principal {
float: left;
width: 990px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAi7pk6d0Z3TQFzmkCEkE7bkB5jWHP05RQcXXrJydqPNDaKY-PKLaJ1UbkSxUhhABHPp5nDMcAmzsNJ7uOvN7iTImA7evKDug60q2UhIGyreiK2onNFVjToKNnnpecbh6_fbbCM8o37nE/s100/bg_light.png);
}
body {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRSiPzfEf_cp73uUjkY8z7VG7AQCPxwHq5Na7fTsRl_Hd6Dv4VKhUBh9Cy4cwVcpwDAAMNlV46-LwM5MYFNeVrAUEGYmDQQclfNwIRdUtxVTUge6erlGgLSWSNH0v5nyVtsFcAWM1lmQ/s1600/portan.png)top no-repeat;
background-color: #95ceee;
padding: 10;
margin-left: 19%;
margin-top: 2%;
}
#cabecera {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLYzOu8NK1WBaFX3rdbpEowNfKEOPYKUet4G39bTloiVIyG6FlLpkzvTZJFnqBwo_h3XrwQdfLxIL7Rj_IaJ0A3jJsTyPl_CMfpEnNepmO8EQsyd1oRw4AfDIQi4QmbOajuH5RpH13Aw/s1600/fondo_menu.jpg)repeat-x;
margin:30px 0 0 0;
height:62px;
}
#cuerpo {
color: #666;
font-size: 12px;
line-height: 1.5em;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC3ulrD38Wzo1TtzJU3kDsZI3kpJKN7FP5Sk9iontdlF0fuHH7cQ4NY0hbSFHiLwLQ9W6h8Zx6Z2IfKLwi1XiU5fA1yLbYnYWAsusjVqZPNqTYD4avh6GqSS9hnQSJDU8JoVfLr_VJai8/s610/hr_610.png) no-repeat left bottom transparent;
padding-bottom: 27px;
width: 50%;
text-align:justify;
font-family: Arial,Helvetica,sans-serif;
margin-left:2em;
}
]]></b:skin>
</head>
<body>
<div id='titulo_blog'>
<data:blog.title/>
</div>
<div id='contenedor-principal'>
<div id='cabecera'>
<b:section class='header' id='header' showaddelement='yes'/>
</div>
<div id='cuerpo'>
<b:section class='main' id='main' showaddelement='yes'/>
</div>
<div id='barra-lateral'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'/>
</div>
<div id='pie'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>
</div> <!--del contenedor-->
</body>
</html>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
#titulo_blog{
font:normal normal 5em Arial,Tahoma,Helvetica,FreeSans,sans-serif;text-shadow:1px 1px 3px rgba(0,0,0,0.3);
margin-top: 1%;
margin-bottom: 2%;
color: white;
}
#contenedor-principal {
float: left;
width: 990px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAi7pk6d0Z3TQFzmkCEkE7bkB5jWHP05RQcXXrJydqPNDaKY-PKLaJ1UbkSxUhhABHPp5nDMcAmzsNJ7uOvN7iTImA7evKDug60q2UhIGyreiK2onNFVjToKNnnpecbh6_fbbCM8o37nE/s100/bg_light.png);
}
body {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRSiPzfEf_cp73uUjkY8z7VG7AQCPxwHq5Na7fTsRl_Hd6Dv4VKhUBh9Cy4cwVcpwDAAMNlV46-LwM5MYFNeVrAUEGYmDQQclfNwIRdUtxVTUge6erlGgLSWSNH0v5nyVtsFcAWM1lmQ/s1600/portan.png)top no-repeat;
background-color: #95ceee;
padding: 10;
margin-left: 19%;
margin-top: 2%;
}
#cabecera {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLYzOu8NK1WBaFX3rdbpEowNfKEOPYKUet4G39bTloiVIyG6FlLpkzvTZJFnqBwo_h3XrwQdfLxIL7Rj_IaJ0A3jJsTyPl_CMfpEnNepmO8EQsyd1oRw4AfDIQi4QmbOajuH5RpH13Aw/s1600/fondo_menu.jpg)repeat-x;
margin:30px 0 0 0;
height:62px;
}
#cuerpo {
color: #666;
font-size: 12px;
line-height: 1.5em;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC3ulrD38Wzo1TtzJU3kDsZI3kpJKN7FP5Sk9iontdlF0fuHH7cQ4NY0hbSFHiLwLQ9W6h8Zx6Z2IfKLwi1XiU5fA1yLbYnYWAsusjVqZPNqTYD4avh6GqSS9hnQSJDU8JoVfLr_VJai8/s610/hr_610.png) no-repeat left bottom transparent;
padding-bottom: 27px;
width: 50%;
text-align:justify;
font-family: Arial,Helvetica,sans-serif;
margin-left:2em;
}
]]></b:skin>
</head>
<body>
<div id='titulo_blog'>
<data:blog.title/>
</div>
<div id='contenedor-principal'>
<div id='cabecera'>
<b:section class='header' id='header' showaddelement='yes'/>
</div>
<div id='cuerpo'>
<b:section class='main' id='main' showaddelement='yes'/>
</div>
<div id='barra-lateral'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'/>
</div>
<div id='pie'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>
</div> <!--del contenedor-->
</body>
</html>
Explicación detallada de cada parte del código:
-
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
: Esta etiqueta le informa al navegador de que se está trabajando con una página XHTML. Esta información la pasamos por alto para no añadir complejidad a la guía. Simplemente debes saber que le indica al navegador con qué tipo de código va a trabajar para que sepa interpretarlo. En otras guías más complejas abordaremos este punto.
- <html: Esta etiqueta informa de que en su interior y hasta donde llegue su cierre </html> lo que hay dentro es el código XHTML que conforma la página que estamos construyendo, la plantilla, la base de todo el Blog.
- <head>: Esta etiqueta le informa al navegador de que dentro de ella se compondrá el apartado "head", cabeza en inglés. Dentro de él está la cabecera del XHTML que estamos formando. La parte de código <title> título </title> expresa que en el interior de la etiqueta <title> hasta que se cierre con </title> tendremos el título que queramos ponerle a la página. Como cualquier otra etiqueta el <head> debe cerrarse con su etiqueta con / indicando que se cierra la etiqueta: <head>. Dentro de <title> y su cierre </title> encontramos el código <data:blog.pageTitle/>:
- En XHTML se hace referencia al atributo data: para poner del blog el .pageTitle, el título de la página. Así pues, será el título de la página que aparecerá en la barra de título de tu navegador. Coincidirá con el del nombre del Blog.
- <b:skin><![CDATA[/*
#titulo_blog{
font:normal normal 5em Arial,Tahoma,Helvetica,FreeSans,sans-serif;text-shadow:1px 1px 3px rgba(0,0,0,0.3);
margin-top: 1%;
margin-bottom: 2%;
color: white;
}
#contenedor-principal {
float: left;
width: 60em;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAi7pk6d0Z3TQFzmkCEkE7bkB5jWHP05RQcXXrJydqPNDaKY-PKLaJ1UbkSxUhhABHPp5nDMcAmzsNJ7uOvN7iTImA7evKDug60q2UhIGyreiK2onNFVjToKNnnpecbh6_fbbCM8o37nE/s100/bg_light.png);
}
body {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRSiPzfEf_cp73uUjkY8z7VG7AQCPxwHq5Na7fTsRl_Hd6Dv4VKhUBh9Cy4cwVcpwDAAMNlV46-LwM5MYFNeVrAUEGYmDQQclfNwIRdUtxVTUge6erlGgLSWSNH0v5nyVtsFcAWM1lmQ/s1600/portan.png)top no-repeat;
background-color: #95ceee;
padding: 10;
margin-left: 19%;
margin-top: 2%;
}
#cabecera {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLYzOu8NK1WBaFX3rdbpEowNfKEOPYKUet4G39bTloiVIyG6FlLpkzvTZJFnqBwo_h3XrwQdfLxIL7Rj_IaJ0A3jJsTyPl_CMfpEnNepmO8EQsyd1oRw4AfDIQi4QmbOajuH5RpH13Aw/s1600/fondo_menu.jpg) repeat-x;
margin:30px 0 0 0;
height:62px;
}
#cuerpo {
color: #666;
font-size: 12px;
line-height: 1.5em;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC3ulrD38Wzo1TtzJU3kDsZI3kpJKN7FP5Sk9iontdlF0fuHH7cQ4NY0hbSFHiLwLQ9W6h8Zx6Z2IfKLwi1XiU5fA1yLbYnYWAsusjVqZPNqTYD4avh6GqSS9hnQSJDU8JoVfLr_VJai8/s610/hr_610.png) no-repeat left bottom transparent;
padding-bottom: 27px;
width: 50%;
text-align:justify;
font-size: 12px;
font-family: Arial,Helvetica,sans-serif;
line-height: 1.5em;
color: #666;
margin-left:2em;
}
]]></b:skin> Hemos definido los estilos que servirán para el <body>
de la plantilla en Blogger. Nos sirve para darle el aspecto de fondo que queremos al blog. Cada "regla" o "norma" estilo va entre body { y } separads unas de otras por ";".
Además hemos añadido una clase con reglas de presentación para nuestra #titulo_blog, #contenedor-principal y #cuerpo.
Esta es la explicación detallada de cada norma empleada:
titulo_blog:
- font:normal normal 5em Arial,Tahoma,Helvetica,FreeSans,sans-serif;text-shadow:1px 1px 3px rgba(0,0,0,0.3); Establece la fuente Arial o Tahoma o Helvetica o FreeSans o Sans-Serif con efecto sombreado.
- margin-top: 1%; Indica que el contenedor del título debe estar a un 1% de distancia del tope (la parte superior) del Blog.
- margin-bottom: 2%; Indica que el margen inferior debe ser del 2%.
- color: white; Indica que el color del texto debe ser blanco.
contenedor-principal:
En su interior estamos dando las reglas con las que debe presentarse el "contenedor de contenedores":
- width: 990px; Indica un valor que delimita el tamaño del contenedor que albergará a los demás contenedores con un máximo de 990 píxeles.
- background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAi7pk6d0Z3TQFzmkCEkE7bkB5jWHP05RQcXXrJydqPNDaKY-PKLaJ1UbkSxUhhABHPp5nDMcAmzsNJ7uOvN7iTImA7evKDug60q2UhIGyreiK2onNFVjToKNnnpecbh6_fbbCM8o37nE/s100/bg_light.png); Establece el "fondo bg_light.png" para todo el contenedor principal.
- float: left; Le indica que debe alinearse a la izquierda con la posibilidad de "flotar" en dirección izquierda.
body:
- background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRSiPzfEf_cp73uUjkY8z7VG7AQCPxwHq5Na7fTsRl_Hd6Dv4VKhUBh9Cy4cwVcpwDAAMNlV46-LwM5MYFNeVrAUEGYmDQQclfNwIRdUtxVTUge6erlGgLSWSNH0v5nyVtsFcAWM1lmQ/s1600/portan.png)top no-repeat; Establece el fondo de la imagen de la nube para el fondo de la plantilla.
- background-color: #95ceee; Establece el color de fondo para la plantilla.
- padding: 10; Indica un espaciado de 10 píxeles.
- margin-left: 19%; Coloca el cuerpo de la plantilla un 19% con respecto a la izquierda.
- margin-top: 2%; Coloca el cuerpo de la plantilla un 2% con respecto a la parte superior.
cabecera:
- background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLYzOu8NK1WBaFX3rdbpEowNfKEOPYKUet4G39bTloiVIyG6FlLpkzvTZJFnqBwo_h3XrwQdfLxIL7Rj_IaJ0A3jJsTyPl_CMfpEnNepmO8EQsyd1oRw4AfDIQi4QmbOajuH5RpH13Aw/s1600/fondo_menu.jpg) repeat-x; Establece que como imagen de fondo de la cabecera, todo lo que se ponga dentro de background: url( hasta donde cierra su paréntesis ), será el fondo que deseamos poner a la cabecera.
En este caso: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLYzOu8NK1WBaFX3rdbpEowNfKEOPYKUet4G39bTloiVIyG6FlLpkzvTZJFnqBwo_h3XrwQdfLxIL7Rj_IaJ0A3jJsTyPl_CMfpEnNepmO8EQsyd1oRw4AfDIQi4QmbOajuH5RpH13Aw/s1600/fondo_menu.jpg es la dirección a la imagen que hemos decidido colocar de fondo de cabecera.
¿Y cómo es posible que cubramos todo el fondo de la cabecera con un "palito negro" tan pequeño?... es sencillo, por medio del siguiente texto que acompaña al background: url, el repeat-x. Estamos indicando con repeat-x que deseamos que la imagen de fondo "con forma de palito negro" se repita tantas veces por el eje x (en horizontal) como sea necesario hasta llegar al borde de la pantalla del usuario. Así, dará la sensación de que estamos creando una barra horizontal.
- margin:30px 0 0 0; Indica que queremos que desde el alto de navegador, se recorran 30 píxeles (30px) antes de que se dibuje el contenedor. De esa manera dejamos un margen (margin) que permite que se pueda ver el título y la nube. Estableciendo el margen, hemos colocado la "barra" del contenedor donde hemos querido.
- height:62px; Expresa que deseamos que la barra que estamos dibujando como fondo de cabecera (repitiendo la imagen del palito con el repeat-x) y situada en el margen que queremos (margin:30px 0 0 0) tenga un alto de 62px (62 píxeles).
cuerpo:
- color: #666; El color deseado para el cuerpo del blog.
- font-size: 12px; Tamaño de la fuente que se va a utilizar en el cuerpo del Blog.
- line-height: 1.5em; Tamaño del interlineado del texto del cuerpo del Blog.
- background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC3ulrD38Wzo1TtzJU3kDsZI3kpJKN7FP5Sk9iontdlF0fuHH7cQ4NY0hbSFHiLwLQ9W6h8Zx6Z2IfKLwi1XiU5fA1yLbYnYWAsusjVqZPNqTYD4avh6GqSS9hnQSJDU8JoVfLr_VJai8/s610/hr_610.png) no-- repeat left bottom transparent; Fondo "hr_610.png" que se aplica al fondo del cuerpo del Blog. Es transparente y se alinea a la izquierda.
- padding-bottom: 27px; Se distancia del final del Blog en 27 píxeles.
- width: 50%; El ancho siempre será un 50% de contenedor donde se encuentre.
- text-align:justify; El texto del contenedor se justificará siempre al alinearse.
- font-family: Arial,Helvetica,sans-serif; Se utilizarán las fuentes Arial, Helvetica o Sans-Serif-
- margin-left:2em; El margen izquierdo será de 2em (unidades de distancia proporcional al margen que se adaptan al tamaño del contenedor).
Aquí se explica el contenido de la plantilla después de las hojas de estilo:
<body>: Es el cuerpo la plantilla que estamos creando. Va desde donde ponemos la etiqueta <body> hasta donde aparezca su cierre </body> con su correspondiente /. En su interior hemos escrito <data:blog.title/>:
- En XHTML se hace referencia al atributo data: para poner del blog el .title. Así pues, será el título del Blog que aparecerá como texto dentro de la página principal del Blog. Si os dais cuenta, al estar en el <body> será texto que aparecerá en el navegador "dentro del cuerpo" del propio Blog.
Los contenedores añadidos al código general en esta entrega del cursillo:
- <div id='titulo_blog'>
<data:blog.title/>
</div>
Asi estamos creando un contenedor para el título del Blog y dándole el formato adecuado por medio de las hojas de estilo.
- <div id='contenedor-principal'>
Se trata del contenedor principal que contiene al resto de contenedores que conforman la plantilla. Se cierra con </div> justo al final de todos los contenedores que alberga en su interior.
- <div id="cabecera">
<b:section id="header" class="header" showaddelement="yes" />
</div>
Asi estamos creando un contenedor para la cabecera <div id="cabecera"> que contiene en su interior <b:section id="header" class="header" showaddelement="yes" /> una sección de identificador header y clase header que le dice a Blogger que en su interior se encontrará todo lo correspondiente a la zona de cabecera. Es al cotenedor al que le hemos dado un estilo de fondo en forma de barra negra.
<div id="cuerpo">
<b:section id="main" class="main" showaddelement="yes" />
</div>
Asi estamos creando un contenedor para la parte principal del blog, su cuerpo <div id="cuerpo"> que contiene en su interior <b:section id="main" class="main" showaddelement="yes" /> una sección de identificador main y clase main que le dice a Blogger que en su interior se encontrará todo lo correspondiente a las entradas del Blog. Cuando veamos los estilos en la próxima entrega, veremos que en la hoja de estilos le daremos un formato con una clase que se llame cuerpo para delimitar su ancho, alto, etc...
- <div id="barra-lateral">
<b:section id="sidebar" class="sidebar" showaddelement="yes" />
</div>
Asi estamos creando un contenedor para una barra lateral del blog, barra-lateral que contiene en su interior <b:section id="sidebar" class="sidebar" showaddelement="yes" /> una sección de identificador sidebar y clase sidebar que le dice a Blogger que en su interior se encontrará todo lo correspondiente a la barra lateral Blog. Cuando veamos los estilos en la próxima entrega, veremos que en la hoja de estilos le daremos un formato con una clase que se llame barra-lateral para delimitar su ancho, alto, etc...
- <div id="pie">
<b:section id="footer" class="footer" showaddelement="yes" />
</div>
Asi estamos creando un contenedor para el pie del blog, pie que contiene en su interior <b:section id="footer" class="footer" showaddelement="yes" /> una sección de identificador footer y clase footer que le dice a Blogger que en su interior se encontrará todo lo correspondiente al pie del Blog. Cuando veamos los estilos en la próxima entrega, veremos que en la hoja de estilos le daremos un formato con una clase que se llame pie para delimitar su ancho, alto, etc...
</body> y </html> cierran el cuerpo de la plantilla y la plantilla respectivamente.
4) Pulsa "Guardar Plantilla". Te debe haber quedado algo como lo que ves en la pantalla a continuación:
¡Eso es todo!, en la próxima entrega vemos los últimos estilos por aplicar: el de la barra lateral y el pie de página.
- <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>: Esta etiqueta le informa al navegador de que se está trabajando con una página XHTML. Esta información la pasamos por alto para no añadir complejidad a la guía. Simplemente debes saber que le indica al navegador con qué tipo de código va a trabajar para que sepa interpretarlo. En otras guías más complejas abordaremos este punto.
- <html: Esta etiqueta informa de que en su interior y hasta donde llegue su cierre </html> lo que hay dentro es el código XHTML que conforma la página que estamos construyendo, la plantilla, la base de todo el Blog.
- <head>: Esta etiqueta le informa al navegador de que dentro de ella se compondrá el apartado "head", cabeza en inglés. Dentro de él está la cabecera del XHTML que estamos formando. La parte de código <title> título </title> expresa que en el interior de la etiqueta <title> hasta que se cierre con </title> tendremos el título que queramos ponerle a la página. Como cualquier otra etiqueta el <head> debe cerrarse con su etiqueta con / indicando que se cierra la etiqueta: <head>. Dentro de <title> y su cierre </title> encontramos el código <data:blog.pageTitle/>:
- En XHTML se hace referencia al atributo data: para poner del blog el .pageTitle, el título de la página. Así pues, será el título de la página que aparecerá en la barra de título de tu navegador. Coincidirá con el del nombre del Blog.
- <b:skin><![CDATA[/*
#titulo_blog{
font:normal normal 5em Arial,Tahoma,Helvetica,FreeSans,sans-serif;text-shadow:1px 1px 3px rgba(0,0,0,0.3);
margin-top: 1%;
margin-bottom: 2%;
color: white;
}
#contenedor-principal {
float: left;
width: 60em;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAi7pk6d0Z3TQFzmkCEkE7bkB5jWHP05RQcXXrJydqPNDaKY-PKLaJ1UbkSxUhhABHPp5nDMcAmzsNJ7uOvN7iTImA7evKDug60q2UhIGyreiK2onNFVjToKNnnpecbh6_fbbCM8o37nE/s100/bg_light.png);
}
body {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRSiPzfEf_cp73uUjkY8z7VG7AQCPxwHq5Na7fTsRl_Hd6Dv4VKhUBh9Cy4cwVcpwDAAMNlV46-LwM5MYFNeVrAUEGYmDQQclfNwIRdUtxVTUge6erlGgLSWSNH0v5nyVtsFcAWM1lmQ/s1600/portan.png)top no-repeat;}
background-color: #95ceee;
padding: 10;
margin-left: 19%;
margin-top: 2%;
#cabecera {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLYzOu8NK1WBaFX3rdbpEowNfKEOPYKUet4G39bTloiVIyG6FlLpkzvTZJFnqBwo_h3XrwQdfLxIL7Rj_IaJ0A3jJsTyPl_CMfpEnNepmO8EQsyd1oRw4AfDIQi4QmbOajuH5RpH13Aw/s1600/fondo_menu.jpg) repeat-x;
margin:30px 0 0 0;
height:62px;
}
#cuerpo {
color: #666;
font-size: 12px;
line-height: 1.5em;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC3ulrD38Wzo1TtzJU3kDsZI3kpJKN7FP5Sk9iontdlF0fuHH7cQ4NY0hbSFHiLwLQ9W6h8Zx6Z2IfKLwi1XiU5fA1yLbYnYWAsusjVqZPNqTYD4avh6GqSS9hnQSJDU8JoVfLr_VJai8/s610/hr_610.png) no-repeat left bottom transparent;
padding-bottom: 27px;
width: 50%;
text-align:justify;
font-size: 12px;
font-family: Arial,Helvetica,sans-serif;
line-height: 1.5em;
color: #666;
margin-left:2em;
}
]]></b:skin> Hemos definido los estilos que servirán para el <body>de la plantilla en Blogger. Nos sirve para darle el aspecto de fondo que queremos al blog. Cada "regla" o "norma" estilo va entre body { y } separads unas de otras por ";".
titulo_blog:
- font:normal normal 5em Arial,Tahoma,Helvetica,FreeSans,sans-serif;text-shadow:1px 1px 3px rgba(0,0,0,0.3); Establece la fuente Arial o Tahoma o Helvetica o FreeSans o Sans-Serif con efecto sombreado.
- margin-top: 1%; Indica que el contenedor del título debe estar a un 1% de distancia del tope (la parte superior) del Blog.
- margin-bottom: 2%; Indica que el margen inferior debe ser del 2%.
- color: white; Indica que el color del texto debe ser blanco.
contenedor-principal:
En su interior estamos dando las reglas con las que debe presentarse el "contenedor de contenedores":
- width: 990px; Indica un valor que delimita el tamaño del contenedor que albergará a los demás contenedores con un máximo de 990 píxeles.
- background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAi7pk6d0Z3TQFzmkCEkE7bkB5jWHP05RQcXXrJydqPNDaKY-PKLaJ1UbkSxUhhABHPp5nDMcAmzsNJ7uOvN7iTImA7evKDug60q2UhIGyreiK2onNFVjToKNnnpecbh6_fbbCM8o37nE/s100/bg_light.png); Establece el "fondo bg_light.png" para todo el contenedor principal.
- float: left; Le indica que debe alinearse a la izquierda con la posibilidad de "flotar" en dirección izquierda.
body:
- background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRSiPzfEf_cp73uUjkY8z7VG7AQCPxwHq5Na7fTsRl_Hd6Dv4VKhUBh9Cy4cwVcpwDAAMNlV46-LwM5MYFNeVrAUEGYmDQQclfNwIRdUtxVTUge6erlGgLSWSNH0v5nyVtsFcAWM1lmQ/s1600/portan.png)top no-repeat; Establece el fondo de la imagen de la nube para el fondo de la plantilla.
- background-color: #95ceee; Establece el color de fondo para la plantilla.
- padding: 10; Indica un espaciado de 10 píxeles.
- margin-left: 19%; Coloca el cuerpo de la plantilla un 19% con respecto a la izquierda.
- margin-top: 2%; Coloca el cuerpo de la plantilla un 2% con respecto a la parte superior.
cabecera:
- background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLYzOu8NK1WBaFX3rdbpEowNfKEOPYKUet4G39bTloiVIyG6FlLpkzvTZJFnqBwo_h3XrwQdfLxIL7Rj_IaJ0A3jJsTyPl_CMfpEnNepmO8EQsyd1oRw4AfDIQi4QmbOajuH5RpH13Aw/s1600/fondo_menu.jpg) repeat-x; Establece que como imagen de fondo de la cabecera, todo lo que se ponga dentro de background: url( hasta donde cierra su paréntesis ), será el fondo que deseamos poner a la cabecera.
En este caso: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLYzOu8NK1WBaFX3rdbpEowNfKEOPYKUet4G39bTloiVIyG6FlLpkzvTZJFnqBwo_h3XrwQdfLxIL7Rj_IaJ0A3jJsTyPl_CMfpEnNepmO8EQsyd1oRw4AfDIQi4QmbOajuH5RpH13Aw/s1600/fondo_menu.jpg es la dirección a la imagen que hemos decidido colocar de fondo de cabecera.
¿Y cómo es posible que cubramos todo el fondo de la cabecera con un "palito negro" tan pequeño?... es sencillo, por medio del siguiente texto que acompaña al background: url, el repeat-x. Estamos indicando con repeat-x que deseamos que la imagen de fondo "con forma de palito negro" se repita tantas veces por el eje x (en horizontal) como sea necesario hasta llegar al borde de la pantalla del usuario. Así, dará la sensación de que estamos creando una barra horizontal.
- margin:30px 0 0 0; Indica que queremos que desde el alto de navegador, se recorran 30 píxeles (30px) antes de que se dibuje el contenedor. De esa manera dejamos un margen (margin) que permite que se pueda ver el título y la nube. Estableciendo el margen, hemos colocado la "barra" del contenedor donde hemos querido.
- height:62px; Expresa que deseamos que la barra que estamos dibujando como fondo de cabecera (repitiendo la imagen del palito con el repeat-x) y situada en el margen que queremos (margin:30px 0 0 0) tenga un alto de 62px (62 píxeles).
cuerpo:
- color: #666; El color deseado para el cuerpo del blog.
- font-size: 12px; Tamaño de la fuente que se va a utilizar en el cuerpo del Blog.
- line-height: 1.5em; Tamaño del interlineado del texto del cuerpo del Blog.
- background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC3ulrD38Wzo1TtzJU3kDsZI3kpJKN7FP5Sk9iontdlF0fuHH7cQ4NY0hbSFHiLwLQ9W6h8Zx6Z2IfKLwi1XiU5fA1yLbYnYWAsusjVqZPNqTYD4avh6GqSS9hnQSJDU8JoVfLr_VJai8/s610/hr_610.png) no-- repeat left bottom transparent; Fondo "hr_610.png" que se aplica al fondo del cuerpo del Blog. Es transparente y se alinea a la izquierda.
- padding-bottom: 27px; Se distancia del final del Blog en 27 píxeles.
- width: 50%; El ancho siempre será un 50% de contenedor donde se encuentre.
- text-align:justify; El texto del contenedor se justificará siempre al alinearse.
- font-family: Arial,Helvetica,sans-serif; Se utilizarán las fuentes Arial, Helvetica o Sans-Serif-
- margin-left:2em; El margen izquierdo será de 2em (unidades de distancia proporcional al margen que se adaptan al tamaño del contenedor).
- En XHTML se hace referencia al atributo data: para poner del blog el .title. Así pues, será el título del Blog que aparecerá como texto dentro de la página principal del Blog. Si os dais cuenta, al estar en el <body> será texto que aparecerá en el navegador "dentro del cuerpo" del propio Blog.
Los contenedores añadidos al código general en esta entrega del cursillo:
- <div id='titulo_blog'>
<data:blog.title/>
</div>
Asi estamos creando un contenedor para el título del Blog y dándole el formato adecuado por medio de las hojas de estilo.
- <div id='contenedor-principal'>
Se trata del contenedor principal que contiene al resto de contenedores que conforman la plantilla. Se cierra con </div> justo al final de todos los contenedores que alberga en su interior.
- <div id="cabecera">
<b:section id="header" class="header" showaddelement="yes" />
</div>
Asi estamos creando un contenedor para la cabecera <div id="cabecera"> que contiene en su interior <b:section id="header" class="header" showaddelement="yes" /> una sección de identificador header y clase header que le dice a Blogger que en su interior se encontrará todo lo correspondiente a la zona de cabecera. Es al cotenedor al que le hemos dado un estilo de fondo en forma de barra negra.
<div id="cuerpo">
<b:section id="main" class="main" showaddelement="yes" />
</div>
Asi estamos creando un contenedor para la parte principal del blog, su cuerpo <div id="cuerpo"> que contiene en su interior <b:section id="main" class="main" showaddelement="yes" /> una sección de identificador main y clase main que le dice a Blogger que en su interior se encontrará todo lo correspondiente a las entradas del Blog. Cuando veamos los estilos en la próxima entrega, veremos que en la hoja de estilos le daremos un formato con una clase que se llame cuerpo para delimitar su ancho, alto, etc...
- <div id="barra-lateral">
<b:section id="sidebar" class="sidebar" showaddelement="yes" />
</div>
Asi estamos creando un contenedor para una barra lateral del blog, barra-lateral que contiene en su interior <b:section id="sidebar" class="sidebar" showaddelement="yes" /> una sección de identificador sidebar y clase sidebar que le dice a Blogger que en su interior se encontrará todo lo correspondiente a la barra lateral Blog. Cuando veamos los estilos en la próxima entrega, veremos que en la hoja de estilos le daremos un formato con una clase que se llame barra-lateral para delimitar su ancho, alto, etc...
- <div id="pie">
<b:section id="footer" class="footer" showaddelement="yes" />
</div>
Asi estamos creando un contenedor para el pie del blog, pie que contiene en su interior <b:section id="footer" class="footer" showaddelement="yes" /> una sección de identificador footer y clase footer que le dice a Blogger que en su interior se encontrará todo lo correspondiente al pie del Blog. Cuando veamos los estilos en la próxima entrega, veremos que en la hoja de estilos le daremos un formato con una clase que se llame pie para delimitar su ancho, alto, etc...
</body> y </html> cierran el cuerpo de la plantilla y la plantilla respectivamente.
Muy bien explicado todo, muchas gracias y llevo aprendiendo desde la primera leccion.
ResponderEliminarJuan Alberto,
Eliminarun honor, recibir un feedback tan positivo le alegra a uno el alma. Aquí estoy para ayudar, lo que necesites pregunta y espero te pueda servir el curso. Es tedioso, pero al final da frutos. Todavía me queda alguna entrada más que hacer para terminar la plantilla.
Lo esencial es que deseo que la gente vea que no es difícil y que además hay muchas formas y opciones para hacerlo.
En fin, muchas gracias por tu comentario, me anima a continuar con esto... que a veces es agotador. Un abrazo.
Buenas noches Miguel Ángel, todo el código está escrito con algunas letras en mayúscula como "Id", etc; el intérprete del navegador da error ya que diferencia entre mayúsculas y minúsculas.
ResponderEliminarHola Javier!,
Eliminarya está arreglado, gracias por avisar... precisamente eran las hojas de estilo...
Muchas gracias.
Una pregunta Miguel Garcia, en el procedimiento de la hoja de estilo, todo lo que uno agregue dentro de las normas, sera para todo el blog, en general?
ResponderEliminarHola, lo que agregues aquí lo puedes utilizar en todo el Blog en general. Las hojas de estilo que están en CDATA son para todo el Blog.
EliminarUn saludo y cualquier duda aquí me tienes.
Buenos días Miguel, muy bien explicado, ahora entiendo algunos conceptos que me comentaste para aplicar y yo no entendía lo que era. Gracias de nyevo!!!
ResponderEliminar¡Genial Elia!, me alegro un montón que pueda servirte. Cualquier cosa ya sabes dónde estoy!!
EliminarTengo que ponerme ya con esto que quiero hacer algunos cambios.. pero con el miedo a meter la pata pues no me animaba mucho.. Aquí estoy en modo alumna.. Muchas gracias
ResponderEliminarHola Eugenia, lo bueno es utilizar un Blog de pruebas y así ve uno lo que está tocando exactamente ;) cualquier duda aquí me tienes. Un abrazo.
EliminarHola Miguel, gracias por tu post, hasta ahora son los que más me han ayudado y en el único que he encontrado lo que estaba buscando, que era entender la estructura interna del blog para poder cambiar el diseño. Pero hay cosas que no me quedan clara, por ejemplo lo de la nube, no se donde se guarda. A mi blog le quiero poner una imagen de una llave pero no sabría como hacerlo, bueno tal vez, si la pusiera en drobox, en una carpeta sin restricciones, pero no se si se podría hacer, bueno voy a probarlo en lo que me contestas. Otro cosa es como haz hecho para rellenar el fondo de la cabecera con un palito negro, yo nececito hacer algo así para el diseño de mi blog, quiero que la barra del menú sea de color oro, pero ese color no existe en hexadecimal y me habían comentado que tenía que ser creando lo a partir de una imagen.
ResponderEliminarY otra cosa era si sabías algún libro o algo donde pueda aprender todas las variables o como se llaman, variables no, me refiero a los códigs con los que podemos hacer las cosas , por ejemplo color: #666; El color deseado para el cuerpo del blog.
- font-size: 12px;
- line-height: 1.5em;
- background: url
Retocar las css es una tarea sencilla, te recomiendo seguir esta guía:http://www.diariosdelanube.com/2013/07/guia-para-trabajar-con-hojas-de-estilo.html
EliminarVerás cómo utilizando la tecla F12 del navegador y accediendo al modo desarrollador podrás saber cada atributo que puedes poner y cómo retocarlo viéndolo directamente sobre tu web y el efecto que produce.
Con esa guía que te he pasado vas a descubrir todo lo que necesitas.
Cualquier duda pregunta lo que necesites, hay varias guías para retocar css en Diarios de la nube. Ejecuta primero la que te he pasado y luego busca todo lo que necesites en el buscador.
Un saludo!!!
No veo la siguiente entrada; para darle estilo a la barra lateral y al footer. Soy nuevo en blogger, y enserio quisiera aprender. Espero me respondas. Por cierto este es uno de los mejores blogg! ya está en mis marcadores
ResponderEliminarHola!,
Eliminarsi quieres profundizar en el tema, seguro que te encanta este tutorial http://www.diariosdelanube.com/2013/07/guia-para-trabajar-con-hojas-de-estilo.html Podrás seleccionar directamente la CSS y retocar lo que necesites. Cualquier duda que tengas ve preguntando e intento ayudar.
Un saludo y gracias por participar.