Es importante que todo blogger aprenda a diseñar sus propias hojas de estilos de cascada CSS3 por el simple hecho de personalizar al máximo su blog, sin tener que depender de una herramienta que permita realizar ese trabajo, además al diseñar la hojas de estilos se puede reducir mucho el CSS que utiliza un sitio web lo que a su vez hace que se utilicen menos líneas de texto en el código HTML de la plantilla y así el tiempo de carga se verá favorecido. Cabe destacar que los robots de los buscadores leen las primeras líneas del código de un blog y tener pocas junto con una compresión adecuada puede hacer la diferencia tanto en la velocidad de carga, como en la lectura del contenido.
Las hojas de estilos CSS pueden ser un poco difíciles de diseñar por un blogger que apenas esté dando sus primeros pasos y que no conozca como diseñar sus propios códigos, sin embargo no es algo que sea muy difícil de lograr después de todo es fácil entender cómo se pueden hacer y generalmente al diseñar nuestros propios estilos se ahorrara tener que utilizar hojas CSS que utilizan otras personas a la vez para los estilos de sus blogs. Si tu bitácora se encuentra creada en Blogger o WordPress el trabajo que tienes que realizar es el mismo lo único que varían son algunos códigos en la plantilla, pero como tal el CSS3 aplica para ambas plataformas, ya que lo único que varía es el lenguaje HTML5 por el XML.
Contenidos del post:
¿Qué se debe tomar en cuenta al diseñar nuestros propios estilos CSS para un blog?
Cuando los estilos son diseñados por uno mismo todos los div y contenedores deben igualmente ser diseñados por nosotros, para de esa forma poder tener un control exacto de a qué cosas se le están dando los estilos adecuados, aunque no es obligatorio es lo más recomendable, por ejemplo los div más comunes son el body, header, sidebar y footer; de allí se desprende todos los div que están encerrados en otros y a todos y cada uno se les debe asignar un nombre único para controlar los estilos de todo el blog. Puede que lo que diga aquí suene un poco complicado pero se debe seguir las instrucciones que estoy dando al pie de la letra para que puedas crear tus propios estilos.
Yo soy partidario de que todas las hojas de estilos se coloquen directamente en el código fuente de la plantilla, sin que haya la necesidad de elaborar los estilos y colocarlos en hojas aparte, ya que hacerlo puede representar una carga más lenta del blog. Como tal cuando se hacen invocaciones a través de un link para los estilos esto suele afectar la carga del sitio, sobre todo si dichas hojas se alojan en servidores de terceras partes que cargan lento, porque hasta que los estilos no carguen por completo el blog no puede terminar de cargar todo su contenido y esto puede afectar al posicionamiento del blog en los motores de búsqueda.
¿Cuánto tiempo me puede tomar diseñar los estilos CSS de mi blog?
Diseñar los estilos de un blog puede tardar poco o mucho tiempo dependiendo de la cantidad de líneas que se hagan en las hojas de estilos, por ejemplo si eres un experto haciendo esto seguramente comprenderás que en una misma función se puede colocar más de un div a la vez lo que puede ahorrarte tiempo, pero si eres una persona inexperta todos los estilos los iras diseñando uno por uno para cada div y puede tomarte bastante hacerlo.
Otro punto que se debe tener en consideración al momento de preguntarte cuánto tiempo lleva diseñar una hoja de estilos CSS es la cantidad de funciones que se ejecutaran en la carga de un blog, mediante código CSS3 se pueden crear ventanas modales para que estas aparezcan a los 30 o 60 segundos después de la carga completa del blog, sin necesidad de utilizar Javascript externo, en dicha ventana se puede colocar la caja de suscripción al blog o la promoción de algún servicio y lo mejor es que no se tiene que utilizar servicios de terceras partes como los que ofrece SUMO para esa función; esto a su vez permite que la carga del blog no se vea afectada, ya que todo lo que se usara estará alojado en la misma plantilla.
Con lo dicho anteriormente se puede estimar que diseñar una hoja de estilos CSS para todo un blog puede demorar entre 4 horas a siete días dependiendo de los talentos que se tengan para crearla y saber que div necesitas realmente utilizar. Algunos blogueros han dicho que crear sus hojas de estilo CSS les ha llevado hasta dos meses pero desde mi punto de vista eso es exagerado, ya que aunque no se tenga conocimiento creando esto si se siguen los pasos de un tutorial, esto se puede llevar una menor cantidad de tiempo.
En Blogger debes bloquear las hojas de estilos por defecto
En el caso particular de Blogger para que puedas utilizar tus propias hojas de estilos debes realizar algunos cambios para bloquear las que se traen por defecto y así todo marchara a la perfección, antes de realizar cualquier cambio te recomiendo que hagas una copia de seguridad de tu plantilla por si te equivocas:
- Primero que nada debes iniciar sesión en Blogger, una vez que lo hagas debes ir a Tema y pulsar el botón Editar HTML.
- Después debes buscar la siguiente línea de código <head> y reemplazarla por esta: <head> <
- Luego debes buscar </head> y reemplazarla por esta otra línea: </head><
- Una vez que hayas modificado las dos etiquetas que dije anteriormente debes encontrar los estilos que por defecto están en modo de función en la plantilla, ya que eso permite utilizar las hojas CSS que se encuentran en los servidores de Google, debes buscar <b:skin> y eliminar todo lo que está dentro de allí <b:skin> aquí se encuentran los estilos generales que traen por defecto los div y encabezados de blog </b:skin>.
- Seguidamente busca <b:template-skin> y elimina igualmente lo que está dentro de allí <b:template-skin> estos son los estilos por defecto que trae la plantilla</b:template-skin>; al eliminar las dos cosas que dije anteriormente esos estilos no los podrás utilizar y el personalizador que trae Blogger quedara inhabilitado y todo lo tendrás que hacer directamente en la plantilla.
- Por ultimo después de haber eliminado lo anterior en su lugar debes colocar <style type="text/css"><!– /*<b:skin><![CDATA[*/]]></b:skin><style type=’text/css’> Aquí debes colocar los estilos CSS que diseñaste tú </style>
Al hacer lo que dije anteriormente puedes bloquear las hojas de estilos que trae Blogger por defecto y a su vez reemplazas todo por tus propios estilos CSS. Aunque dije que es necesario que le des nombre a los div de tu blog, si quieres no lo hagas y has tus estilos en función de ellos, el único problema es que deberás ir línea por línea copiando los nombres de cada uno y averiguando que función cumple cada div algo que fácilmente puedes saber al utilizar el navegador Mozilla FireFox o Google Chrome, ya que al presionar la tecla F12 estando dentro de la bitácora puedes averiguar para que sirve cada contenedor de la plantilla y que funciones cumplen dentro del blog.
Cuando hagas los cambios que dije anteriormente en tu blog las hojas de estilos que se usaban anteriormente ya no tendrán ningún efecto, lo que te obligara a tener que diseñar tus propios estilos CSS, la ventaja de esto es que aprenderás a crear y editar CSS junto con HTML, pero si crees que aún no puedes hacerlo quédate usando todo lo que trae por defecto el blog hasta que estés listo para dar el siguiente paso.
