El diseño "prefijado" nos lleva muchas veces a coincidir con las presentación que otros usuarios han decidido utilizar en sus creaciones. Es como cuando vas a un gran almacén a comprar ropa y al día siguiente, cuando estrenas tu adquisición, te das cuenta de que hay mucha gente que ha elegido lo mismo que tú.
Personalizar tu plantilla es fácil con las herramientas que Google te ofrece dentro de Blogger por medio del Diseño y las opciones avanzadas de plantilla, pero muchas veces necesitamos ir más allá y modificar aspectos que Blogger no nos deja modificar. Por ejemplo, un centrado del título de todo el Blog, cambiar el tamaño de las columnas de alguna tabla concreta, etc... Cuando requieres ir más allá de lo que la propia plantilla y la herramienta de Blogger te ofrece, necesitas cambiar las hojas de estilo ".css" que utilizas en tus páginas.
Si quieres personalizar a tu gusto con total libertad las plantillas o partes del contenido de ellas que Blogger te ofrece, entonces este artículo te interesa.
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).
El Detalle paso a paso:
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 estilos (.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.
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.
Cualquier duda, por favor, utilizad los comentarios habilitados a tal efecto en la entrada.
Mil gracias.
ResponderEliminarPoco a poco voy intentando aprender, y estos tutoriales facilitan mucho las cosas.
Ni te imaginas lo que nos costó centrar el logo y el texto, al final lo conseguimos a través de los usuarios de Blogger copiando y pegando. No se si seríamos capaces de volver a hacerlo. Nos encantaría ir haciendo cosas en el blog, pero nos da miedo por si metemos la pata y lo perdemos, jajaja. Las explicaciones que das son sencillas y fáciles de seguir. Encantadaaas. Soy Piluca de 40ytantas. http://40ytantas.blogspot.com
ResponderEliminarHola Miguel, yo otra vez. Te iba a dar una sugerencia que a lo mejor puedes ayudarnos. A nosotras, al igual que a muchos blogs, nos encantariá quitar la verificación de que no eres un robot a la hora de enviar un comentario. "Es un rollo" y muchas veces ni se entienden los textos, pero no sabemos como quitarlo. A veces cuando pruebas un par de veces y ves que no atinas pasas y no dejas o te dejan comentario. En tu blog también sale. Besoooos
ResponderEliminarGenial explicacion pero mi problema es diferente. Modifique el css para que en la pagina principal de mi blog H1 sea el titulo y H2 los titulos de los post. Una vez entras en los post lo modifique para que el titulo del blog desaparezca y se convierta en H1 el titulo del post y es ahi donde la imagen de mi encabezado se ensancha sin saber porque.
ResponderEliminarEspero que me puedas ayudar porque creo que el tema va con condicionales ya que en inicio esta bien y en las paginas y en los post mal. Saludos.
Es por la diferencia entre el tamaño del marco en la página principal y en las entradas. Al haber diferencia, la imagen sale bien en uno y con la relación de aspecto alterada en los otros. Dame la Url de tu web para poderlo ver y buscar una buena solución.
EliminarMIGUEL,GARCIA SANCHEZ.
ResponderEliminarCONTACTAME EL LUNES POR EMAIL A AGENTESECRETO698@GMAIL.COM
QUIERO QUE ME EXPLICES UNA COSA NO ES NADA MALO
Gracias por compartir la información!
ResponderEliminarMe ha servido de mucho. Un saludo
Para lo que necesites Coworking Mostoles. Un saludo.
EliminarEstimados:
ResponderEliminarEn mi blogger: liceojtm.blogspot.com no logro centrar la insignia.
¿Dónde debo poner el código para centrar? No puedo hacerlo directamente desde el blog "redactar" porque aparece sólo como gadget en el diseño de la plantilla.
Se agradece desde ya.
Saludos
Patricio
Estimados:
ResponderEliminarEn mi blogger: liceojtm.blogspot.com no logro centrar la insignia.
¿Dónde debo poner el código para centrar? No puedo hacerlo directamente desde el blog "redactar" porque aparece sólo como gadget en el diseño de la plantilla.
Se agradece desde ya.
Saludos
Patricio
hola,
Eliminaren blogger, en el menú de la izquierda selecciona "plantilla" y dale a "avanzado". Dentro en las opciones que aparcen busca "Avanzado" y "Añadir css" y escribe:
.header-inner .Header #header-inner {
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
text-align: center;}
Gracias amigo me sirvio!!!!!!!! bless
EliminarMe alegro un montón. Cualquier cosa aquí estoy. Un saludo!
EliminarHola Miguel, una pregunta, la persona que ya tiene su blog tiene que comenzar de cero con esto, o se puede implementar en el que ya tenemos.
ResponderEliminarGracias por la información
Pury
Hola Pury,
Eliminareso es una personalización de hojas de estilo a implementar en el que ya tienes (o en uno nuevo si lo prefieres). Para personalizar tu Blog te recomiendo estas lecturas:
1) Si quieres una personalización especial puedes contactar conmigo en miguelcolomer@gmail.com.
2) Si quieres personalizarlo tú misma dispones de los siguientes tutoriales en Diarios de la nube para hacerlo:
- Para crear un Blog NUEVO desde 0: http://www.diariosdelanube.com/2013/06/la-guia-paso-paso-para-crear-un-blog.html
- Para personalizar la plantilla de tu Blog para ordenadores: http://www.diariosdelanube.com/2013/11/personaliza-tu-plantilla-blogger.html
- Para personalizar la plantillas de tu Blog para móviles:
http://www.diariosdelanube.com/2013/11/personaliza-tu-plantilla-blogger-para.html
- Para personalizar los menús de tu Blog:
http://www.diariosdelanube.com/2013/11/creacion-y-personalizacion-de-menus-en.html
¡Un saludo amiga!
Para crear un Blog NUEVO desde 0: http://www.diariosdelanube.com/2013/06/la-guia-paso-paso-para-crear-un-blog.html
ResponderEliminarGracias Fiestas infantiles, quizás sea buena idea poner en el título lo de NUEVO y así sea más fácil de encontrar.
EliminarUn saludo y gracias por comentar.
Gracias por la ayuda. Quisiera saber si sabes más trucos para personalizar la plantilla del Blog. Te lo agradecería mucho si me dijeras otros diferentes para destacar mi blog entre el resto. Deberías ir agregando una seccion mas al sitio web sobre Plantillas Blogger. Hasta luego.
ResponderEliminarHola Jhonny,
Eliminarmuchas gracias por la recomendación , lo tendré en cuenta :)
Para destacar, lo más importante es el contenido, si bien la presentación ayuda lo que te ayudará realmente a destacar es tu contenido original.
Te recomiendo estas lecturas:
- Sobre SEO y posicionamiento:
http://www.diariosdelanube.com/2013/09/aprende-practicar-seo-y-mejorar-el.html
- Sobre presentación y plantilla:
http://www.diariosdelanube.com/2013/11/personaliza-tu-plantilla-blogger.html
http://www.diariosdelanube.com/2013/11/personaliza-tu-plantilla-blogger-para.html
http://www.diariosdelanube.com/2014/02/que-es-responsive-design.html
http://www.diariosdelanube.com/2014/02/como-funciona-el-responsive-design.html
Y por supuesto me tienes aquí para cualquier duda que te surja.
Muchas gracias por participar.
Hola, antes que nada, que buen post, interesante! Bueno, ahora si una consulta, en mi plantilla no aparece las hojas de estilos de blogger, pero gracias a mi navegador he podido descargarlo. Hice una barra de menú con submenu, para no tener problemas, le puse clases y id personalizados. El código lo probe en una .html en blanco y funcionaba; cuando lo pegue en blogger, solo funciona una milésima de segundo(porque veo el color que le puse) y luego cambia todo. Que puede ser que lo este modificando?
ResponderEliminarHola Abel,
Eliminarun placer ayudar. Verás, lo que te sucede es porque te has descargado una versión gratuíta de una plantilla que sólo te la dan liberada cuando pagas. Aunque es fácil llegar a saltarse esa protección, no te lo recomiendo no sólo a nivel ético sino además porque pueden penalizarte en tu posicionamiento al hacerlo.
Aunque sobreescribas la CSS, los que crearon la plantilla crearon un mecanismo para que prevalezca siempre la suya.
De todas formas, el precio de una plantilla en Internet es bajo, por ello, te recomiendo que si te gusta la pagues y te la descargues "liberada" para poder aplicar tus propios estilos.
Cualquier duda aquí me tienes para resolverla.
Un saludo y muchas gracias por participar.
Hola! Soy nueva en esto de los bloggs y bueno, estoy intentando arrancar :) Me he descargado una plantilla, pero no logro poner el título de mi blog en la cabecera, integrada con la plantilla... Alguien sabe cómo puedo hacerlo? o donde puedo ponerlo en HTML? GRACIAS!! :D
ResponderEliminarHola!,
Eliminarhay muchas formas de hacerlo.Pienso que esta entrada te podría venir muy bien porque es para tocar la cabecera del Blog, si no tienes mucha experiencia te servirá: http://www.diariosdelanube.com/2013/05/anade-una-buena-imagen-de-fondo-al.html
copia esa dirección http que te he pasado en la barra de direcciones de tu navegador para ver cómo hacerlo.
Por supuesto cualquier duda aquí estoy para eso, pregunta lo que necesites.
Un saludo!
hola me podria ayudar, necesito organizar mi blog, ya q la plantilla se encuentra desorganizada, y no esta en columnas, sino en una sola columna
ResponderEliminarhola me podria ayudar, necesito organizar mi blog, ya q la plantilla se encuentra desorganizada, y no esta en columnas, sino en una sola columna
ResponderEliminarHola,
Eliminarte recomiendo esta lectura para eso: http://www.diariosdelanube.com/2013/11/personaliza-tu-plantilla-blogger.html
Un saludo.
Hola, estoy iniciando mi propio blog en blogger. Me descargué una plantilla que se amolda a lo que quiero, ya modifiqué las cosas básicas que no me gustaban. Ahora mi duda viene porque la plantilla tiene un poco el estilo de una página web normal, quisiera saber cual es el formato html o cómo tendría que hacer para por ejemplo, en una sección que se llama "viajes" cuando alguien le de clic de verdad vaya hacia ese punto, así como por ejemplo en tu web esta "seo", "propuestas", etc. De verdad que le he intentado de todas las maneras que conozco y no me funciona, no sé si no es válido para blogger pero me interesaría saber si tienes ayuda para mi en esto. Muchas gracias de antemano.
ResponderEliminarHola, estoy iniciando mi propio blog en blogger. Me descargué una plantilla que se amolda a lo que quiero, ya modifiqué las cosas básicas que no me gustaban. Ahora mi duda viene porque la plantilla tiene un poco el estilo de una página web normal, quisiera saber cual es el formato html o cómo tendría que hacer para por ejemplo, en una sección que se llama "viajes" cuando alguien le de clic de verdad vaya hacia ese punto, así como por ejemplo en tu web esta "seo", "propuestas", etc. De verdad que le he intentado de todas las maneras que conozco y no me funciona, no sé si no es válido para blogger pero me interesaría saber si tienes ayuda para mi en esto. Muchas gracias de antemano.
ResponderEliminarUtiliza un menú, esta guía puede ayudarte: http://www.diariosdelanube.com/2014/05/como-poner-un-menu-en-blogger-sin-tener.html
EliminarY cualquier duda aquí me tienes.
Un saludo!
Hola tengo una plantilla que no he podido traducir al español las palabras By -POst on, comments y Read more ,, que aparecen en cada entrada, pues he ido a editar el html y no aparecen en el código como para reescribirlas como ya lo he hecho en otras plantillas. La plantilla en cuestión es http://demo.mybloggerthemes.com/2015/03/mystery-blogger-templates.html
ResponderEliminarperdón el enlace estaba roto, es esta; http://demosleok.blogspot.cl/
ResponderEliminarHola, busca en esta misma web el traductor. Incorporé hace tiempo un tutorial para ponerse un traductor con banderas. Pon en el buscador traductor y te saldrá, es muy fácil de poner.
EliminarUn saludo!