En anteriores entregas aprendimos un poco de HTML básico que nos sirviera de base para luego comprender mejor la plantilla Blogger. Después pasamos a la acción creando nuestra primera plantilla y por último los contenedores de la cabecera, el cuerpo, una barra lateral y el pie del Blog.
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://lh5.googleusercontent.com/-keXWModxdTs/T_BuwGqsq_I/AAAAAAAAB0s/oypu5EOBn80/s600/bg_light.png);
}
body {
background: url(http://4.bp.blogspot.com/-5yMgnO19Hvs/UpKQgNFgUJI/AAAAAAAAJfI/oHyjuGnz-n8/s600/portan.png)top no-repeat;
background-color: #95ceee;
padding: 10;
margin-left: 19%;
margin-top: 2%;
}
#cabecera {
background: url(http://1.bp.blogspot.com/-jr_KYwrlknc/UrIAY5l2BII/AAAAAAAAKBs/nbhNzj627w0/s600/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://lh4.googleusercontent.com/-AXOBZzUeLYk/T_Bu0WkGWEI/AAAAAAAAB18/DJeRMpgH-Rc/s600/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,
Fuente: este post proviene de Diarios de la nube, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Modificado:
