.

7 de abril de 2013

Modificar el CSS en Blogger

Escrito por
El CSS es un lenguaje de estilos, un lenguaje que se utiliza para expresar el formato de los textos, espacios, marcos etc. de una página Web, o en nuestro caso de un blog de Blogger. Teniendo claro qué es el CSS, y que existen varias variantes conocidas como CSS2 y CSS3, vamos a ver como podemos modificar el código CSS de Blogger para modificar la apariencia de nuestra plantilla. Es decir, que podemos hacer para que las letras de todos los posts adopten un tamaño, tipo de letra o formato determinado. De esta forma se puede hacer que las listas de objetos o las citas entrecomilladas tengan un aspecto diferente, o modificar la apariencia de los títulos.

Existen tres formas de implementar los códigos CSS. El primero es desde una página externa subida dentro de nuestro hosting, el segundo que es el que emplea Blogger por defecto es insertar dentro de la plantilla una página de estilos, que se aplicará a todo el documento. La tercera que es la más acticuada es insertar los estilos directamento dentro de las etiquetas de HTML, como por ejemplo en el interior de la etiqueta <div>, algo que hoy en día se usa lo mínimo possible.

1. CSS en Blogger con una hoja de estilos externa. En principio esto no puedes realizarlo en Blogger porque el hosting no lo controlas, pero si tienes aparte otra página Web con tu propio dominio y un hosting asociado, podrías colocar allí una hoja de estilos y añadir algún código en la plantilla para buscara la información del CSS en ese archivo. Algo así.
<link rel=stylesheet type="text/css" href="http://www.dominio.com/styes.css">

2. CSS en Blogger en una hoja de estilos interna. Al inicio de nuestro blog ya hay una zona dedicada al CSS , para modificarla tienes dos opciones. Si sólo quieres cambiar colores o añadir algún comando adicional lo puedes realizar desde el editor de Blogger, aunque lo mejor para aprender es hacerlo a través de la plantilla de HTML. Al editar la plantilla debes buscar la zona que hay entre los códigos.

<b:skin><{[CDATA[/*            ......                         ]]></b:skin>

Esta zona que está en la cabecera es una hoja de estilos de CSS incrustada, la puedes modificar para que tenga las características y fuentes que quieras, y si se va a usar una página de CSS externa lo mejor es borrarlo.

3. CSS en Blogger dentro del post. Si quieres añadir estilos CSS a una parte concreto de un post que no está señalizado con una etiqueta específica, debes seleccionarlo con la etiqueta style, colocando el siguiente código al inicio del texto: <span style color='red'> y luego cerrando la etiqueta con </span>. El atributo style se puede usar con otras etiquetas como <h1>, <div>, <p>, modificando la apariencia específica de una párrafo, título, etc. También se puede aplicar la estiqueta style, pero si se hace así además del selector, en la página de estilos CSS al inicio de Blogger deberá explicar cual es el formato para este estilo.

4. CSS de Blogger desde el editor de plantillas. Para aquellos que no quieren meter mano directamente al código de la plantilla Blogger te permite modificar los códigos desde un editor de plantillas. El editor de plantillas funciona de dos formas.

  • Te permite seleccionar valores para algunas variables (colores, tipo de letra, tamaño del texto... ) Esto es posible porque dentro de las plantillas de Blogger hay un apartado llamado Variable Definitions que es el que gestiona estos cambios. Si hacemos una plantilla de Blogger desde cero sin este apartado, entonces no podemos tocar las variables desde el editor.
  • Te permite insertar un fragmento de CSS sin abrir la plantilla. Lo que no queda claro es exactamente en que lugar de la plantilla se pega, así que para asegurarse de que se cambia el CSS tendrás que usar la propiedad ¡important con cada orden que des.

2 comentarios:

  1. Y si lo que necesito es que el visitante pueda elegir entre dos formas de ver el blog, por ejemplo en mi blog de astronomía, visión nocturna en rojo y negro y visión diurna con los colores originales del blog, incluyendo dos botones en un gadget quepueda elegir entre las dos formas de ver el blog. La intención es cambiar sólo los colores de los todos los textos del blog al rojo y el fondo del blog al negro. pero que pulsando el otro botón el blog se muestre en vista diurna ó original. Tengo un blog de Astronomía y la visión nocturna empieza a ser un imperativo dad la afluencia de visitantes. saludos!

    ResponderEliminar
    Respuestas
    1. Juan Carlos, intereante lo que comentas. No creo que eso sea posible hacerlo en Blogger, y la verdad que tampoco veo claro como hacer-lo en una página externa. Para lo que comentas al apretar el botón se tendría que cargar un CSS diferente. Se podría solucionar duplicando la Web, con dos CSS diferentes, pero eso traeria muchos problemas. Tiene que existir una solución más elegante. Lo voy a mirar.

      Un saludo.

      Eliminar

Bienvenido, en este blog encontrarás información para crear y personalizar tu blog de Blogger o Wordpress, además de artículos sobre Internet, las nuevas tecnologías, programación con HTML y CSS, educación y otros temas. Espero que los tutoriales, artículos y recursos del blog te resulten útiles. Si quieres mantener el contacto puedes hacerlo a través de mis cuentas de Twitter o Google Plus.