¿Te gusta esto?... Entonces que no se te olvide compartirlo ;)

Dise√Īa tus propias hojas de estilos CSS para un blog

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.

Dise√Īa tus propias hojas de estilos CSS para un blog

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.

¿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: &lt;head&gt; &lt;
  • Luego debes buscar </head> y reemplazarla por esta otra l√≠nea: &lt;/head&gt;&lt;
  • 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 &lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<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.
Usamos cookies propias y de terceros que recogen datos sobre sus h√°bitos de navegaci√≥n. Si contin√ļa navegando se considerar√° que acepta su uso. OK M√°s informaci√≥n aqu√≠