Con un poco de creatividad se pueden obtener resultados altamente satisfactorios que te permitirán llevar los detalles que siempre has querido plasmar en tu plantilla a la realidad. No hay porqué conformarse con las ideas prefijadas de otros diseñadores, podemos aventurarnos a descubrir lo fácil y divertido que puede ser fabricar nuestros propios estilos.
En esta entrada me propongo hacerte una guía que cubra todas las posibilidades existentes para trabajar con hojas de estilo en Blogger. Voy a darte claves para que llegues a darle tu toque personal a "esa plantilla" que llevas utilizando desde hace tanto tiempo y sobre la que quieres realizar algunos cambios visuales y "nunca te has atrevido".
Repaso de conceptos previos:
Conviene aclarar dos conceptos fundamentales con los que vamos a trabajar para personalizar la presentación de nuestro Blog.
La Plantilla de Blogger:
Es una representación esquemática que sintetiza código HTML en etiquetas propias que al ser interpretadas por el servidor de Blogger conforman la presentación del blog. Al ser reutilizadas por todos los usuarios no podemos alterarlas sólo para nuestros intereses. Es por ello que cuando queremos "ir más allá" de lo que ofrecen a nivel básico, debemos reescribir algunos de los elementos que las componen. Entre esos elementos citados se encuentran las hojas de estilo, pilar básico del aspecto y formato de nuestras páginas en Blogger o en cualquier "publicación web".
Las hojas de estilo (.css)
Con Blogger las plantillas se basan fundamentalmente en hojas de estilo. Esta clase de archivos tienen la extensión .css: Hojas_de_estilo_en_cascada. Este tipo de archivos contienen la información semánticamente construida de los elementos que en la página HTML constituirán el aspecto y el formato de los componentes que la integran.
Dos formas de modificar la presentación de tu plantilla mediante hojas de estilo:
Blogger, al igual que cualquier otra creación web, trabaja con Hojas de estilo que residen en sus servidores web (predefinidas) que podemos sobreescribir para darles el formato que nosotros prefiramos. También contamos con hojas de estilo que podemos crearnos "a parte" y alojar en otros servidores, donde definir nuestro propios componentes para luego utilizarlos en nuestro Blog.
- A- Hojas de estilo predefinidas, "sobreescribiendo" lo prefijado.
La manera más fácil de personalizar nuestras hojas de estilo es aprovechando las que Blogger trae por defecto en nuestra plantilla para alterar aquellos parámetros que deseamos.
El concepto en este caso es "sobreescribir" lo que ya se utiliza con los valores que nosotros queremos utilizar. Por ejemplo, pongamos que tenemos las entradas sin un "marco" a su alrededor con borde y deseamos que se muestren con un pequeño borde que las diferencie del contenido que las rodea. Lo que tendremos que hacer es buscar qué "clase" o "parte de código" se encarga de controlar el aspecto de de las entradas en nuestro Blog en su hoja de estilo. A continuación haré una pequeña guía para localizar esa clase de componentes en tu Blog y poderlos modificar.
- B- Hojas de estilo propias, creando nuestra propia presentación:
Si disponemos de conocimientos de programación podemos realizar nuestras propias "clases" de presentación de objetos en página para darles el formato que deseamos. Esta opción es muy utilizada por los creadores de plantillas diseñadas "fuera" de Blogger.
Se crean sus propias imágenes, "cajas de texto", estilos de letra, tamaños de marcos, tablas, etc... para componer una plantilla que después utilizar en su propio Blog o proporcionar a otros para que la utilicen si lo desean.
Paso a Paso:
IMPORTANTE: Para alterar las hojas de estilo puedes crearte un "Blog de pruebas" sobre el que puedas realizar cambios sin afectar al tuyo. De todas formas, realizar cambios en la plantilla que utilizas no tiene ningún "peligro" siempre que realices una copia de seguridad de la misma. Si aún no lo has hecho, pulsa aquí para aprender cómo.
A- Sobreescribiendo la hoja de estilos de nuestro Blog, cambiando las clases que necesitamos:
NOTA: El ejemplo que voy a realizar para explicar cómo sobreescribir la hoja de estilos del Blog lo haré con el navegador Google Chrome. No obstante, Microsoft Internet Explorer o Mozilla Firefox disponen también de "herramientas del desarrollador" para realizar los mismos cambios. En Chrome o Explorer bastará con pulsar F12 para acceder a las herramientas, en Firefox será necesario instalar "Firebug" para poder trabajar con ellas
Siempre podrás alterar tu código en dos pasos: primero localizas el código y luego lo sobreescribes en Blogger.
Localiza tu código, a qué clase pertenece el objeto que deseas configurar:
1) Con nuestro Blog abierto pulsamos la tecla F12. A continuación se abrirá una división en la parte inferior del navegador que mostrará el código fuente de la página que se está visualizando.
Detección de clase de hoja de estilos asociada a elemento en pantalla para su posterior personalización
2) Pulsa primero el icono de la "lupa". marcado en rojo en la imagen superior. Se encuentra en la parte inferior de la pantalla, es el tercer icono de la parte inferior contando de izquierda a derecha.
3) En modo "lupa" , el ratón se convierte en un "localizador" de código fuente asociado a la presentación:
Simplemente, en el área de visualización del navegador, mueve el ratón por encima de la pantalla y ve al objeto o parte del Blog cuyos estilos desees alterar. Verás que al mover el ratón por encima de los objetos, Chorme te proporcionará valiosos datos de los mismos: nombre de la clase asociada (en este claso "jumplink") ancho y alto en píxeles, área real que está ocupando en la página, etc...
La parte inferior, la que tiene el visor de código, si haces "CLIC" sobre el objeto deseado irá cambiando para mostrarte el código fuente asociado a ese punto de la pantalla donde tienes colocado el ratón. En la pantalla de ejemplo lo he puesto sobre "Más información" para localizar el código fuente asociado a dicho enlace y poder cambiar su aspecto.
En la parte derecha del visor de código nos fijamos en las propiedades que tiene dicha clase para alterar su formato.
4) Puedes localizar el código fuente asociado a la clase
En el código se aprecia que el "class id", la clase que encargada de la presentación en la hoja de estilos del enlace "más información, es "jump-link".
Podemos incluso probar nuestros cambios antes de pasarlos a la plantilla Blogger. Simplemente, cambia los valores de Width o Height sobre el código seleccionado y verás cómo va modificando su aspecto en el área de visualización.
El estilo también puedes recuperar del .css que tienes incluido dentro del código <head> de tu página. Simplemente haz "clic" derecho sobre tu blog, pulsa "ver código fuente" y busca los .css asociados. Después dentro de cada .css puedes coon CONTROL+F acceder a las propiedades del mismo para llevarte su código y sobreescribirlo con los cambios que deseas.
Luego simplemente copia las partes de código que deseas alterar. Fíjate a qué clase pertenece el objeto (este por ejemplo pertenece a la clase "a") para saber qué propiedades darle después.
Sobreescribe el estilo localizado en Blogger:
5) Dentro de Blogger, en el menú de la izquierda, dirígete a la opción "Plantilla" y selecciona el botón "Personalizar". He marcado con reborde rojo el botón para personalizar plantilla.
6) En la página de personalización de plantilla, en el menú superior izquierdo selecciona la opción "Avanzado". La he marcado en naranja en la pantalla inferior.
Personalización de Plantilla
7) Al pulsar en avanzado nos aparece la página de personalización avanzada de plantilla. Si bajas el "scroll" del menú que ha salido tras pulsar "Avanzado" te aparecerá una última opción llamada "Añadir .css". Pulsa sobre dicha opción. En la pantalla inferior está marcada en naranja.
Pulsamos en Avanzado para editar css
8) En la caja de texto grande en blanco sobreescribirás la clase o propiedad de la plantilla de Blogger del .css que utiliza.
Sobreescritura de css
.jump-link a{ <!-- Se está trabajando con .jump-link que pertenece a "a" -->display:block;width:120px;height:32px;background: url(mi_imagen.gif) no-repeat left top;text-indent:-9999px;}
- Observarás que cuando pongas tu imagen dentro del código, automáticamente en la vista previa podrás ir viendo cómo queda. Si alteras el width (ancho) o el height (alto) podrás hacer que ocupe el espacio que deseas.
Otros ejemplos de sobreescritura de elementos localizados en el código:.main-inner{ <!-- Se están sobreescribiendo los valores de main.inner para poner los bordes -->padding:15px 0px 20pxpadding-top: 15px;padding-right: 3px;padding-bottom: 20px;padding-left: 5px;}.post-outer { <!-- Se están sobreescribiendo los valores de main.inner para poner los bordes -->background-color: #ffffff;border: solid 1px #dddddd;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-goog-ms-border-radius: 5px;padding: 15px 20px;margin: 0 -29px 20px;}
- En los .css la imagen debe medir el espacio que va a ocupar, es decir, el width y el height no van a modificar su tamaño original.
B- Utilizando nuestras propias hojas de estilo:
El Resumen para los más Expertos:
Para evitar a los usuarios con conocimientos avanzados tenerse que leer el ejemplo completo, a continuación expongo a modo resumido los pasos fundamentales para personalizar la plantilla Blogger. Después, para las dudas, el detalle o los usuarios con menos conocimientos en la materia, expongo un ejemplo paso paso que con el máximo de detalle.
Cómo personalizar la plantilla blogger a través de las hojas de estilo - Usuarios con conocimientos Avanzados
1) La plantilla de Blogger utiliza etiquetas propias que después el navegador interpreta traduciendo en código fuente de diferentes propósitos. Dentro de ese código fuente, en el "<Head>" están las hojas de estilo o .css. Las hojas de estilo indicarán al navegador qué aspecto y formato deben tener los componentes de la presentación de tu página.
2) Viendo el código fuente de tu página, localiza las clases de las hojas de estilo que afectan a la zona o zonas que deseas personalizar de tu página. A continuación sobreescribe la clase añadiendo las propiedades que te interesen y guárdalas en un fichero .css. Será el fichero .css alternativo que sobreescribirá el comportamiento de la clase Blogger para la clase de la hoja de estilos que hayas seleccionado.
3) Sube el .css a Google Drive para acceder a él editando el HTML de tu plantilla Blogger y escribiendo antes del cierre del "<head>" ("/head") el link al .css modificado con un enlace HTML estándar para .css: <link href='URL_DE_GOOGLE_DRIVE/tu_estilo_sobreescrito.css' rel='stylesheet' type='text/css'/> (el href debe ir en una misma líena sin retornos de carro ni separaciones).
Ejemplo para centrar el título de tu Blog en el navegador - Usuario con conocimientos Básicos:
Vamos a cambiar la plantilla de base del blog para personificarla de manera que el título y la descripción del Blog queden centrados en el navegador como os muestro a continuación. De esta manera veremos el detalle completo de los pasos a realizar para modificar la plantilla base sobre la que ponemos nuestro Blog.
La página de Diarios de la nube con la plantilla Traveller por defecto de Blogger:
La misma página principal con la Plantilla personificada para centrar el título y la descripción del Blog:
1) En primer lugar realiza una copia de seguridad de tu sitio. La colocación de una hoja de estilos (".css") en tu blog requiere realizar unas modificaciones en código que, aunque realmente sencillas, requieren que previamente tengamos a buen recaudo nuestro código original, de manera que siempre podamos "volver atrás" ante cualquier error. No dejes de realizar esta guía paso a paso para salvaguardar tu blog.
2) En este ejemplo vamos simplemente a centrar el título del Blog. Para localizar el título vamos a nuestro navegador y una vez cargado el blog hacemos "clic" con el botón derecho del ratón y pulsamos "Visualizar código fuente".
3) En ese código fuente hacemos un "buscar" en el navegador para localizar el título de nuestro blog. En mi caso, como utilizo "FireFox" pulso CONTROL + F y escribo "Diarios de la nube".
4) Localizo el siguiente texto que se encuentra en un h1 cuya clase es "title":
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
Diarios de la nube
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span>Tecnología, ayuda al Blogger, ocio, consumo y opinión en la nube.</span></p>
</div>
</div>
En la pantalla superior podemos ver la búsqueda del código encargado del título y la descripción del blog.
5) Como quiero centrar el título del blog y su descripción, me centro en el "<div" llamado "header-inner" porque contiene en su interior el "<div class = 'tittlewrapper" para el título y el "<div class='descriptionwrapper'>" con la descripción.
Los div o capas que ha dibujado Blogger por medio de la plantilla que utilizo en mi blog le están "diciendo" al navegador que en una de las hojas de estilo .css que utilizo en mi página hay un identificador "header-inner" destinado a almacenar cómo deben dibujarse el título y la descripción en cuanto a formato y aspecto.
6) Volviendo al código fuente de mi página, localizo los .css que utiliza mi blog (están unas líneas más abajo de la etiqueta HTML <head>.
<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/xxxxxxxxxx- widget_css_2_bundle.css' />
<link type='text/css' rel='stylesheet' href='xxxx.css' />
<link type="text/css" rel="stylesheet" href="xxxx.css"/>
7) Como he utilizado el widget "cabecera" para hacer el texto, sé que si quiero modificar aspectos de presentación del título tendré que quedarme con el .css que referencia a las hojas de estilo de los widget: //www.blogger.com/static/v1/widgets/xxxxxxxxxx-widget_css_ 2_bundle.css
8) pongo en el navegador la URL para para descargarme el archivo .css (si el navegador te lo descarga todo en una sola línea, muévelo a un editor de HTML para poderlo manejar con comodidad).
9) Dentro del .css busco el id que contenía el título: 'header-inner'. Dentro de 'header-inner' el '.Header' contiene simplemente el margen superior que la capa del título y la descripción debe tener, el margen izquierdo, el derecho, etc...
.header-inner .Header {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
text-align: center;
}
Añadimos la propiedad "text-align: center;" y así hacemos que el texto del título y descripción que se dibuje dentro de la capa del .header-inner siempre aparezca centrado.
10) Como de la plantilla original SÓLO quiero cambiar el centrado del título, extraigo la clase .header-inner para crearme una hoja de estilos personalizada que centre el título. Blogger no me va a dejar hacer el cambio en la .css que él maneja (porque la utiliza más gente), así pues debo crearme mi "propia" .css para sobreescribir la clase "header-inner" según mis preferencias.
11) Me creo un archivo propio "centrar_titulo.css" con el contenido del paso 9) en su interior. Acto seguido lo subo a googledrive y lo pongo como público. Anotad la URL que devuelve googledrive para acceder al .css con el que sobreescribo la hoja de estilos para título y descripción de mi blog.
 |
| NOTA: La hoja de estilo se encuentra compartida por si deseas utilizarla de base. Es muy importante que se de la situación si quieres emplearla, de que tu plantilla utilice la clase header-inner igual que la mía para el título y la descripción. Si es tu caso, puedes pasar directamente al paso 13). |
12) En vuestro escritorio blogger, dirigiros a la opción de menú plantilla y pulsad "Editar HTML".
13) En el código fuente de vuestra plantilla añadid justo antes de la etiqueta "</head>" el enlace en Google Drive a vuestro .css con este código: <link href='URL_DE_GOOGLE_DRIVE' rel='stylesheet' type='text/css'/>. MUY IMPORTANTE: la URL de Google Drive debe quedar simplificada de esta manera "https://googledrive.com/host/0Bwgc28XHjPA2MWdCOXNadU0yVHM".
En mi caso el enlace quedaría así:
<link href='https://googledrive.com/host/0Bwgc28XHjPA2MWdCOXNadU0yVHM' rel='stylesheet' type='text/css'/>
Y por fin tendríamos personalizada la plantilla base de Blogger con los cambios que a nosotros nos interese. Simplemente buscad la .css que corresponda a aquello que queréis modificar y sobreescribidla con una vuestra que pueda estar disponible desde algún servidor de almacenamiento en la nube.Es muy importante que el código no se copie con retornos de carro o espacio en blanco inexistentes.
Con esta manera de trabajar con las hojas de estilos el límite es nuestra propia imaginación, dejaremos de estar atados a las plantillas prefijadas y podremos darle ese toque de personalidad que queríamos a nuestro pequeño rincón en Internet.
Creo que esta noche estoy un poco espesa porque me pierdo. Mañana me lo leeré otra vez que no me entero. Me parece muy complicado. Besoos http://40ytantas.blogspot.com
ResponderEliminarOOOOOhhhh lo que yo estaba buscando desde hace mucho tiempo. Gracias!!!
ResponderEliminarGracias Abel, cualquier cosa aquí me tienes!
ResponderEliminarMuy agradecido por la informacion.
ResponderEliminarSaludos.
A ti Giancarlo, un placer ayudar. Saludos!.
EliminarORACION PARA QUE TE LLAME EN 10 MINUTOS. (MAGIA BLANCA) Piensa en la persona con la que quieres estar di su nombre para ti 3 veces. Piensa en lo que quieres que ocurra con esta persona en la siguiente semana y repítelo para ti 6 veces. Ahora piensa en lo que quieres con esa persona y dilo una vez. Y ahora di Rayo de luz, yo te invoco para que desentierres a (G) de donde este o con quien este y le hagas llamarme hoy mismo enamorado y arrepentido. Desentierra todo lo que esta impidiendo que (G) venga a mi (C). aparta a todos los que contribuyan a que nos apartemos y que solo piense en mi (C). que el me llame ..Gracias, por tu misterioso poder que siempre cumple con lo que se pide esto lo hago con mucha fe Luego tienes que publicar la oración tres veces, en tres sitios diferentes. Suerte.
ResponderEliminarORACION PARA QUE TE LLAME EN 10 MINUTOS. (MAGIA BLANCA) Piensa en la persona con la que quieres estar di su nombre para ti 3 veces. Piensa en lo que quieres que ocurra con esta persona en la siguiente semana y repítelo para ti 6 veces. Ahora piensa en lo que quieres con esa persona y dilo una vez. Y ahora di Rayo de luz, yo te invoco para que desentierres a (G) de donde este o con quien este y le hagas llamarme hoy mismo enamorado y arrepentido. Desentierra todo lo que esta impidiendo que (G) venga a mi (C). aparta a todos los que contribuyan a que nos apartemos y que solo piense en mi (C). que el me llame ..Gracias, por tu misterioso poder que siempre cumple con lo que se pide esto lo hago con mucha fe Luego tienes que publicar la oración tres veces, en tres sitios diferentes. Suerte.
ResponderEliminarMuchas gracias amigo, siempre tus entradas tan claras y detalladas. Un abrazo
ResponderEliminarGracias Soledad, un placer ayudar. Con esto podrás cambiar cualquier parte de tu Blog retocando las hojas de estilo. Un saludo!!!
EliminarGran aportación, buscaba algo así para aprender. Compartido.
ResponderEliminarMe alegra que te guste Karmen. Es muy útil utilizar las herramientas de desarrollo de los navegadores para tocar las CSS y luego ponerlas modificadas en el Blog. Muchas gracias por tu feedback!.
Eliminar¿Se podrá modificar el CSS completo y pegarlo directamente en el editor HTML, borrando el archivo original?
ResponderEliminarHola,
Eliminarmi recomendación es que para la modificación, si tienes poca experiencia de programación, lo hagas con las instrucciones que van desde el paso 6). Ahí puedes copiar y pegar los cambios que hayas hecho con el "F12" del navegador. Fíjate que cierres bien las "}" de las clases y los finales de cada atributo con el ";" y con eso te funcionará.
Si esa opción no la tienes disponible porque es una plantilla comprada, no compatible con las plantillas de Blogger estándar, entonces, intenta pegar las clases antes de que cierre la etiqueta </b:skin de tu plantilla.
Cualquier duda, aquí me tienes.
Un saludo y muchas gracias.
Muy buen post !
ResponderEliminarUn saludo
Gracias Nerea, un placer ayudar. Cualquier cosa aquí me tienes. Un saludo.
Eliminarhola amigo quisiera que me ayudaras si es posible muchas gracias, me podrias ayudar a poner en mi blog de blogger esta parte donde puedo preguntar y tu me puedes responder? gracias amigo
ResponderEliminarHola, ¿qué duda tienes en concreto?.
EliminarUn saludo.
Excelente. Gracias por el aporte.
ResponderEliminarGracias a ti por tu feedback,
EliminarUn saludo.