Manual para blogger

Prólogo

2009-11-08T19:00:00.002+01:00

Este blog intenta ser un manual para quienes empiezan con el blog en blogger, por este motivo las entradas que vaya añadiendo, en cuanto feed burner las haya enviado a quien pueda estar suscrito a ellas, no se verán al principio del blog, sinó al final del mismo.

El motivo de su creación ha sido un comentario que recibí, en el que me decían que en los blogs de ayuda hay muchisima información, pero ésta se encuentra tan enredada que resulta difícil para un profano saber donde buscar la información que necesita.

Y tenía razón.

Quienes decidimos compartir esta información con los demás, solemos ir haciendo entradas de forma aleatoria, explicando las cosas conforme las descubrimos o encontramos, o basándonos en alguna demanda concreta que nos haya llegado via correo o comentario.

Por tal motivo he intentado organizar toda esta información y presentarla en el orden en que se puede necesitar al empezar un blog.

Aquí encontrarás, por este orden, como crear el blog, como configurarlo y como personalizarlo.

He reordenado las entradas de este blog para que puedas verlas en un orden lógico. El sistema de lectura es similar al de una página web. La primera entrada que veas es la primera que he escrito. Sigue el orden, pinchando en las flechas que te llevan hacia páginas posteriores y verás el manual completo.

En la columna de la derecha verás la lista de entradas y las etiquetas, que también te ayudarán a encontrar algo concreto.

No voy a explicar de nuevo cosas que ya he explicado en otros blogs, así que vas a ver, a lo largo del texto, enlaces que te llevan a explicaciones más extensas de algunos temas concretos.

Una vez acabada la explicación básica de creación y configuración, tras la entrada que trata de la pestaña Monetizar, encontrarás otras dedicadas a temas específicos.

En ellas dejaré enlaces a todas las entradas que haya hecho hasta el momento acerca del tema concreto de la entrada.

Cada enlace tendrá una breve explicación de lo que vas a encontrar en la entrada enlazada.

Por otro lado, verás bajo la cabecera unos botones que te llevan a otros blogs.

Tu blog y tu es el que hice para explicar la mayoría de cosas que intento ordenar aquí.

Básicamente todas las cosas que se necesita saber para que un blog funcione como es debido, sin tener que tocar para nada el código del blog.

Tuneando el blog se mete en los entresijos de la plantilla y te cuento como modificarla para colocar en el blog muchas cosas.

En Plantillas encontrarás muchas plantillas para tu blog. las he creado modificando las originales de blogger, con lo que funcionan perfectamente aquí.

Utilidades es la puerta a un conjunto de blogs en los que explico como utilizar todas las herramientas que google pone a nuestro alcance, de forma gratuita, por el simple hecho de tener una cuenta aquí.

En Música he tratado de explicar como obtener algunos de los reproductores que podemos añadir al blog para ofrecerla a nuestros lectores.

En Más cosas encontrarás explicaciones completas de como obtener complementos para el blog, como contadores, chats, etc.

El Directorio es un blog de una sola página, en el que hay listas y mas listas de enlaces a todas mis entradas, ordenadas por temas.

El Diccionario intenta ser una ayuda complementaria a quien no acaba de comprender las palabras que se ven en el código del blog, pero que, como no pueden modificarse, si vas a modificarlo a menudo es preferible que sepas qué significa cada una.

Y el Blog roll es un blog, todavía inacabado, en el que he enlazado algunos blogs de ayuda y en el que algún dia añadiré listas de blogs temáticos que puedan interesar.

Hay muchos mas blogs, como el dedicado a Facebook, el de Gadgets de google, etc.

A todos ellos puedes acceder desde el perfil que hay en cualquiera de los de arriba, ya que éste en el que estás lo he creado con una cuenta distinta que abrí hace tiempo, por motivos que no vienen al caso y en ella solo tengo éste.

Espero que este blog sea útil y cumpla su cometido.

Si tienes alguna idea para mejorarlo, agradeceré la compartas en un comentario.

Como crear un blog en blogger

2009-11-07T19:00:00.000+01:00

Capítulo 1 -Creación

¿Has llegado hasta aquí, ya sea a través de tu navegador o desde Tu blog y tu, porqué buscabas esta información? O quizá, en estos momentos, estés siguiendo el manual, aún no tienes blog y quieres saber como crearlo.

Si es así, lee atentamente los pasos que has de seguir para empezar esta aventura.

Lo primero que has de hacer, es pinchar en este Crear un blog que verás en la barra de navegación de muchos blogs.

Eso te abrirá esta página en la que tienes dos opciones, o usar la dirección de gmail, si ya la tienes, o crearte una nueva cuenta de correo en Google, para empezar.

Quizá pienses que si ya tienes una dirección de correo en otro sitio, ¿de que te sirve tener una más?, pero déjame explicarte algo:

Si creas tu blog con una cuenta diferente, hotmail, o cualquier otra, no podrás acceder a todas las utilidades que Google nos ofrece, de forma gratuita, para gestionar los blogs.

Estadísticas, álbumes web con las imágenes que subimos al blog y otras muchas cosas, que no funcionan igual si intentas acceder a ellas desde una cuenta que no sea de google.

Así que, si todavía no dispones de una cuenta de correo de google, gmail, créala rellenando todos los datos que te pidan en esa página. Luego continua con la creación del blog.

Si ya la tienes, pincha en primero acceda a ella si no estás en línea.

Si ya lo estás, si has entrado ahí desde tu navegador con la cuenta abierta, este paso te lo saltarás.

Si has pinchado en acceder verás esta página.

Una vez hayas accedido, o si ya estabas en línea, (lo que se llama login), te saldrá ésta.

Rellena la casilla del nombre, que será el que se vea como firma de tus entradas.

No tiene porqué ser el tuyo. Puedes usar un nick.

Marca la casilla de Acepto las condiciones y pincha en la flecha de Continuar.

Se abrirá esta página que es donde empieza realmente la creación del blog.

En ella le vas a dar título y dirección.

Aquí déjame que te de un par de consejos.

Ponle una dirección que sea fácil de recordar.

No por que tu no vayas a recordarla, sinó por quien pueda llegar a ser lector/seguidor de tu blog.

Hay quien le pone el título como dirección, pero eso no lo recomiendo, ya que el título del blog se puede cambiar, pero la dirección es para siempre.

Te pondré un ejemplo: Tengo muchos blogs de ayuda. Todos ellos tienen direcciones muy parecidas, laeulalia-tublog, laeulalia-musica, laeulalia-diccio, laeulalia-directorio, etc.

Como ves mi nick, laeulalia es común a todos, seguido de parte del título del blog.

Pero mi blog principal, Tuneando el blog, tiene como dirección laeulalia-blogdeprobes, lo que causa algún que otro trastorno al personal, ya sea por que lo escriben mal, ya sea por que les resulta difícil recordarlo.

Y lo bueno del caso es que se llama así por que eso era lo que iba a ser en principio, un blog de pruebas, que ha acabado siendo de los más visitados de todos los que tengo.

Y ahora ya no puedo cambiarle la dirección.

¡Bien! hecho este inciso, sigamos con la creación del blog.

Una vez que hayas escrito la parte que pones tu de la dirección, (fíjate que lo de http:// y lo de blogspot.com ya está escrito), has de comprobar que esa dirección que quieres usar está disponible, pinchando en esta frase que verás debajo.

Si está disponible te saldrá esto de que si lo está. Si estás segur@ de querer que esa sea su dirección (el título ya te digo que podrás cambiarlo cada vez que quieras), pincha en continuar.

El siguiente paso es escoger la plantilla de tu blog.

Por defecto está seleccionada la primera de todas, pero puedes elegir, ya ahora, otra diferente.

Baja la barra lateral, el scroll que hay junto a las plantillas, para ver todos los modelos de que dispones.

Puedes pinchar en vista preliminar para saber como son, (se abren en una ventanita aparte).

De todas formas, eso también puedes hacerlo después, tantas veces como quieras, para ir probando al natural cual de todos los modelos te gusta más. Incluso podrás ponerle alguna plantilla diferente, de las que hay en la red, (yo misma tengo muchas que ofrecerte).

Pero eso será más adelante. De momento vamos a terminar de crear el blog.

Marca la redondita de la plantilla que quieras, o deja la que te ofrecen.

Cuando estés pincha en la flecha.

Y se abrirá esta página en la que te dicen que ya está que ya tienes un blog.

Pincha en la flecha.

Lo primero que verás de tu nuevo blog será el editor de entradas. Tiene este aspecto.

Puedes empezar a escribir una entrada de verdad, o unas simples palabras para ver como sale todo. (En esta sección de Tu blog y tu, te explico todo lo que necesitas saber del tema de las entradas).

Una vez acabado el post, (o entrada), dale a Publicar entrada.

Se abrirá esta ventana en la que te dicen que ya está publicada.

Pincha en Ver blog (en una ventana nueva) para que el blog se abra en otra ventana.

Recomiendo abrir en otra ventana, porqué si has de modificar la entrada, resulta más sencillo hacerlo si tienes abierta esa página. Pinchando en Editar entrada puedes modificarla tantas veces como sea necesario.

EDITO: Ahora se ve distinto. En lugar de ésto se ve Ver entrada. Si has editado una entrada anterior es más práctico, pues no tienes que ir en su busca, pero si has editado una entrada recién hecha te resultará más práctico pinchar en Ver blog, arriba, que en Ver entrada, ya que este sistema la abre en modo busqueda individual y no permite ver el blog "normal". Aunque si quieres verlo en otra ventana, con pinchar en Ver entrada y luego en la cabecera de tu blog irás a la página principal y estarás en otra ventana.

Y este es el aspecto de un blog con una primera entrada sin importancia.

Puedes ver que, por defecto, el blog ya sale con algunos elementos, (gadgets) añadidos.

De todos estos temas, gadgets, elementos, etc. tienes cumplida información en esta sección de Tu blog y tu.

Una última observación: No olvides configurar el blog antes de seguir publicando entradas.

También puedes ver cómo hacerlo en Tu blog y tu, en esta sección, o seguir leyendo este manual.

¡Que lo disfrutes!.

¡Ah!, por cierto, tu blog saldrá en los buscadores, pero ten paciencia si no lo ves al momento. Suelen tardar un poco en enterarse de que hay un nuevo blog en la red.

Las cuentas de google

2009-11-07T15:06:00.000+01:00

En la entrada anterior explicaba que para crear un blog, cuando no tienes ninguno, el primer paso era crear una cuenta en google.

Fíjate bien que digo crear una cuenta en google, no en blogger. ¿Porqué? Por una razón muy sencilla: blogger es una más de las herramientas o aplicaciones, o como quieras llamarlas, que google pone a nuestra disposición por tener una cuenta con ellos.

Pero ¿que es una cuenta?

Una cuenta es la combinación de dirección de mail y contraseña que has de introducir para acceder a cualquiera de dichas aplicaciones, ya sea blogger, igoogle, o cualquier otra y aunque es preferible que la dirección de mail sea de gmail, puedes crear una cuenta en google con cualquier dirección de mail, ya sea hotmail, yahoo, telefónica, ono, o lo que se te ocurra.

La única diferencia estriba en que con una cuenta creada a partir de una dirección de correo de google, (gmail), accedes a todas las herramientas de google, mientras que con las otras que he mencionado y las que se me han olvidado, algunas de esas herramientas no son accesibles.

Por este motivo recomendaba que empezaras por crear una cuenta de correo en gmail.

De todas formas es posible que ya tengas un blog al que accedes con una dirección de correo de cualquier otro sitio y quizá pienses que si ahora creas una cuenta de gmail te verás obligad@ a empezar con un nuevo blog.

¡Bien! Esto no es así.

Porqué una vez creada la cuenta de gmail puedes trasladar tu blog de una cuenta a la otra sin perder nada de nada, ni entradas, ni imágenes, ni comentarios, ni gadgets. Nada.

El sistema para cambiar un blog de cuenta es sencillísimo. Empiezas por invitarte a ti mism@ como autor del blog, luego te otorgas privilegios de administrador/a y finalmente ya con todos los derechos en tu blog desde la cuenta de gmail, eliminas a tu otro yo, (el yo que creó el blog), definitivamente del blog.

Quizá te preocupe el hecho de tener que recordar dos direcciones y dos contraseñas.

Tampoco es problema y te voy a poner un ejemplo para que te quede más claro.

Pongamos por caso que la dirección con la que accedes a tu blog es: perico@hotmail.com y tu contraseña: periquito.

Creas una cuenta en gmail que sea: perico@gmail.com y la contraseña: periquito.

Con lo cual tan solo has de recordar que no es hotmail, sinó gmail.

¿Facil verdad?

Sigamos con el ejemplo.
Tienes un blog al que accedes poniendo como dirección: perico@hotmail.com y como contraseña: periquito
Entras en tu cuenta y en Configuración/Permisos envias una invitación para escribir en tu blog a perico@gmail.com

Entras en tu cuenta de gmail, accedes al correo (desde los enlaces que hay en la página principal de google) y recibes la invitación, pinchas en el enlace y aceptas ser autor/a de tu propio blog, accediendo desde la dirección de gmail.
Sales del blog y de la cuenta.

Vuelves a acceder a tu blog con la dirección de hotmail, vuelves a ir a Configuración/Permisos.
Allí verás que junto a tu otro yo, al que acabas de invitar, hay un enlace que dice: Conceder privigelios de administrador.
Pinchas y los concedes. Ya eres administrador/a de tu blog por partida doble.

En cuanto aparezca la frase Administrador del blog junto a tus dos nombres eliminas el primero que se ve, el de arriba, que es el que corresponde a tu cuenta inicial de hotmail.
Te pedirá confirmación. Aceptas.

Y ya está. Tu blog pasará a ser tuyo desde la otra cuenta, la de gmail, y podrás entrar y seguir editándolo y todo exactamente igual que antes.

Automáticamente se abrirá una cuenta a tu nombre, con la nueva dirección, en Picasa y todas las imágenes que añadas al blog desde ese momento estarán en ese nuevo álbum.
Aunque podrás seguir accediendo al álbum que se había creado antes, simplemente entrando en picasaweb con la dirección de hotmail, pero no cambies las imágenes de cuenta, ya que eso haría que cambiaran las direcciones, con lo que desaparecerían del blog.

En esta entrada puedes ver este proceso en imágenes y si lees los comentarios verás preguntas y respuestas referentes a ello.

Por otro lado, estoy mencionando herramientas o aplicaciones de google.
Si estás interesad@ en saber más acerca de estas opciones pincha en el botón Utilidades que hay bajo la cabecera. Es un blog que incluye otros, cada uno de ellos dedicado a una de estas aplicaciones.

Ya tengo blog, ¿que hago ahora?

2009-11-06T19:00:00.000+01:00

En la entrada anterior te decía que, una vez hecha la primera entrada y pinchado en publicar, vieras el blog pinchando en "Ver blog (en una ventana nueva)".

Si lo has hecho, seguirás viendo en la página, ventana o pestaña donde has escrito la entrada, las pestañas de navegación por el blog.

Ahora son 4: Creación de entradas, Configuración, Diseño y Monetizar.

Vas a ir descubriendo qué hay y para qué sirve cada una de ellas, pero lo harás paso a paso.

Y el primer paso, una vez creada la primera entrada, ya sea de prueba, o definitiva, (eso dependerá de lo claro que tengas a qué vas a dedicar el blog), es configurarlo.

No te asustes. Se trata tan solo de marcar algunas casillas para que, por ejemplo, si quieres que muestre la hora en la que has hecho la entrada, salga la de tu reloj, no la de otro país.

También puedes desear cambiar la forma en que se muestre el formulario de comentarios, o si quieres permitir que cualquiera pueda comentar, o si quieres moderarlos.

Otra cosa que puedes hacer es invitar a alguien a que escriba en tu blog, si vas a compartirlo con alguien y posteriormente, una vez que la otra persona haya aceptado tu invitación, darle permisos de administrador si ha de poder modificarlo.

Si eres nuevo en estos temas verás algunas cosas que te sonarán a chino, como el tema del feed del blog, pero no te preocupes, blogger ya sabe que no todo el mundo que abre un blog sabe lo que tiene entre manos y ya lo configura por defecto para que funcione sin tocar nada; así que todo lo que no sepas qué significa, déjalo como está. Quizá más adelante lo modifiques, pero lo harás sabiendo exactamente qué estás haciendo.

Cada vez que modifiques algún dato, en alguna de las páginas de Configuración, recuerda que has de bajar hasta el final de la página para guardar los cambios.

Cualquier cambio que hagas en estas páginas es modificable tantas veces como quieras.

En esta entrada de Tu blog y Tu, expliqué hace tiempo como configurar un blog.

Es una sola entrada en la que hago un repaso somero a cada pestaña pero, viéndola ahora, pienso que quizá necesites que te explique un poco mejor qué significa cada una de las opciones que te dan, así que vamos a ir viéndolas por páginas y te iré explicando el significado de algunas de las explicaciones que aparecen junto a ellas.

El perfil

2009-11-05T18:59:00.000+01:00

Cuando creas un blog, automáticamente se crea una cuenta en google a tu nombre. Este nombre aparecerá en tu perfil y será el que se vea cuando dejes un comentario.

Pero a veces veo comentarios en los que el nombre es el título del blog, lo que resulta chocante.

Te voy a poner un ejemplo para que me comprendas mejor.

Imagina que tu blog se titula: Migraciones de los pingüinos emperador y que ésto es también el nombre de tu perfil. Cuando dejes un comentario en algún blog, se verá ésto: Migraciones de los pingüinos emperador ha dicho.

Mi nombre es Eulalia y es el que figura en mi perfil. Si yo dejo un comentario en algún blog verás: Eulalia ha dicho.

Si alguien desea responderme suele escribir: Eulalia: bla bla bla, mientras que en el caso del ejemplo se tendría que decir: Migraciones: bla bla bla.

Y este ejemplo aún es bastante sencillo de abreviar o de utilizar. He visto nombres que son realmente difíciles de usar como tales a la hora de responder.

Con ésto quiero decirte que escojas un nombre o un nick más sencillo de usar en estas ocasiones.

En principio porqué tú no eres un blog, eres una persona que escribe un blog. Usar un apelativo normal te identificará mejor.

En segundo lugar por que será más útil a la hora de que te contesten.

Por otro lado, esta práctica crea un problema si abres otro blog en la misma cuenta, ya que estarás firmando con el título de un blog distinto cuando respondas en el segundo, lo que despistará a quien haya dejado el comentario.

Si ya tienes un perfil así y quieres modificarlo es muy sencillo.

En el escritorio, ahí donde ves los blogs que tienes y los que sigues, arriba a la izquierda está tu foto, si has subido alguna, y al lado verás editar perfil.

Pinchando ahí irás a la página de edición donde, en el apartado Identidad, puedes modificar el Nombre mostrado. Guardas perfil cuando acabes y ya está.

A partir de ese momento dejarás de ser algo, para ser alguien.

Configuración -Básico-

2009-11-04T18:00:00.000+01:00

Capítulo 2 -Configuración-

Al pinchar en la pestaña Configuración se abre la página en Básico. Es el primer enlace en una barra en la que hay algunos mas.

En estos momentos hay estos: Publicación, Formato, Comentarios, Archivo, Feed del sitio, Correo electrónico y móvil, OpenID y Permisos.

Cada uno de estos enlaces te abre una página nueva, en la misma ventana, para modificar otras cosas del blog.

Empezaremos por la página en la que estás: Básico.

Al principio de todo verás Herramientas de blog y a la derecha 3 enlaces: Importar blog - Exportar blog - Suprimir blog.

Esta herramienta es muy útil para guardar en tu pc una copia íntegra de tus entradas en lenguaje HTML, con lo que no podrás abrir el archivo de manera normal, pero si en algún momento necesitas recuperar el contenido de tu blog, en este aspecto, podrás recuperarlo.

Al exportar un blog se guardan en este archivo las entradas completas, con imágenes y comentarios. No se guarda ni la plantilla del blog, ni lo que tuvieras en la columna lateral.

Más información acerca de esta herramienta, en esta entrada.

Sigamos.

Título. Aquí puedes modificar el título de tu blog, si no te acaba de convencer el que hayas elegido.

Descripción. Puedes modificar o añadir una descripción, o subtítulo, a tu blog.

¿Deseas añadir tu blog a nuestras listas?. Si tu blog es temático, en cuanto el sistema se entere de que existe lo añadirá a las listas de blogs que se muestran cuando se realiza una búsqueda concreta mediante el botón blogs de la barra de google del navegador. Aquí puedes ver a que me refiero.

También verás que al final de esta explicación te dicen que el blog seguirá viéndose en tu perfil, a menos que lo ocultes y te dan un enlace para Editar este tema. Esto es por si, de momento, no te interesa que nadie vea que tienes un blog, accediendo a tu perfil, ya sea por que has dejado un comentario en otro blog, o por cualquier otro motivo.

El blog estará en la red, podrá ser encontrado y visto a través de una búsqueda, pero no se verá en la página de tu perfil público. Aquí tienes más información de este tema.

¿Deseas permitir que los motores de búsqueda encuentren tu blog?. Cada vez que alguien efectua una búsqueda en la red, ya sea a través de google, yahoo, live search, o cualquier otro busador, los robots de estos buscadores muestran una serie de resultados. Como sabes, tardan una cojonésima de segundo en ofrecértelos. Esto es por que estos robots efectuan una especie de barrido por la red para detectar cualquier novedad que se produzca y la almacenan, para mostrarla rápidamente.

Si marcas No, quizá ni tu mism@ puedas encontrarlo poniendo el título de tu blog en la barra del navegador. Solo se verá si se pone la dirección completa o se pincha en un enlace a tu blog.

Fíjate que en la descripción de esta pregunta te dicen que enviarán un ping a Weblogs.com

Quizá te preguntes qué diantre significa ésto.

Como te he dicho antes, los robots de los buscadores barren la red buscando novedades, pero este barrido, aún siendo rápido, puede demorarse un poco por la gran cantidad de datos que hay en internet. Al enviar un ping, lo que está haciendo blogger es avisar a sus robots de que se ha hecho una nueva entrada en uno de sus blogs. De esta forma tu entrada aparecerá como resultado de una búsqueda en google si el tema que tratas es objeto de ella, o la palabra o palabras usadas para la búsqueda forma parte del título de tus entradas y/o etiquetas.

Esto no significa que tu blog vaya a aparecer en la primera página del buscador cuando se muestre. Que se situe en mejor posición dependerá de la cantidad de enlaces que haya a tu entrada o a tu blog, de la cantidad de veces que haya sido visitado y de muchos otros factores; de manera que no esperes que al dia siguiente de abrir un blog, éste salga en primera página, en cuanto alguien busque algo.

¿Te has fijado en lo que he dicho? "tu entrada aparecerá como resultado de una búsqueda en google"

Pero si la búsqueda se efectua con cualquiera de los otros buscadores que existen, su aparición no será tan inmediata. Lo encontrarán, si, pero quizá tarden un poco en hacerlo.

Si deseas que lo encuentren todos a la vez, (o casi todos), deberás hacer tu mism@ un ping a los otros buscadores. Aquí verás como hacerlo.

¿Mostrar edición rápida en su blog? Ésto es el lápiz que ves al pie de las entradas y que te permite editar una de ellas sin tener que ir a Editar entradas. Pinchando en ese lápiz, que solo verás tu cuando estés en tu blog como administrador/a, puedes editar una entrada antigua si al releerla ves que algo está mal escrito, o necesitas añadir o modificar algo por cualquier motivo.

Si marcas No, no verás ese lápiz y cada vez que quieras editar una entrada tendrás que ir a Editar entradas, buscarla y pinchar en Editar. (Ya llegaremos a éste punto cuando analicemos la pestaña de Creación de entradas).

¿Mostrar enlaces de envío de entradas?. Ésto hace que se muestre un sobrecito, al pie de las entradas, que permite, a quien esté leyéndola, enviarla por mail a alguien, ya sea a sí mismo o a otra persona, si piensa que puede interesarle.

Contenido para adultos. Si tu blog va a tratar temas que crees que es mejor que no sean accesibles a menores, márcalo. Cuando alguien intente entrar en tu blog se le mostrará un aviso para que decida si quiere seguir adelante o no. No prohibirá la entrada a nadie, no le preguntarán a tu visitante qué edad tiene, ni nada parecido y cualquiera podrá leer la entrada simplemente aceptando qué es consciente de lo que va a encontrar. Sea ésto cierto o no.

Tras estos puntos que afectan solo al blog en el que estás, hay un par de puntos que afectan a todos los blogs que puedas tener en la misma cuenta.

¿Mostrar el modo de composición para todos sus blogs? Si marcas NO, el editor de entradas solo mostrará el modo HTML.

Me explico: Cuando creas una nueva entrada, puedes ver dos pestañas en el editor de textos, Redactar y Edición de HTML.

Normalmente el editor aparece en redactar, para que escribas la entrada, la etiquetes si quieres, justifiques el texo, etc. y la publiques.

Con la pestaña Edición de HTML puedes, por ejemplo, añadir una imagen sin pinchar en el icono de imagen, añadir a un enlace un código para que lo enlazado se abra en otra ventana, etc. (ya hablaré más ampliamente de estos temas en otro momento).

Este sistema de edición es cómodo, pues te permite escribir la entrada, editarla y añadir imágenes, sin necesidad de que tengas conocimientos de HTML.

Cambiando el SI a NO, desaparecerá la pestaña Redactar y las herramientas de edición, con lo que tendrías que ir poniendo tu mism@ los códigos necesarios para que la entrada tenga el aspecto que desees.

¿Habilitar transliteración? Esta herramienta es tan solo para blogs escritos en otros idiomas que usan alfabetos distintos al nuestro.

Y finalmente el botón para guardar la configuración, si has modificado algo de lo que venía escrito o seleccionado por defecto.

Configuración - Formato -

2009-11-03T17:00:00.000+01:00

Aquí es donde decides otros aspectos de las entradas de tu blog.

Veamos cada punto.

Mostrar. Verás que por defecto pone 7 entradas en la página principal y debajo te dicen que si seleccionas días te garantizan 500 entradas, lo cual es una aberración a menos que tus entradas sean de una sola línea.

Pero en un blog normal, 7 entradas es más que suficiente. Incluso te diré que, dependiendo de la extensión de tus entradas, con menos también es suficiente.

En éste mismo blog y en otros muchos de los que tengo, solo verás una entrada en la página principal y podrás saber qué otras entradas hay mirando en las etiquetas.

Muchas entradas significa que el blog tarde mucho en cargar y que se haga eterno llegar abajo de todo.

Normalmente recomiendo que la cantidad de entradas mostradas en la página principal, no ocupe un espacio inferior a la columna lateral, pues no es estéticamente agradable ir bajando el blog para ver el contenido de dicha columna, ya sea para buscar algo concreto, ya sea por el motivo que sea, y ver la zona de las entradas vacías, excepto si se está viendo una sola entrada que sea más corta.

Aunque tampoco es recomendable tener una columna lateral tan llena de cosas que el blog necesite 20 entradas para equilibrarse. En estos casos es preferible hacer que algunas cosas se muestren agrupadas o encogidas y deplegar el elemento si interesa.

Formato de cabecera de fecha. Aquí puedes decidir en qué forma se mostrará la fecha en la que has hecho la entrada.

Un detalle a tener en cuenta: Si haces varias entradas el mismo día y están todas en la página principal, solo se verá esta fecha en la primera, que será la última que hayas escrito, pues ya sabes que en un blog las entradas aparecen en orden inverso a aquel en que las publicas, aunque la diferencia temporal sea solo de un minuto.

Más adelante ya verás como modificar éste detalle y hacer que la fecha salga en todas, pero mucho más adelante, cuando hablemos de la plantilla.

Formato de fecha del índice de archivos. Por defecto viene seleccionado que los archivos se vean por meses, con el nombre del mes y el número del año. Puedes cambiarlo, hacer que muestre la fecha de otras formas, que muestre periodos semanales, etc. Al estar seleccionado el modo más habitual, hace que todo el mundo sepa a que atenerse para ver qué se ha escrito anteriormente, pero queda a tu imaginación ir probando qué tal se ven las otras opciones.

Si quieres hacerlo, recuerda que tendrás que guardar la configuración, ver el blog y volver a esta sección para volver a modificarlo.

Formato de hora. La hora en que se ha publicado tu entrada y que se verá al pie de la misma.

Aunque ésto no es del todo correcto, ya que lo que realmente se muestra finalmente es el minuto exacto en que has empezado a escribirla.

Podrías empezar a escribir hoy y ahora una entrada y publicarla unos días más tarde y verías que la fecha y hora de publicación corresponde al momento en que empezaste a escribirla.

Puedes modificar esta fecha y hora de publicación, ya te lo contaré cuando hable de las entradas.

Zona horaria. Por defecto está seleccionada la hora del pacífico, imagino que la central de blogger debe estar allí, pero puedes elegir la que corresponda a tu país e incluso a una zona concreta de tu país, si hay más de un huso horario en él y si en tu país se adelanta o atrasa el reloj, en función de la estación del año, la hora que mostrará será aquella que haya en tu reloj, sin necesidad de preocuparte por este motivo.

Idioma. Aquí puedes elegir en qué idioma se muestran las ordenes y botones en tu blog. Si, por ejemplo, seleccionas español, pero tu escribes tus entradas en euskara, (disculpadme si no se escribe así, siempre dudo si es euskara o euskera, he usado este idioma como ejemplo por ser el más distinto al castellano), todo lo que se vea en el blog, salvo tus entradas, se mostrará en castellano.

Convertir saltos de línea. Este es un tema de edición de HTML de las entradas, aunque no se vea si entras en la pestaña del HTML. Quizá sea solo para que lo vean los navegadores. Siempre lo he dejado tal cual. Pienso que si está así por algo será y no me arriesgo a encontrarme los textos y/o imágenes, descontrolados en las entradas.

Mostrar campo de título. Poca explicación necesita. Si marcas NO, no se verá el título de tus entradas.

Mostrar campo de enlace. Viene marcado en NO. Si lo cambias, cuando hagas una entrada nueva verás una barra, bajo la casilla del título, en la que puedes añadir un enlace que relacione tu entrada con otra, o con otro tipo de datos.

Si eres un fiera de estos temas, aparte de que no necesitarás mi ayuda para casi nada, quizá entiendas mejor que yo a qué se refieren con eso del podcasting, que a mi no me queda nada claro.

Habilitar alineación flotante. Con eso marcado en Si, como está, puedes hacer que los textos y las imágenes se alineen añadiendo una etiqueta al HTML.

Dicha etiqueta sirve para adjudicarle a cada imagen o parte del texto una posición fija en la entrada, de manera que, aunque el blog sea de los que se ensanchan o encogen dependiendo de la resolución de la pantalla, la imagen siempre ocupará el mismo lugar.

Te dicen que lo pongas en No si tienes problemas de diseño. Supongo que se refieren a este caso que menciono.

Personalmente siempre lo he dejado como está, aunque nunca he usado esa etiqueta.

Plantilla de entrada. Aquí se añaden códigos, como por ejemplo una firma personalizada, o el que hace que puedas ver una entrada cerrada y abrirla al pinchar en una frase o un [+ -], trucos todos que se aplican mediante modificación del código de la plantilla del blog y que aún no es momento de tocar.

Y, como en todas las páginas, finaliza con el botón para guardar la configuración, que has de pinchar siempre que modifiques alguna cosa en ella.

Configuración - Comentarios -

2009-11-02T16:00:00.000+01:00

En este apartado configuras el tema de los comentarios en tu blog.

Vamos a analizar cada punto.

Comentarios. Como verás viene marcado Mostrar y te dicen que si seleccionas Ocultar no se suprimen los ya existentes.

Lo que no te dicen es que, si seleccionas Ocultar, tampoco van a poder dejártelos ya que desaparece la opción del pie de las entradas.

Así que, si quieres que te dejen comentarios en el blog, no lo toques.

Persona que puede realizar los comentarios. Por defecto viene marcado Usuarios registrados. Esto implica que nadie puede dejar comentarios anónimos. Pero también implica que si entra a tu blog alguien que no disponga de cuenta alguna, ni de una openID, no podrá comentar, mientras que en anónimos existe la opción de poner nombre y URL, dato éste que puede obviarse y dejar solo un nombre.

Usuarios con cuentas de google limita el poder dejar comentarios tan solo a este tipo de personas y solo los miembros de este blog, a quienes sean sus administradores.

Ubicación del formulario de comentarios. Ahora viene marcado por defecto lo de la entrada incrustada a continuación, lo que significa que cuando alguien pinche en el enlace para dejar un comentario, se recargará la página, viéndose solo esa entrada con el formulario de comentarios a continuación.

Pero este sistema tiene un defecto. Si usas una plantilla modificada o que no sea original de blogger, o has añadido una segunda columna lateral, deja de funcionar, con lo que imposibilita poder dejarlos, a menos que retoques el código del blog.

Los otros dos sistemas son los de siempre. O ventanita o página nueva, que se abrirá en el mismo sitio en que esté el blog, no en ventana o pestaña aparte.

Opción predeterminada de comentarios para entradas. Si seleccionas la opción de que no los tengan no podrán dejártelos.

Enlaces de retroceso. Con esta opción marcada en mostrar, se puede ver si alguna página o blog ha enlazado tu entrada. Al marcarlo verás: "Enlaces a esta entrada" bajo los comentarios, cuando ves una sola entrada en tu blog. Y si alguien ha enlazado dicha entrada, verás quien ha sido o qué blog o entrada de un blog enlaza con ella. Si marcas ocultar, pero permites los enlaces de retroceso en el siguiente punto, no se verá si está enlazada o no.

Opción predeterminada de enlaces de retroceso para entradas. Aquí puedes elegir si deseas que se pueda enlazar o no. Viene seleccionado que si se pueda y no te aconsejo que lo cambies. Un blog cuyas entradas se enlazan desde otros blogs es más facilmente localizable en la red que un blog que permanece ignorado por los demás.

Formato de hora de los comentarios. Al igual que en las entradas puedes escoger como quieres que se muestre en que momento han dejado un comentario en tu blog.

Mensaje del formulario de comentarios. Aquí puedes escribir unas palabras para que se vean cuando alguien vaya a dejarte un comentario, ya sea una bienvenida, un agradecimiento, o un aviso. Si quieres ver a que me refiero pincha en dejar un comentario aquí (el enlace dice ¿Te ha sido útil?) y verás unas palabras escritas por mi, debajo de la frase Haga su comentario.

Podrás ver que está escrito en cursiva y en negrita. Para que eso sea así he usado un par de esos códigos que te dicen que puedes usar, <b> y <i>

Con el primero he convertido las letras normales en negritas. Con el segundo en cursiva.

Estos códigos se han de poner siempre de forma correcta o no funcionarán, pero como esta entrada no está dedicada a este tema, mejor miras aquí, que lo explico más ampliamente.

Moderación de comentarios. Esta opción es útil usarla si te dejan comentarios desagradables.

Tienes dos opciones, sin contar la de no moderarlos. O hacerlo siempre, o solo si las entradas tienen más de un cierto tiempo, tiempo que puedes decidir tu mism@.

Esta última opción es práctica si tu blog trata algún tema conflictivo y en alguna entrada se producen comentarios desagradables, pues te evita moderar los posteriores, si no te dan problemas, pero seguir moderando los de la o las anteriores.

En caso de que desees moderarlos has de escribir una dirección de correo para hacerlo, pero, si me aceptas un consejo, y dado que esta dirección no la verá nadie, no pongas una distinta a la que usas para acceder al blog, de lo contrario no podrás hacer nada desde el enlace del mail y tendrás que entrar a tu blog y mirar si hay comentarios a moderar y donde están, mientras que desde el propio mail de aviso puedes pinchar en aquello que desees hacer con ese comentario. Al hacerlo se te redirigirá automáticamente a tu blog para dar la conformidad o no y dejar una respuesta si es necesaria.

¿Mostrar verificación de la palabra para comentarios?. Esta opción está pensada para evitar los comentarios hechos por máquinas. No sirve de gran cosa, es más un estorbo que una ventaja para quienes quieran dejar un comentario, a veces provoca que una vez escrita la palabra se recargue y tengas que volver a escribir otra y si tienes los comentarios incrustados bajo las entradas, es posible que ni siquiera se vea la barra de escribir, con lo que no te dejarán comentarios.

¿Mostrar imágenes de perfil en los comentarios? Esta opción no es válida si tienes el formulario de comentarios bajo las entradas, ya que allí no se ven las imágenes. En los otros dos supuestos, si se ven.

Correo electrónico de notificación de comentarios. Aquí puedes decidir que los comentarios a tus entradas se envien a otras personas, lo que no se hasta que punto es útil.

Pero si que es útil si la cuenta de correo que utilizas habitualmente no es la misma con la que accedes al blog, pues, en este caso, puedes poner tu dirección habitual, así sabrás en seguida si alguien te ha dejado un nuevo comentario y podrás entrar a responderlo.

Si lo haces pinchando en el enlace, ni siquiera hará falta que te registres, marcas la opción cuenta de google y el comentario se publicará con tu perfil.

Termina la página con el botón Guardar configuración. No olvides hacerlo si has realizado algún cambio.

Configuración - Otras opciones -

2009-11-01T15:00:00.000+01:00

Aquí voy a explicar un poco el resto de opciones que hay en configuración.

Como son bastante escuetas las he agrupado todas en esta entrada.

Publicación.

Aquí puedes cambiar la dirección que se asignó a tu blog, por un dominio personalizado.

También decides si sigues publicando tu blog mediante el servicio de blogger o a través de un servidor FTP externo. Solo para entendidos en estos temas.

Archivo.

Frecuencia de archivo. Aquí decides como mostrará tus entradas el gadget Archivo del blog. Mensualmente es la configuración por defecto, que es la que puedes ver en casi todos los blogs. Muestra la cantidad de entradas que has hecho cada mes. Que se vean los títulos o no, dependerá del sistema que elijas al configurar el gadget de entradas.

El resto de opciones es diariamente, semanalmente o Sin archivo.

¿Habilitar páginas de entrada? Viene marcado en Si. Esto permite que cada entrada se abra en una página independiente. Si lo pones en No, no se verán los comentarios bajo las entradas y, por supuesto, no podrán dejarte comentarios si tienes seleccionada la opción de que el formulario salga incrustado bajo la entrada.

Feed del sitio.

Permitir feeds del blog. El feed del blog es lo que hace que las personas interesadas en lo que escribes puedan recibir tus entradas en algún lector personal y, de este modo, estar al dia de lo que publicas.

Puedes elegir entre Completo o Abreviado, pero si usas algún sitio para que se envien tus entradas, tipo Feed Burner, has de tenerlo marcado en Completo para que funcione.

Publicar URL redireccionada del feed. Si usas algún sistema ajeno a blogger, como Feed Burner, aquí has de poner la URL que te darán en éste sitio.

Si vas a usarlo te recomiendo mires este blog.

Pie de página del feed de las entradas. Si necesitas añadir alguna cosa a tus entradas para que la vea quien la recibe, o publicidad, pues con ello ganarás unos céntimos, aquí, en esta casilla has de añadir el código o lo que sea.

Al principio de todo de esta página hay una opción pinchable: Modo avanzado, que se usa si utilizas algún sitio externo, aunque ya está bien configurado.

De todos modos te lo explicaré.

Si lo pinchas se abren otras opciones al principio, en lugar de Permitir feeds del blog, a saber:

Feed de entradas del blog: ha de estar en Completo. Esto envia las entradas de tu blog en cuanto las publicas.

Feed de comentarios del blog: Envia los comentarios de tu blog. Haya los que haya cada dia y estén en la entrada que estén, quien esté suscrito a los comentarios los recibirá todos.

Estas dos opciones sirven también para el gadget llamado Vínculos de suscripción.

Feed de comentarios por entrada: Esta opción sirve para que quien deja un comentario en una entrada concreta de tu blog, y desea saber si alguien la responde, pero solo le interesa esa entrada concreta, pueda recibirlos. Aquí lo explico más detalladamente.

Correo electrónico y móvil.

Aquí tienes dos opciones para enviar tus entradas por correo o vía teléfono móvil.

Dirección de Blogsend. Esta opción es para enviar las entradas que hagas a algunas personas sin que estén suscritas a tu blog. En este caso las recibirán en su mail, ya que has de poner en ese recuadro las direcciones de correo electrónico de esas personas, con un límite de 10.

La segunda es Opciones para la creación de entradas.

Esta opción es para que puedas enviar entradas, tanto via mail, como via móvil y que estas sean publicadas en tu blog.

En Direccion para la creación.... te dan una dirección de correo que has de completar.

Verás la dirección de tu blog convertida en dirección de mail, pero antes de la @ hay un recuadro que pone Secret words. Ahí has de escribir alguna palabra que solo tu conozcas, para evitar que otro pueda publicar una entrada en tu blog.

Es como una contraseña aplicada a la dirección de correo.

Tienes que habilitar la opción antes de acceder a ella.

Dispositivos móviles te ofrece la posibilidad de publicarlas mediante teléfono móvil.

Has de añadir el dispositivo desde el que quieres hacerlo.

No uso ninguna de estas dos opciones, así que, de momento, no puedo daros más información al respecto.

OpenID

Aquí te indican cual es tu identidad en este servicio y puedes añadir sitios de confianza que puedan ver tu URL.

(Tampoco he habilitado este servicio, ya que en todos los blogs entro con mi cuenta de google.)

Permisos.

Aquí puedes decidir si tu blog va a tener más autores y/o administradores y quien puede acceder a tu blog.

Te permite enviarles una invitación y, tras su aceptación, esta/s persona/s pasará/n a formar parte del equipo de autores de tu blog.

Una vez aceptada la invitación por su parte, puedes decidir si también van a ser administradores del blog o no.

Esta opción se usa también para cambiar un blog de cuenta, si dispones de dos cuentas de google.

Aquí puedes ver como.

De algunos de estos temas ya he hecho entradas para explicarlo mejor. Puedes acceder a ellas pinchando en los enlaces que he ido dejando.

De los que aún no he usado, en cuanto lo haga ya publicaré el tutorial explicando los pros y los contras.

Creación de entradas

2009-10-31T10:00:00.000+01:00

Capítulo 3 Las entradas o posts

Esta pestaña tiene tres secciones: Nueva entrada, Editar entradas y Moderación de comentarios.

En la primera, Nueva entrada, es donde escribes las entradas que se van a ver en tu blog.

Básicamente es un editor de entradas donde dispones de varias herramientas de edición, como la selección de letra, tamaño y color de la misma.

Tienes botones para escribir algo en negrita o en cursiva, aunque no existe el de subrayado, quizá por que los enlaces se suelen subrayar, para distinguirlos del resto de la entrada y si subrayáramos parte del texto crearíamos confusión a nuestros lectores.

Tambien tenemos el botón para añadir enlaces, y otros para modificar la posición del texto, que por defecto sale alineado a la izquierda.

Botones para hacer listas numeradas comillas especiales para destacar parte del texto, un botón para comprobar la ortografía, otro para añadir imágenes, otro para añadir vídeos y una goma de borrar que elimina el formato si lo has selccionado erróneamente, y asi evitarte tener que hacerlo mediante el HTML.

Dispone de dos pestañas, la de Redactar, que es la que usamos normalmente y la de Edición de HTML a la que en ocasiones necesitamos acceder para añadir una imagen sin pasar por el sistema normal, o arreglar un enlace para que se abra en otra ventana y no en la misma de nuestro blog, a fin de que quien esté interesado en ver la información adjunta, puede hacerlo sin necesidad de salir de él y una Vista previa para que puedas ver como se verá la entrada una vez publicada, aunque nunca se verá exactamente como se ve ahí. Pero resulta útil para detectar faltas de ortografía, reiteraciones y otros defectos que en el editor quizá se nos podrían pasar por alto, dado su tamaño.

En la parte inferior tenemos Opciones de entrada, que sirven para modificar la fecha o la hora de publicación de las entradas, detalle éste que tenemos que usar si queremos que una entrada se publique posteriormente al momento en que hemos acabado de escribirla.

También tenemos una casilla para añadir etiquetas a las entradas y un mostrar todo que nos mostrará todas las etiquetas que ya hayamos usado, por si la entrada que estamos haciendo ha de ir englobada en una de ellas.

Finalmente vemos dos botones: Publicar entrada y Guardar ahora.

Y aunque el borrador se va guardando automáticamente cada ratito, a veces nos puede interesar guardar sin publicar, para continuar con ella posteriormente.

Editar entradas te muestra la lista de todas tus entradas, con sus etiquetas, la cantidad de comentarios que tiene cada una y la fecha de su publicación.

Aquí puedes abrir una entrada anterior para editarla, cambiarle las etiquetas a tus entradas, o suprimir alguna que ya no quieras que se vea.

La tercera sección de esta pestaña es Moderacion de comentarios.

Si no tienes habilitada esta opción en Configuración/Comentarios esta sección no tiene ninguna utilidad.

Pero si has decidido moderarlos, aquí podrás ver si hay alguno por decidir si lo aceptas o no.

Al igual que en entradas anteriores he ido dejando enlaces a entradas de Tu blog y tu, donde trato estos temas más ampliamente.

La pestaña Diseño

2009-10-30T23:30:00.000+01:00

Capítulo 4 -Personalizar-

El primer paso para personalizar un blog está en está en la pestaña Diseño ya que en ella puedes modificar los colores que muestra tu blog, añadir gadgets y otros detalles.

Esta pestaña dispone también de varias secciones.

Como he hablado largamente de ellas en Tu blog y tu, las repasaré someramente y te iré dejando enlaces a entradas concretas que amplien esta información.

Cuando pinchas en Diseño apareces en Elementos de la página.

Es lo que en el lenguaje del código de la plantilla se denomina el Layout.

En esta sección verás, por decirlo de alguna forma, la parte trasera del blog.

Aquí colocas los gadgets, (elementos), que se van a ver en la columna lateral, (sidebar), de tu blog.

Los añades, reordenas, editas, o eliminas para siempre, en esta página.

Cuando entras ves tu blog, la disposición de tu blog, bajo el encabezado Añadir y organizar elementos de la página.

Así verás, de arriba abajo, la Navbar, o barra de navegación de blogger, la cabecera de tu blog con su título y las entradas del blog.

A derecha o izquierda, dependiendo de su posición en el blog, verás los elementos de la columna lateral.

Arriba de todo de esta columna verás un recuadro punteado que dice Añadir un gadget.

Sirve para añadir más cosas a tu columna.

Todo lo que añadas a esta columna se coloca siempre arriba de todo, pero puedes reordenarlo facilmente arrastrándolo.

En algunas plantillas también verás un rectángulo punteado abajo de todo. Es el footer.

Aquí también puedes colocar gadgets.

He hecho muchas entradas referentes al tema de los gadgets de blogger en Tu blog y tu. Estas entradas están englobadas en esta etiqueta.

Las otras secciones de esta pestaña son:

Fuentes y colores. Sirve para modificar algunos colores del blog y algunas fuentes y sus medidas. Aquí, una entrada más detallada de este tema.

Dependiendo de la plantilla podrás modificar más o menos.

Estas modificaciones se habilitan mediante Variables añadidas al código del blog.

Puedes añadir cuantas quieras. Aquí he dejado algunas instrucciones básicas, y en varios de mis blogs puedes ver entradas que hablan de ellas.

Edición de HTML. Aquí está el código de la plantilla.

Mediante esta sección puedes cambiar la plantilla por otra que no sea de blogger, o modificar el código de la que tienes añadiendo o quitando algunos códigos.

En esta entrada puedes ver el método más habitual de descarga y algunas instrucciones más acerca de éste tema.

Básicamente, el código del blog está dividido en 4 partes.

La primera, una especie de prólogo, incluye algunas órdenes como etiquetas, o scripts, que se necesitan para que el blog funcione.

Esta primera parte termina con el nombre de la plantilla y su autor.

La segunda son las Variables, de las que te he hablado antes.

Con ellas se cambian los colores y fuentes del blog, sin modificar personalmente el código.

Aquí puedes ver las distintas fuentes que puede tener un blog.

La tercera es el CSS. Esta parte define detalles como los anchos, márgenes, fondos, etc.

Para una mejor comprensión de las partes de un blog, he creado éste, en el que cada una de las distintas zonas tiene un fondo distinto y éste en el que cada una de estas partes dispone de un borde diferente.

La cuarta es el HTML. Aquí es donde se le dice a los navegadores qué han de mostrar y en que orden.

Este código del blog está dentro de un recuadro. Encima del mismo hay una casilla que se puede marcar, junto a la que pone: Expandir plantillas de artilugios.

Para añadir detalles al CSS u otros temas verás en las entradas que te expliquen como hacerlo: NO expandas artilugios.

Sin embargo en otras ocasiones verás que HAS de expandir artilugios, para añadir o quitar alguna cosa del código.

Esto es por que blogger esconde la mayoría de órdenes que hacen que el blog funcione como es debido, pero te permite verlas para modificarlas.

Y por último verás Seleccionar plantilla nueva.

Aquí puedes cambiar la plantilla de tu blog por otra original de blogger sin que pierdas nada de lo que tengas añadido a la columna lateral, pero perderás los códigos que hayas añadido a la plantilla que tuvieras, si lo hubieses hecho. Aquí puedes ver una explicación más detallada.

En las siguientes entradas trataré estos temas más profundamente, sobre todo los referentes al código del blog.

Personalizar el blog. 1

2009-10-29T23:00:00.000+01:00

Y llegamos finalmente al quid de la cuestión.

Ya tienes tu blog, ya has hecho una entrada, ya lo has configurado y ahora lo miras y piensas: "Me gustaría que tuviera un aspecto más personal, que refleje como soy o de que trata este blog, pero ¿Como lo hago?"

Y aquí empieza el pergerinar por blogs de ayuda en busca del truco ese que has visto en tal o cual blog.

Quieres ponerle una cabecera propia y un fondo propio, y, y, y....

Lo primero que deberías hacer, a menos que ya le hayas echado el ojo a alguna plantilla y quieras usarla, (si es así te aconsejo que hagas el cambio antes de añadir demasiados gadgets, así te ahorrarás tener que colocarlos de nuevo), es mirar bien el código del blog SIN expandir artilugios.

Más adelante, cuando empieces a entender qué estás viendo, ya los expandirás.

Al principio te sonará a etrusco, pero es solo inglés.

Puedes echar mano de mi diccionario de palabrejas de los códigos, para saber a qué corresponde cada una de ellas.

Repasar las entradas que te he dejado en la entrada de Diseño para saber qué vas a ver en el código y en que orden.

Peregrinar por los blogs que ofrecemos toda clase de trucos y consejos y, antes de intentar nada, asegurarte que entiendes qué estás queriendo hacer, porqué has de hacer lo que te decimos y donde has de hacerlo exactamente.

Preguntar, preguntar y volver a preguntar, si algo no lo entiendes y no desilusionarte si no te sale a la primera.

Nadie nace enseñado. Todos hemos tenido que aprender, a menudo a base de prueba y error, hasta lograr lo que queríamos.

Y cuando algo te salga bien, casi sin ayuda o sin ninguna ayuda, verás la alegría que eso te proporciona.

Quizá pienses que con ésto no te estoy diciendo nada que no sepas pero, si lo piensas detenidamente, te darás cuenta de que mi consejo te va a servir para hacer aquello que desees en tu blog, solo viendo lo que te podamos explicar.

Dispongo de un listado de todos mis tutoriales en este blog.

De todas formas, soy consciente que para una persona inexperta en estos temas, a veces resulta un poco difícil saber cual de las entradas que hay allí enlazadas va a serle útil, así que voy a añadir algunas entradas al final de este blog, con esas listas ordenadas por temas, añadiendo una pequeña explicación a cada enlace, a fin de que sepas qué es exactamente lo que vas a encontrar en cada uno.

Esta labor no será cosa de un día, y no se si este sistema de hacer que la entradas guarden un orden inverso al normal va a servir para que se actualice una lista de blogs, de manera que te recomiendo, si estás interesad@ en ir viendo qué añado, que te hagas seguidor/a.

De esta forma, al menos, saldrán reflejadas las nuevas entradas, aunque sea al final de las ya existentes.

Personalizar el blog. 2 ¿Por donde empezar?

2009-10-28T22:30:00.000+01:00

Una vez que ya tienes tu blog abierto, quizá podrías empezar por su aspecto.

Un blog agradable a la vista tiene más posibilidades de que las visitas se queden a ver qué has escrito, que un blog que sea como una bofetada visual y aunque contra gustos no hay disputas, también es cierto que hay gustos que merecen palos, así que piensa a qué tema vas a dedicar tu blog, para que su aspecto esté en consonancia con él.

Por ponerte algún ejemplo, un blog dedicado al "gore" no queda nada bien en una plantilla de colores rosas, mientras que uno dedicado al ganchillo, se vería horrible en un fondo negro y/o sangriento.

Así que lo primero que has de hacer es pensar si la plantilla que has escogido te gusta y se adapta a tus necesidades, o si prefieres alguna otra de las originales de blogger.

Como menciono en el capítulo dedicado a la pestaña Diseño, puedes cambiar la plantilla que hubieses elegido por cualquiera de las originales de blogger, ver como queda tu blog y, si no te convence, probar otro modelo.

Verás que, en algunas de estas plantillas, la zona útil del blog ocupa toda la pantalla mientras que en otras ocupa tan solo una pequeña parte del centro y el resto es zona inútil. Las primeras están configuradas de manera que el blog se ensancha o estrecha, en función de la pantalla en la que se está viendo, (más exactamente del ancho de la ventana en la que se está viendo, ocupe o no toda la pantalla) y las segundas tienen medidas fijas que no varían aunque la pantalla, o ventana, sea mucho más ancha que la plantilla.

Esto es así porqué cuando se crearon, la mayoría de pantallas tenían una resolución de 800 píxels. Con estas medidas las plantillas se veian perfectamente en esas pantallas, y tan solo quedaba una zona pequeñísima a cada lado de la zona útil del blog, entendiendo como tal la zona que comprende las entradas y la columna lateral, (cabecera y pie del blog incluidos, pero en este caso hablamos del ancho).

Pero hoy en día estos 800 píxels han sido ampliamente superados por la mayoría de monitores, ya que existen pantallas con 1024 píxels de resolución, con 1200, con 1660, etc. así que, dependiendo de la pantalla que uses y de como "mires" el blog, puedes pensar que esas plantillas originales se ven ridículas. (Con eso de como "mires" el blog, me refiero a si estás acostumbrad@ a ver las páginas de internet a pantalla completa, o si sueles tenerla algo reducida para seguir viendo tu escritorio y poder acceder a él siempre que quieras sin minimizar la página).

De todos modos, cuando pienses en tu blog, no pienses solo en como lo ves tu.

Piensa en como lo van a ver los que entren en él, que, al fin y al cabo, serán quienes hagan que tu blog sea más o menos conocido.

Mi consejo sería que tuvieras muy claro como quieres que sea tu blog, y que aspecto deseas que tenga.

Cuando tengas eso claro, si necesitas modificar alguna de las cosas de la plantilla, (hacerlo más ancho, añadir una segunda columna lateral, añadir botones para que se pueda acceder a otros sitios, ya sea otros blogs, o temas concreto del mismo, etc.) y no estás muy ducho en temas de códigos, te aconsejo que abras un segundo blog, que le pongas la misma plantilla, hagas una entrada sin valor alguno, solo para que haya algo en esa zona y antes de aplicar ningún cambio a tu blog "real", apliques la modificación en el blog de pruebas.

Y cuando veas que el resultado es exactamente el deseado, repitas el proceso en el blog real.

Este proceso tiene la ventaja de que puedes tener abiertos los dos blogs, por la página de Edición de HTML, y comparar ambos códigos línea a línea y, de este modo, ver qué has de modificar exactamente en el blog real para que el cambio o modificación salga a la primera.

En entradas posteriores encontrarás enlaces a entradas que he hecho explicando como modificar este tipo de cosas.

Las agruparé por temas, de tal manera que, si deseas ensanchar el blog, puedas ver , en una sola página, todas las entradas que tengo relativas a este tema, con una breve explicación de lo que hallarás tras cada enlace.

La plantilla -HTML/CSS

2009-10-27T22:00:00.002+01:00

Capítulo 5- La plantilla-

Voy a intentar explicar de forma muy esquemática, que hay en el código de una plantilla y para ello empezaré por describirte qué es una plantilla.

Esto es una imagen básica de una plantilla mínima.

Imagina que a una hoja en blanco, (body), le pegas una cartulina amarilla, (contenedor general).

Luego, encima de esa cartulina, pegas trocitos de papel de colores, verde clarito para la cabecera, (header), rojo para la zona de las entradas, (main), azul para la columna lateral, (sidebar) y verde oscuro abajo para el pie del blog (footer).

Pero como el blog no puedes hacerlo pegando papelitos, se han de escribir unos códigos para que los navegadores, cuando quieres ver uno de ellos, sepan qué han de mostrarte.

Lo primero que leen es el código HTML y te van mostrando lo que ven, en el orden exacto en que está escrito, de tal forma que si el código correspondiente a la cabecera estuviera al final del código, la cabecera se vería allí, en lugar de arriba de todo.

En éste código HTML a cada zona se le asigna un nombre propio, la id y si va a contener cosas se le añade la palabra contenedor.

Estos códigos empiezan siempre con esta "frase" <div id='el nombre asignado'> y acaban con esta: </div> (usaré la palabra "frase" para que entiendas que hablo de cada línea o conjunto de códigos que va entre < y >

Si dentro de un contenedor va a haber algo, se le añade una frase, que identifique una sección, entre las anteriores.

Así, bajo la frase que identifica al contenedor de la sidebar, <div id='sidebar-wrapper'> está la que identifica la sección, <b: section class='sidebar' id='sidebar' preferred='yes' />

Fíjate que en este caso se repite la palabra sidebar.

Esta frase viene a decir que es una sección, de la clase sidebar, que se llama sidebar y que se podrán añadir elementos.

Además, al no llevar div delante, mientras no haya nada en la sidebar, se cierra la frase al final con esa barra inclinada.

¿Porqué se pone dos veces la palabra sidebar?

Porqué puedes tener muchas columnas de estas en el mismo blog y si a todas les asignas el mismo nombre de sección, todas tendrán las mismas características específicas, como el tipo de letra que mostrarán, en el mismo color, etc.

Pero si quieres poner una segunda columna, a la frase que has escribir para que los navegadores sepan que han de mostrarla, le has de poner una id diferente, pues cada zona del blog ha de tener su propia identidad.

Si, además, añades un gadget a esa sidebar y miras el código, verás tres cosas:

1ª.- La frase anterior ha variado ligeramente. Se ha borrado esa barra inclinada.

2ª.- Ha aparecido una nueva frase, bajo esa de b seccion sidebar, que pone: <b widget seguido de su id, de un locked='false' que indica que no está anclado en su lugar sinó que se permite que se mueva de sitio arrastrando el gadget, del título, si se lo has puesto y del tipo de gadget que has añadido, todo ello en una misma frase, con un espacio entre cada dato, (tal='pascual'), y la barra inclinada que cierra la frase.

3ª.- Bajo esta frase ha aparecido un </b:section> que cierra el código de la sección.

Esta última frase aparece al añadir un gadget, porqué dicha sección incluye algo, por lo tanto la frase inicial ya no puede cerrarse sola, pues ha de englobar lo que haya incluido.

Para que todos los navegadores sepan exactamente qué han de mostrarte, esos códigos HTML se refuerzan con datos de estilo, de que color es cada cosa, que fuente usas para escribir, cuanto mide cada zona, en que posición exacta está en el plano y unos cuantos datos más que se los explicamos a través del CSS.

En el código, el CSS lo encontramos encima del HTML.

Allí cada grupo de órdenes que corresponden a una misma cosa, ya sea un contenedor, un elemento, o la fecha de las entradas, se escriben entre esas llaves: { }

Primero se escribe a que zona, objeto o "cosa" pertenecerán estas órdenes.

Si corresponden a un contenedor, se escriben empezando por la almohadilla # si es una sección se escriben empezando por un punto .

Y entre las dos llaves, le puedes decir si quieres que tenga fondo, o borde, el margen que ha de tener respecto al resto del blog, la distancia del contenido al margen exterior del continente, etc.

Por otro lado, blogger permite que cambies los colores, las fuentes y las medidas de las fuentes, de muchos sitios del blog, a través de su herramienta Fuentes y Colores.

Estos cambios podemos hacerlos, sin tocar el código del blog, gracias a las Variables.

Pero éste es un tema muy complejo, que trataré en otra entrada.

Notas finales de esta entrada:

1.-Cuando abres un blog y seleccionas una plantilla, blogger ya te da algunos gadgets colocados previamente. Si quisieras ver la frase que te colocado como muestra, de la sidebar, tendrías que quitar todos los gadgets, de lo contrario ya la verás con algunos b:widget colocados.

2.- Como digo al principio, este tema lo he tratado basándome en la plantilla mínima. En otros modelos de plantillas de blogger, pueden variar ligeramente, así, por ejemplo, la dots no tiene zona de cabecera, en esta plantilla la cabecera es un simple gadget añadido en la sidebar.

Otras subdividen el contenedor principal en varias zonas para poder añadir las imágenes que se ven en el fondo de la zona útil, como la scribe, que lo divide en 3 partes. Otras, como la snapshot o las que tienen un número, subdividen la cabecera en varias partes para poder montar los dibujos que hay en ellas, pero la base es parecida en todas.

EDITADO: 15 de enero de 2010.
Si mis explicaciones no te han dejado demasiado claro este tema, te recomiendo que le eches un vistazo a las 3 entradas del blog de Pizcos que ha titulado: Imagina que tu plantilla es la casa que vas a construir.

En ellas explica de una forma muy divertida, pero también muy clara, la base de una plantilla.
Si pinchas en el enlace irás a la primera de las tres.
Las otras dos, por si no encuentras el enlace allí son éstas: 2ª parte y 3ª parte.

Variables

2009-10-26T21:30:00.000+01:00

Esta es la imagen de las primeras variables que se ven en el código de la plantilla mínima.

Las variables son definiciones que hacen que puedas modificar los colores y las fuentes de lo escrito, de muchas partes de tu blog, sin tocar el código.

El creador de cada modelo de plantilla ha aplicado las que le ha parecido que se podían necesitar, pero has de tener en cuenta que: ni todas las plantillas tienen las mismas, ni en todas se escriben exactamente igual.

La base es siempre la misma; este código (el ejemplo es el que se suele usar para el fondo del blog):

<Variable name="bgcolor" description=" Background Color"

type="color" default="#fff" value="#ffffff">

Vamos a desgranar este código, así verás como crear tus propias variables para modificar más cosas en tu blog.

Para empezar has de tener en cuenta que el código de cada variable ha de estar escrito entre estos dos símbolos: < >

Variable = el nombre de lo que vas a implantar. Todas y cada una de ellas son variables, por lo tanto esta es la primera palabra que se ha de escribir, exactamente así, con la primera letra en mayúscula, de lo contrario no funcionarán.

name = el nombre de la variable en concreto. Se escribe todo seguido, siempre empieza en minúscula, aunque en algunas platillas se distingue cada palabra por que las siguientes empiezan en mayúscula. Así es probable que, si tu plantilla es otro modelo, veas esto: name="bgColor"

Funcionan igual, lo único a tener en cuenta, tanto si creas alguna, como si aplicas una ya existente a algún sitio de tu plantilla, es que en la orden de estilo, el nombre esté escrito exactamente igual.

(Un poco más abajo verás a que me refiero).

description = su nombre completo. Este nombre, traducido o no, es lo que verás en Fuentes y Colores, si deseas modificar algo.

type = aquí puede poner color o font, dependiendo de si la variable va a modificar un color o un tipo de letra.

default = es el valor por defecto. Siempre ha de haber algún color o fuente que se coloque en el blog si, por algún motivo, el elegido no funcionara.

Un caso concreto es cuando intentas poner una imagen de fondo al blog y, por algún motivo, dicha imagen no aparece. En estos casos suele salir el color de fondo por defecto.

Otro caso en el que funciona el default es si has escrito algo en una fuente diferente a las predeterminadas, (a veces es posible), pero quien ve el blog no tiene la fuente que tu hayas usado en su ordenador. En estos casos, la persona que esté viendo el blog verá la fuente elegida por defecto para el lugar concreto donde hayas colocado las letras personalizadas.

value = El valor real del color o fuente del blog, tanto en su versión original, como si has elegido uno distinto.

Cada vez que cambias uno de estos valores en Fuentes y colores, el código cambia automáticamente al guardar cambios.

Si se trata de un color, tanto en defaul como en value, hay una cifra precedida de una almohadilla.

Es el código hexagesimal del color.

Los colores se expresan con un código de 6 cifras, números, letras o una combinación de ambas, precedidas de una almohadilla.

En esta página puedes ver una tabla con los colores y los códigos.

Y en este blog un gadget en el que hay un selector de colores.

Pinchando en un color del círculo que rodea el recuadro y en algún punto de ese recuado, verás que en el rectángulo de encima aparece el tono exacto con su código dentro.

Las fuentes.

En la plantilla original verás que, tanto en default como en value, hay un nombre de fuente precedida de un normal normal y una cifra de porcentaje. Es lo que el creador de la plantilla ha escogido que se vea.

Pero en cuanto modicas una de estas fuentes, estos valores cambian en value.

Para que lo veas mejor, esta es la variable original de la fuente del título del blog de una plantilla mínima.

<Variable name="pagetitlefont" description="Blog Title Font" type="font" default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">

Y así es como se ve este código tras modificar la fuente (letras) del título:

<Variable name="pagetitlefont" description="Blog Title Font" type="font" default="normal normal 200% Georgia, Serif" value="normal normal 266% Verdana, Sans-serif">

Para que las variables funcionen y se puedan realizar los cambios pertinentes a través de fuentes y colores, a las definiciones de estilo de las diversas zonas del blog se les ha de añadir un código concreto.

Pongamos un ejemplo:

La fecha de las entradas tiene la misma fuente que los títulos de los elementos de la sidebar.

Si quieres que uno de los dos tenga una fuente distinta has de modificar la definición de uno de ellos.

Si miras el código del blog, verás esta definición de estilo:

h2 { y unas líneas más abajo font:$headerfont;

Si quisieras que los títulos de la sidebar se viesen distintos, podrías hacer dos cosas:

1.- Usar otra fuente distinta ya existente, por ejemplo la del texto de los propios elementos.

2.- Crear tu propia variable para que esos títulos se vean distintos al resto.

Crear una variable propia es tan sencillo como copiar íntegramente una de ellas, ya sea de color o de fuente, dependiendo de la que necesites, y pegar lo copiado justo debajo de la copiada.

Luego modificar el nombre (name) y la descripción (description) siguiendo el patrón de la anterior.

En este caso concreto, si quisieras crear una variable para los títulos de los elementos de la sidebar podrías llamarla así: name="sidebartitlefont" description="Sidebar Title Font"

En ambos casos tendrás que dar la orden concreta, añadiendo a la zona de las definiciones de la sidebar, que empieza bajo este /*Sidebar Content que verás más abajo, este código:

.sidebar h2 { (para concretar que vas a modificar tan solo los títulos de los elementos de la sidebar)

Debajo copias todo lo que haya bajo aquel h2 que te he mencionado antes, o sea estas líneas:

margin:1.5em 0 .75em;

font:$headerfont;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.2em;

color:$sidebarcolor;

}

Y una vez copiados, cambias ese $headerfont por el nombre de la variable que hayas creado o que quieras usar.

Pero fíjate bien en que delante del nombre hay el símbolo del dólar $ y en como se escribe exactamente ese nombre.

Si hubieses creado una y le hubieses dado el nombre que te sugerido, tendrías que dejar esta línea así:

font:$sidebartitlefont;

Si quisieras usar la misma del resto de letras que pueda haber en el elemento, deberías poner $bodyfont, ya que ésta es la que utiliza la mínima.

Si fuese otro modelo, por ejemplo la scribe, deberías poner $bodyFont y siempre acabar la línea con un punto y coma.

A partir de ese momento, al haber separado las definiciones de estilo de los títulos de la sidebar, de los de las fechas, podrías modificar la fuente, e incluso otros detalles, como que las letras salgan todas en mayúsculas o no, etc.

Pero este es otro tema distinto y lo trataré en otras entradas.

El CSS

2009-10-25T19:06:00.000+01:00

Capítulo 6 El CSS

El CSS es la parte del código del blogs que controla el aspecto que tendrá todo lo que incluya y es por donde se personaliza básicamente.

Por medio de órdenes aplicadas en los sitios correctos podemos aplicar fondos, bordes, marcos e imágenes a las distintas zonas o capas que conforman el blog.

Para que te hagas una idea de donde está en el código de la plantilla, es lo que aparece justo debajo de las variables.

Empieza con body y termina en ]]></ b:skin>

Y aunque no todas las plantillas de blogger son exactamente iguales en sus definiciones, todas suelen usar las mismas expresiones, o muy similares, para referirse a cada zona del blog.

Así en todas hay un outer-wrapper o content-wrapper que se refiere a la zona que contiene lo que inlcuya el blog, un main-wrapper que contiene las entradas, un header-wrapper que contiene la cabecera, un sidebar-wrapper que contiene la columna lateral y un footer-wrapper que contiene la zona del pie del blog.

Hay además los post y los widget, que son las órdenes que le dan estilo a las entradas y a los gadgets respectivamente.

También vereis unos a, a link, a visited y a hover que se refieren a los enlaces, y unos h seguidos de un número que se refieren a los títulos.

En las entradas siguientes iré analizando distintas formas de personalizarlo.

body (El fondo de todos los fondos)

2009-10-24T21:00:00.000+02:00

Un comentario que me han dejado hoy me ha hecho pensar que el primer paso real para personalizar un blog es modificarle el fondo.

Fondos en un blog hay muchos, todos los background que veas en tu plantilla son, en realidad, fondos.

Así, hay un fondo en la cabecera, otro en la zona de las entradas, main, otro en la columna lateral, sidebar, e incluso puede haber uno al pie del blog, footer. Todos ellos los iremos viendo cuando explique cada una de estas zonas.

En algunas plantillas, como la mínima, hay un solo fondo para todo el blog, ya sea blanco, o negro, como en la mínima black.

Pero ya sea solo uno o varios, hay un fondo que es al que me refiero en el título como el fondo de todos los fondos y este se encuentra al principio de todo del código, justo bajo las variables, en body.

Body en inglés significa cuerpo, por eso se llama así a esa zona, ya que es donde se superponen todas las demás zonas que compondrán el blog.

Hay plantillas, como la harbor, que no tienen un background definido en un solo sitio, sinó en varios y la imagen final del blog la componen varias imágenes repartidas en varias zonas.

Pero incluso ésta dispone de un body en el que también hay un background.

Algunos modelos tienen una url en la linea del background de body.

En ocasiones, como en la scribe, esta imagen es la que se ve de fondo del blog, en otras, como en la harbor, esta imagen está abajo de todo.

Habitualmente en ese body hay un color, que es el que se verá si la imagen que contiene, caso de haberla, no se viera por algún motivo.

Así que si quieres personalizar tu blog cambiándole el fondo de todos los fondos, lo primero que has de hacer es averiguar qué modelo de plantilla usas y mirar qué hay en body.

Si solo pone background:#fff; o background:$bgcolor; o algo parecido, es que tu plantilla, en ese fondo, solo tiene un color liso.

En este caso, ponerle una imagen de fondo es tan sencillo como añadir, tras lo que hay, pero antes del punto y coma que finaliza la línea y dejando un espacio detrás del color, url("----------") poniendo, entre esas comillas, la dirección de la imagen que vayas a poner de fondo en lugar de esas líneas que he colocado yo.

Si en ese background además del color ya hay este código con una dirección, es suficiente con poner la de tu imagen en lugar de la que haya, pero asegurándote, mediante la vista previa, que tu imagen reemplaza la que hay. Ya te digo que en la harbor, si lo hicieras, solo verías tu imagen abajo de todo a la derecha.

Te digo que has de poner una dirección, porqué esa es una condición ineludible para que puedas ponerle un fondo: la imagen ha de estar en algún sitio de internet, ya sea un servidor propio, como imageshack o tinypic, o cualquier otro de este estilo, o en tu album de Picasa.

He hecho varias entradas explicando como subir imágenes a los distintos sitios que le dan una url, pero como dichas entradas están desperdigadas en varios de mis blogs, haré una explicando todos los sistemas a la vez, uno a uno, en forma más resumida, en este blog.

Bien, ya tienes la imagen colocada en el fondo, pero ¿como es esa imagen y como quieres que se vea?

Si la imagen que has puesto es pequeña, se ha de repetir a lo largo y ancho del fondo, de lo contrario solo se vería arriba de todo a la izquierda.

En este caso lo ideal es poner una imagen que, al repetirse, de sensación de continuidad, no de alicatado. Aquí puedes ver un ejemplo de continuidad pues, aunque la imagen que hay son unos ladrillos que forman una pared, no se ve donde acaba cada cuadrito que forma esta imagen.

Y aquí puedes ver un ejemplo de lo que he denominado alicatado.

Como podrás comprobar, en este caso se ve perfectamente donde empieza y acaba cada cuadro que forma este fondo y, como puedes ver, queda muy mal.

Si solo pones lo que he dicho, url("dirección"), la imagen se repetirá sola.

Pero quizá quieres poner una imagen grande que abarque todo el fondo.

En este caso has de añadirle algunas órdenes a este código.

Le has decir como se va a ver y lo lógico es que se vea desde arriba de todo y centrada, así que tras el paréntesis de cierre de la dirección, dejando siempre un espacio entre cada orden, has de añadir center top

También le has de decir que no la repita, añadiendo no-repeat

Un inciso en este caso: Ten cuidado con las imágenes grandes.

No todas las pantallas son iguales y lo que tu puedas estar viendo no ha de ser necesariamente lo que vean los demás.

Así, si tu pantalla es de 17" (pulgadas) tendrá poco más de 1200 pixels de resolución, con lo que una imagen que tengas en tu pc de esta medida de ancho, abarcará toda tu pantalla.

Pero si quien está viendo tu blog dispone de una pantalla de 22", tiene una resolución de 1660 pixels, con lo que, si mira tu blog a toda pantalla verá una zona sin imagen a ambos lados del fondo.

En este caso, el color del fondo del blog ha de ser una tonalidad que no desentone con la imagen.

Si, por ejemplo, quieres poner una imagen de un bosque en otoño, con la diversidad de colores que pueden tener los árboles, no quedaría bien un fondo blanco, ni rosa o azul. Lo suyo sería una tonalidad amarillenta, lo más parecida a la imagen que has colocado.

Otro tema es la altura de la imagen.

Un blog puede tener una altura casi infinita, dependiendo de la cantidad de entradas que se muestren y/o de las cosas que haya en la columna lateral.

Así, como una imagen tiene solo la altura de la pantalla, al bajar en el blog la imagen se acabará, con lo que se verá un fondo liso después de ella.

Para evitarlo, se ha de fijar la imagen, de forma que el blog se deslice sobre ese fondo y la imagen ha de ser tan alta como la pantalla, (unos 900 pixels).

También has de tener en cuenta que no todos los servidores almacenan la imagen en su medida real. Picasa, por ejemplo, tiende a reducirlas, con lo que una imagen grande almacenada allí no sirve de mucho en este caso.

Para que el blog se deslice sobre el fondo se ha de añadir fixed a esa línea del background, detrás de las órdenes anteriores y antes del punto y coma.

Este fixed también se puede añadir aunque la imagen sea pequeña y abarque todo el blog, por largo que sea, para dar esta sensación de deslizamiento.

Si has pinchado en el enlace que te he dejado del blog con fondo de ladrillos, verás que éso es lo que hace la zona útil de aquel blog.

Pero ¡cuidado! este efecto solo se produce en blogs con medidas fijas. En los modelos que usan % en sus medidas este efecto no se produce.

Eso es debido a que en estos casos, la zona útil del blog abarca toda la pantalla, lo mires como lo mires, con lo que el body está pero no se ve de la misma forma que en los otros casos.

Y siempre, siempre, siempre, haz vista previa antes de guardar la plantilla, pues es más sencillo borrar los cambios que tratar de recordar qué habia ahí antes de que añadieras algo.

Resumen. Códigos del background de body.

background:#fff; o background:$bgcolor; o background:$bgColor;

(solo hay un color de fondo ya sea escrito en modo hexagesimal, o por variable. He puesto dos modos distintos en que puede estar escrita esta variable).

A partir de aquí voy a usar solo la segunda opción, que es la de la minima, aunque puede ser que en tu blog se vea la primera, (cuando no se puede cambiar el color del fondo desde fuentes y colores, como en la rounders4) o la tercera, por que la variable se escribe de otro modo, como en la Denim y otras.

background:$bgcolor url("dirección");

Hay un color, que quizá no se vea y una imagen que se repetirá a lo largo y ancho de la pantalla y del blog.

background:$bgcolor url("dirección") fixed;

Hay un color de fondo que seguramente no se verá, una imagen que se repetirá a lo largo y ancho de la pantalla y sobre la que se deslizará la zona útil del blog.

background:$bgcolor url("dirección") no-repeat center top fixed;

Hay un color de fondo que posiblemente se verá, una imagen grande que no se repetirá, centrada desde ariba de todo y fija para que el blog se deslice sobre ella.

Otras variantes de este código:

background:$bgcolor url("dirección") repeat-y;

Hay un color de fondo, que se verá y una imagen que solo se repetirá a lo largo del blog, (si no especificas nada lo hará a la izquierda del todo). La imagen se moverá junto a la zona útil del blog.

background:$bgcolor url("dirección") repeat-y right top;

Hay un color de fondo que se verá y una imagen que se repetirá a lo largo del blog, pero a la derecha.

En estos casos la imagen se vería al principio o al final de todo de la pantalla, con lo que si tu blog tiene las medidas originales, (la zona útil de la mínima, por ejemplo, tiene 660 píxels de ancho), si quien está viendo tu blog tiene una pantalla de 22" y suele ver los blogs a toda pantalla, verá la imagen perdida a la izquierda del todo.

Si has ensanchado tu blog, y quien lo esté viendo usa una resolución menor que tu blog, la imagen quedará debajo de la zona de las entradas o de la sidebar.

Aquí puedes ver unos ejemplos de lo que digo. Verás 4 imágenes. Dos con una imagen a la derecha y dos con la imagen a la izquierda.

He usado una imagen bastante grande, pero podrás apreciar como se ve tanto al verlo a toda pantalla, (tengo una pantalla de 22") como al reducir la ventana hasta unas 15". Puedes pinchar en la primera imagen y verlas una a una pasando la flecha.

Si deseas poner una imagen así, pero pegada a alguna de las zonas de tu blog, eso has de ponerlo en el background de dicha zona, modificando paddings para que lo que contenga, ya sea las entradas o los gadgets, no se superpongan a la imagen. (Ya llegaremos a eso).

Un par de cosas más antes de terminar este tema:

He visto en varios blogs fondos colocados mediante un código en un elemento HTML/Javascript.

Suelen funcionar bien, pero no lo recomiendo. Lo ideal es ponerlo como explico aquí.

El motivo es muy sencillo. El fondo es lo primero que se ve.

En conexiones lentas, los navegadores suelen tardar un poco en mostrar todo el contenido del blog, con lo que, si el código del fondo está en un gadget, hasta que no aparezca ese gadget, aunque no se vea en el blog, no se verá el fondo.

También he visto que eso suele pasar en blogs a los que previamente no se les ha quitado el fondo que tenian, así que el navegador muestra primero el fondo original, dándole al blog un aspecto extraño.

Cuando finalmente aparece el fondo que se ha de ver ya te das cuenta de como es realmente ese blog, pero...

Por otro lado tened cuidado al poner una url en el blog.

Algunos sitios ofrecen fondos "gratuitos" y te dan la url a copiar para que lo pongas.

Mira bien esa url.

Si no es algo así: http://dirección.jpg o http://dirección.gif si contiene más de un http no la uses.

Es posible que incluya publicidad indeseada la cual se verá en un recuadro de tu blog y que aparecerá donde menos lo desees.

Esto suele pasar sobretodo, con ese sistema que te digo de fondo colocado en un gadget.

Suelen darte un código más largo, que es el que hace funcionar la imagen como fondo, pero también incluye publicidad, ya sea a la propia página que te ha ofrecido el servicio, ya sea a otro sitio y luego todo son consultas de como quitar ese recuadro indeseado.

Fondos ¿donde y como? Colores

2009-10-23T15:26:00.000+02:00

Fondos en el blog hay en muchos sitios. En este blog puedes ver un ejemplo de ello.

Como expliqué en esta entrada, en la que muestro de forma simple lo que es una plantilla, un blog está compuesto de capas que se van superponiendo.

Cada una de estas capas puede tener su propio fondo.

Simplemente hay que añadir, si no existiera, en el apartado correspondiente a la zona en la que quieras aplicar el fondo, la línea de estilo que le dice al navegador qué es lo que ha de mostrar ahí, tal como explico en la entrada dedicada al body.

Si se trata de una imagen, ha de estar alojada en algún sitio para que pueda ir a buscarla y mostrarla.

Si se trata de un color liso, le hemos de decir exactamente cual es.

En éste caso hay dos formas de hacerlo; o escribiendo en la plantilla el código del color o creando/usando una variable para ello.

Los colores.

Para que el navegador pueda mostrar un color, no basta con decirle que tal cosa va a ser roja.

Como tonalidades de rojo hay muchísimas, le hemos de decir cual de ellas queremos que muestre y la forma de hacerlo es diciéndole exactamente cual es.

Pero ¿como decirle, por ejemplo, que queremos que sea un rojo fuego tirando a anaranjado aunque no muy naranja y si ha de ser más bien tirando a oscuro o a claro? Muy simple. Sabiendo exactamente como se denomina este color en el código internacional de colores.

Así, si en lugar de esta parrafada le decimos que muestre el #e12709 mostrará algo similar a ésto: Este sería el color de marras. Que como puedes ver se diferencia del #bf0d1d que es este rojo más granate.

Aquí a la derecha podeis ver un chisme que permite saber el código del color.

Al pinchar en un color o matiz del círculo que rodea al cuadrado, (aparte de que os saldrá un anuncio que no puedo quitar y que tendreis que cerrar por la crucecita), el color se colocará en el rectángulo de encima, con una cifra.

Pinchando en distintos puntos del interior del cuadrito vereis que no solo cambia el tono del interior del rectángulo, sinó que irá cambiando la cifra que contiene.

Eso es el código hexagesimal de ese matiz concreto.

No todos los navegadores los interpretan exactamente igual. He observado que Explorer tiende a oscurecer los colores y no hay forma humana de evitarlo, así que si quereis ver algo en un color concreto, basaos en como lo muestre el navegador que acostumbreis a usar.

Como he dicho antes podemos incluir el color que queramos ver en un fondo, de dos formas, por medio de ese código o con una variable.

En este caso solo tendreis que crearla, si no existiera, como explico en esta entrada y en la línea de background poner su definición. De esta forma podreis modificar el color a través de Fuentes y Colores.

Resumiendo:

El fondo de cualquier lugar se define en la línea del background de las siguientes formas:

Solo un color liso

background: #ffffff; o background: $bgcolor;

En el primer caso este código daría un fondo blanco. Cambiando la cifra cambiará el color. Solo podrás cambiar el color modificando esta cifra en el código de la plantilla.

En el segundo caso saldría el color que está pensado como fondo general. Para poner uno distinto has de poner otra definición, p. ej. $sidebarbgcolor (si creas o existe una específica para la sidebar), $mainbgcolor (si creas o existe una específica para el fondo de la zona de las entradas, etc. y podrás modificarlos en Fuentes y Colores.

Con una imagen

background: url(la direccion de la imagen);

y todas las variantes que comento en la entrada del body.

En ocasiones se ponen las dos cosas juntas, background: $bgcolor url(direccion);

Esto puede ser por dos motivos; porqué se trata de una imagen grande o como precaución.

En el primer caso se coloca un color de fondo afín a la imagen en previsión de que se vea el blog en una pantalla más grande que la imagen. De esta forma se le da continuidad a dicha imagen y no queda feo.

En el segundo caso siempre se verá la imagen pero si se diera el caso que la página o servidor, donde esté alojada, no funcionara por algún motivo, se vería el color de fondo que hayas elegido.

Si solo hay la dirección siempre se verá blanco.

Marcos y bordes

2009-10-22T17:07:00.000+02:00

A veces nos gustaría que las distintas partes del blog estuvieran enmarcadas a fin de separar más claramente cada una de las demás, pero la plantilla que hemos elegido no es así.

No hay problema. Al igual que sucede con los fondos de los que os hablaba ayer, también cualquier zona del blog, por pequeña sea, es susceptible de ser enmarcada.

En este blog podeis ver un ejemplo de ello.

Pero hay más, ya que además de lo que veais en él, si pinchais, también es posible enmarcar de forma independiente, la fecha, el título de las entradas, el footer de las mismas, (allí donde se ve al autor, los comentarios etiquetas, etc) y el título de los gadgets de la sidebar.

Es más, en este último caso incluso podemos hacer que algunos se muestren enmarcados y otros no.

Por ende, cualquier zona del blog que pueda ser enmarcada puede tener un fondo propio.

Para enmarcar algo has de poner, en el código de definiciones de estilo de la zona que quieres enmarcar, la línea border de esta forma:

border: grosor estilo color;

Analicemos cada dato.

El grosor se expresa en píxels (Xpx) cuanto mayor sea la cantidad que haya en lugar de esta X más gruesa será la línea.

Por poneros un ejemplo práctico, la linea que enmarca la cabecera de este blog tiene 10 píxels de grosor, mientras que la que enmarca el pie de las entradas tiene solo 1 píxel.

El estilo. Hay 8 estilos de líneas. En el blog que os dejo enlazado al principio podeis ver una imagen con una muestra de esos 8 estilos.

Siguiendo con el ejemplo de este blog en el que estás, el borde de la cabecera es de estilo double mientras que el que enmarca el post-footer es estilo dotted.

El color. Como os comentaba en la entrada de ayer dedicada a los fondos, podeis indicar el color del marco tanto con el sistema hexagesimal como a través de una variable.

Y también puedes crear distintas variables si quieres que distintas zonas dispongan de marcos de colores ditintos.

aquí puedes ver que la cabecera tiene el marco de color azul, mientras que el resto es de color gris.

Otra cuestión es si el marco estará completo o solo quieres enmarcar algo a medias.

Fíjate que le decimos que ponga un borde, no un marco. Al no especificar donde va a estar, el borde rodea totalmente la zona definida.

Pero podemos hacer que sea solo una línea abajo, o arriba o en uno de los laterales o en una combinación cualquiera de ellos.

En este caso has de darle tantas órdenes como lados quieras enmarcar, escribiendo las líneas así:

border-top: grosor estilo color; para la línea de arriba.

border-left: grosor estilo color; para la línea de la izquierda.

border-bottom: grosor estilo color; para la de abajo.

border-right: grosor estilo color; para la de la derecha.

Ésto también te permitiría enmarcar totalmente una zona en cuatro colores estilos y grosores distintos.

Para terminar os dejo un par de ejemplos. Son los dos bordes que he mencionado antes.

El de la cabecera está escrito así: border: 10px doble $headerbordercolor;

Y el del post-footer así: border: 1px dotted $bgcolor;

Más utilidades del background (los títulos de los gadgets)

2009-10-21T17:15:00.000+02:00

Además de servir para poner un fondo personalizado a las distintas partes del blog, el background también sirve para poner una imagen que haga las veces de línea inferior y/o lateral.

La única pega en este caso es que solo se puede colocar un background en cada zona.

Por poner un ejemplo claro:

Si has decidido enmarcar el título de los gadgets y ponerle de fondo una imagen, no vas a poder poner otra como línea inferior.

En este caso tendrás que decidir entre ambas. Podrás ponerle un color a la zona que ocupe dicho título, pero tendrá que ser solo un color.

Puedes ver un ejemplo de fondos de los títulos en este blog que acabo de crear para dejar muestras de algunas de éstas cosas.

En él podrás ver 5 gadgets con los títulos enmarcados y/o con distintos fondos.

Para realizar algo así hay dos caminos, dependiendo de que quieras aplicar los cambios a todos los gadgets por igual o a cada uno, o solo a algunos, en particular.

En el primer caso tendrás que añadir este código:

.sidebar h2 {

añadir aqui la linea de border o de background,

}

Por supuesto donde no está en negrita tendrás que poner lo que vayas a querer que se vea y la/las órdenes se aplicarán a todos los gadgets.

Si quieres que el título de cada gadget tenga un fondo o un borde (ya sea de color o de imagen) distinto, has de añadir un código para cada gadget.

En este caso has de averiguar la id del gadget y añadir un código semejante a éste:

(el ejemplo sería el del último gadget, la lista de blogs, que tiene de todo)

#BlogList1 h2 {

background: #acd4fb url(la dirección de la imagen) no-repeat center bottom;

border: 1px solid #000000;

height: 20px;

}

Explicación del código.

#BlogList1 es la id del gadget, h2 indica que las órdenes se aplicarán al título del gadget, { es la llave de apertura de las órdenes.

Con background: le decimos que aplicará un fondo, #acd4fb es el color que tendrá este fondo, (en lugar del código del color puedes poner una variable si la has creado específicamente para ello), url(direccion) para que sepa que ahí va a ir una imagen, no-repeat para que no la repita a lo largo y ancho de la zona del título, center para que la imagen se vea centrada, de esta forma, si es más pequeña que el ancho del gadget y se trata de una línea que tenga la parte más importante o más bonita en el centro, no se verá desplazada, bottom para que la muestre abajo.

Con border: le decimos que la zona del título estará enmarcada, 1px es el grosor de la línea que lo enmarca, solid es el estilo de dicha línea y #000000 es el código hexagesimal del color negro. Este dato podemos cambiarlo por la variable del resto de los bordes, con lo que en lugar de este código hexagesimal pondríamos $bordercolor o lo que corresponda.

Con height: le damos una altura concreta a la zona del título.

Este dato no es necesario si solo vas a enmarcarlo o a ponerle un fondo, pero no una imagen que subraye el título.

Pero si vas a ponerle una imagen/línea como background has de darle altura suficiente para que la imagen no salga detrás de las letras, sinó debajo. La cantidad de px (pixels) dependerá de la altura de tu imagen a la cual le tendrás que sumar los suficientes para que el título salga encima.

Con } cerramos las órdenes que le hemos dado, así el navegador sabrá que todas ellas corresponden a esta zona concreta.

IMPORTANTE

No olvidar el punto y coma al final de cada línea ni el espacio que separa cada orden distinta en una misma línea.

Redimensionar el blog 1ª parte

2009-10-20T10:13:00.000+02:00

Las plantillas originales de blogger, aparte de no ser muy bonitas, tienen un defecto congénito: son muy estrechas.

Están creadas cuando las pantallas de los pc's tenían, como mucho, 800 píxels de resolución, pero hoy en día casi nadie tiene una pantalla de esas medidas, a menos que tengas una notebook, en cuyo caso son aún menores.

Pero los blogs se crean o adaptan pensando en los ordenadores "normales" y la medida más habitual suele ser la de 1240 píxels. Y aunque haya quien solo tenga 1024, también hay quien tiene hasta 1680, y puede que incluso más, así que crearemos o adaptaremos el blog pensando, básicamente, en nuestra comodidad ya que quien lo administre será quien más veces entre en él.

Por supuesto hablo de plantillas con medidas fijas, porqué entre las que nos ofrece blogger hay 2 o 3 que tienen medidas adaptables a la pantalla, expresadas en %, con lo que no importa el ancho de la pantalla con la que se esté viendo el blog, siempre se verá toda su anchura.

De manera que, si vamos a redimensionar una plantilla de medidas fijas, lo primero será averiguar qué medida nos resultará más cómoda personalmente y para ello has de saber la resolución de tu pantalla.

Esto lo puedes averiguar pinchando con el botón derecho del ratón en cualquier punto vacío de tu escritorio. Se abre un menú del que has de pinchar en Propiedades. Se abrirá una ventanita con varias pestañas. Pincha en Configuración. Y allí verás la resolución de tu pantalla expresada así:
1680 por 1050 píxels. Aunque, evidentemente, pondrá las medidas de la tuya, no de la mía.

La primera medida es el ancho, que es la que nos interesa.

(Un inciso: Aunque tengas una pantalla de más de 1240 píxels, no crees tu blog con una medida superior a ésta, ya que no son las más habituales y podría suceder que te dejen comentarios diciendo lo incómodo que resulta navegar por tu blog, pues además de mover el scroll lateral para subir y bajar, se ha de mover el horizontal para ir de un lado a otro).

¡Bien! Vamos a redimensionar una plantilla mínima.

Entraremos en Diseño/Edición de HTML y allí buscaremos todos los sitios en los que haya una medida de ancho, expresado como width.

Por el orden en que los vas a encontrar, en la plantilla mínima, son los siguientes:

En #header-wrapper { encontrarás la medida de la cabecera.

En #outer-wrapper { encontrarás el ancho de la zona útil del blog.

En #main wrapper { verás el ancho de la zona de las entradas.

En #sidebar-wrapper { sabrás el ancho de la columna lateral.

Y en #footer { hallarás el ancho de la zona del final del blog.

¿Por donde empezar?

Lo lógico es empezar por los 3 sitios que abarcan la totalidad del blog, la cabecera, la zona útil y el footer.
Si quieres dejar tu blog, por ejemplo, a 900 píxels de anchura, cambias el 660 que hay en estos 3 sitios, (insisto, hablo de la mínima, en otras plantillas las medidas pueden ser distintas), por el 900 que quieres de ancho para tu blog.

Si hicieras vista previa en este momento verías la zona de las entradas en un extremo y la sidebar en el otro, con una separación muy grande entre ellas.

Entonces has de decidir como repartir los 240 pixels que has añadido, cambiando lo que mide main y lo que mide la sidebar en base a este reparto.
Así, por ejemplo, si decides sumarle 200 pixels a main le sumas los 40 restantes al width de sidebar.

Vista previa, y de tus necesidades o gusto, dependerá que modifiques, o no, este reparto.

Si esta misma operación la quieres llevar a cabo en una plantilla modificada, el sistema es básicamente el mismo. Buscar los width de estas zonas y sumarle o restarle la cantidad de píxels que vayas a necesitar para que en tu pantalla el blog se vea perfecto.

¿He dicho restarle?
Si, lo he dicho.
Porqué te puedes encontrar con que hayas descargado y colocado en tu blog una plantilla ya modificada, que sea demasiado ancha para tu pantalla.
En este caso la operación tendrás que hacerla al revés y restarle a los anchos de las zonas que abarcan todo el blog los suficientes píxels para que tu lo veas bien, y repartir esta reducción entre las dos columnas.

¡Cuidado! En este caso no hagas vista previa antes de hacer todas las reducciones o te llevarás un susto, ya que al ser la suma de las dos columnas mayor al ancho que hayas dejado, la sidebar la verás debajo de la zona de las entradas.

Si lo que quieres redimensionar es un blog con 3 columnas, la operación es similar.
Tan solo tendrás que repartir lo que hayas añadido o quitado, entre la zona de las entradas y las dos columnas laterales.

Y si se trata de un blog con widebar, (esa columna lateral más ancha que puede haber encima de las dos laterales), has de repartir lo que quites o añadas entre la zona de las entradas y la widebar y luego repartir lo que le añadas o quites a la widebar, entre las 2 columnas laterales.

EDITO: Gracias a un mail que me llegó ayer, me he dado cuenta de que no os advertí de un tema importante. Si vuestra plantilla es una Rounders, o una thisaway o algún modelo que tenga formas redondeadas, ya sea en la cabecera o en los elementos, al ensancharla os pasará esto que podeis ver aquí.

Redimensionar el blog 1ª parte -2- Píxels y porcentajes

2009-10-20T08:48:00.000+02:00

En la entrada anterior explico que hay blogs que expresan sus medidas en porcentajes y otros que las expresan en medidas exactas.

Puede darse el caso que tengas una plantilla de medidas exactas, por ejemplo de 800 pixels de ancho y quieras que ocupe toda la pantalla, así que le aplicas un 100% al contenedor general, haces vista previa, en tu pantalla de 1024 pixels de resolución y lo ves casi perfecto.
Quizá haya demasiada separación entre las columnas, pero, bueno, le añades unos cuantos píxels al ancho de las entradas, digamos 160, unos pocos más a la sidebar y haces vista previa. ¡Perfecto!.

Pero entro yo a ver tu blog, con mi pantalla de 1660 pixels y esto es lo que veo.

Que mal ¿no?

Para evitar esto has de poner también porcentajes a las columnas. Digamos 70/30 pero no exactamente esto, ya que se ha de tener en cuenta las distancias entre columnas, así que le daremos 69/29 a ver que pasa.
Y si con ese pocentaje una de las dos columnas, habitualmente la sidebar, se cae, reduciremos un punto uno de los dos o ambos haste encontrar el equilibrio que haga que en una pantalla gigante el blog se vea así:

De esta forma, se vea en la pantalla que se vea, siempre se verán las dos columnas equilibradas, ya que al estar expresadas sus medidas en porcentajes, el navegador muestra la columna de las entradas en el 69% de la pantalla y la sidebar en el 29% restante, (o el porcentaje aplicado).

Una última cosa a tener en cuenta:
En algunas plantillas cada columna tiene dos medidas, por ejemplo: una en #sidebar-wrapper (que sería el contenedor de la columna lateral) y otra, (casi siempre la misma), en #sidebar (que sería el contenido de ese contenedor).
En este caso se ha de modificar en los dos sitios, ya que de lo contrario, se le está diciendo que ocupe un % de la pantalla, pero también que este tanto por ciento estará ocupado por algo que tiene una medida exacta, con lo que, si el porcentaje resultara menor que la medida fija la columna se caería.
Poniéndole 100% a la medida interior, se logra que el contenido ocupe la totalidad del contenedor.

Esto es también aplicable a columnas laterales que incluyen diversos bloques, como por ejemplo este mismo blog en el que estás, en el que la columna lateral contiene la doble columna de arriba y la sencilla de abajo.

Para modificar una plantilla expresada en porcentajes y convertirla en una de medidas fijas, el sistema es a la inversa.
Se han de encontrar todas las medidas expresadas en % y convertirlas en medidas fijas, recordando que el contenedor principal, (habitualmente llamado outer-wrapper), puede tener la medida que se desee, pero que la suma de las columnas más los espacios que habrá entre ellas no puede superar la del contenedor principal.

Redimensionar el blog 2ª parte -Aprovechar el espacio-

2009-10-19T13:22:00.000+02:00

Dependiendo de lo mucho que quieras redimensionar el blog puede quedarte espacio suficiente para añadir una segunda columna lateral.

Aunque básicamente el sistema es el mismo en todas, copiar los códigos de la sidebar, tanto en el HTML como en el CSS, renombrándolos, cada modelo de plantilla tiene sus características personales, de manera que hemos de vigilar muy bien lo que hacemos a fin de que no quede un churro.

He añadido una segunda sidebar a casi todos los modelos básicos existentes, (podeis verlas pinchando en el perfil, son las que llevan añadido el 3 a sus títulos) y he dejado en cada uno de ellos las instrucciones precisas para hacerlo en vuestros propios blogs.
Tan solo teneis que aseguraros de que el blog al que acudais es el modelo exacto que usais, (y por modelo me refiero al nombre de la plantilla, sin importar el color, así las instrucciones de la mínima sirven tanto para la blanca, como para la negra, como para la azul) y seguir las instrucciones que he dejado, al pie de la letra, pasito a pasito.

De todas formas unos consejos básicos:

1º.-Cuando llevas a cabo una reforma de estas en el blog, es posible que dejen de funcionar los comentarios incrustados bajo las entradas.
Me refiero al formulario para comentar, no a que se vean los comentarios que te han dejado, así que si vas a añadir una segunda columna en tu plantilla, recuerda cambiar la forma en que se va a ver dicho formulario.
Para cambiarlo: Configuración/Comentarios y marcas cualquiera de las otras dos opciones, Ventana o Página. Es la única forma, hasta ahora, en que siguen funcionando.

2º.- Si para añadir la 2ª columna haces un copia y pega de los códigos que haya podido dejar en el blog modificado, vigila que todos los espacios que pueda haber en ese código siguen estando, ya que a veces al copiar y pegar desaparecen, dando lugar a errores de código y a que al hacer vista previa te salga el aviso de "No hemos podido analizar su plantilla..."

3º.- Las modificaciones que explico están hechas en base a unas medidas concretas. Si tu prefieres que esas medidas sean distintas ten cuidado al repartir los píxels, ya que si la suma de las medidas de las 3 columnas, más las distancias entre ellas, es superior al total del ancho del blog, una de las dos columnas se colocará debajo de las entradas.

4º.- Algunos modelos tienen dos versiones, la normal y la lefty. Si tu blog es un lefty, has de tener en cuenta que las posiciones de las columnas serán distintas, así, lo que en tu plantilla aparezca como $startSide o left, en mis instrucciones aparecerá como $endSide o right y viceversa.

Y creo que esto es todo por el momento. Si se me ocurre advertiros de algo más, editaré la entrada.

Redimensionar el blog -3ª parte- Padding

2009-10-18T13:31:00.000+02:00

A veces nos preguntamos porqué una columna se cae si la suma de las medidas que conocemos no alcanza el total de lo que mide la zona útil del blog o porqué una imagen no cabe en una entrada o en un widget.

Esto suele suceder porqué no tenemos en cuenta otras cosas como los márgenes que hay entre las distintas partes de un blog, o las líneas que pueden enmarcar algunos de estos contenedores.

Como explico en esta entrada, un blog se compone de varias capas. La primera de estas capas, encima del fondo general, es el outer-wrapper o content-wrapper, dependiendo de la plantilla, (en algunas incluso los verás los dos).

La palabra wrapper se traduce por contenedor, así el outer-wrapper define la zona que contiene las dos columnas básicas del blog, #main-wrapper y #sidebar-wrapper y tiene una medida definida ya sea en píxels exactos, ya sea en %.

Pero, a su vez, estas dos columnas son tambien contenedores.
La primera contiene el widget de las entradas, (.main .widget), que a su vez contendrá las entradas con sus títulos y el pie de las mismas, (.post), que contendrá lo que escribas, (.post-body).
La segunda contiene la sidebar, (.sidebar), que contendrá los gadgets, (.sidebar .widget), que contendrán lo que añadas en ellos.

Si queremos separar el contenido de las columnas de su contenedor usaremos la definición padding, aplicándola al lugar que queramos ver separado.

Para que quede más claro, vamos a hacer un ejercicio práctico.

Para empezar, con sus medidas originales, pondré distintos colores de fondos a todos los elementos que se superponen en una plantilla mínima, para poderlos diferenciar y apreciar lo que voy a demostrar.
Le aplicaré, empezando por la capa que está más abajo y subiendo, gris a #outer-wrapper, amarillo a #main-wrapper y a #sidebar-wrapper, verde a .main .widget y a .sidebar, blanco a .post y a .sidebar .widget y azul a .post-body.
Este es el resultado:

Como puedes ver, las columnas tan solo están separadas por los extremos y entre si, mientras que todo el contenido de cada capa de cada una de ellas, ocupa todo el espacio de que dispone a lo ancho. Las distancias entre widgets que ves por arriba y abajo, vienen dadas por los márgenes que el codigo le ha aplicado.

¿Cual es la distancia entre columnas y cuanto mide cada una?
Pues si a 660 de ancho total, le restamos 410 que mide main + 220 que mide sidebar, nos dará 30 pixels. Esta es la distancia entre ambas columnas.
No le he sumado los 1o pixels de los laterales exteriores ya que están incluidos en las medidas de cada columna, lo que significa que cada columna tiene 10 pixels menos de superficie util.

Esto significa que la zona de que se dispone en una entrada es de 400 píxels, no de los 410 que nos dicen en #main-wrapper, con lo que cualquier imagen superior a estos 400, o se verá cortada o sobresaldrá por la derecha.
Si sucede ésto último, la sidebar se verá empujada y, al no disponer de suficiente espacio irá a colocarse bajo las entradas.
A su vez significa que en la sidebar disponemos tan solo de 210 pixels, no de los 220 que se indica en #sidebar-wrapper.

Pero estas medidas son válidas sin enmarcar nada.
Si enmarco los distintos contenidos el resultado es éste.

Si te fijas bien, podrás apreciar que las líneas no se superponen, sinó que van quedando cada una dentro de la otra.
Les he dado un grosor de 2 píxels; las aumentaré a 4 para que lo veas mejor.

Y, aunque los bordes de la derecha se van desplazando hacia el centro del blog, no todos lo hacen, con lo que a buen seguro ya dispondría de menos pixels en la zona de las entradas.

Y todavía no he separado los distintos contenedores entre si.

Otro detalle que puedes apreciar en esta imagen, es que la fecha de las entradas no forma parte del cuerpo de las mismas.
Esto es así porqué la fecha solo sale en la primera entrada que se vea de las publicadas en el mismo día.
Si te fijas en la imagen anterior, verás que entre las dos entradas que se muestran no hay fecha, ya que ambas las publiqué a la vez.

Sigamos.
Voy a ir separando los elementos de sus contenedores y lo haré de dentro hacia afuera para que puedas ver a qué me refiero.
Usaré el padding para hacerlo, dándole 10 pixels por todos lados en cada fase.

Así que iré añadiendo esta línea padding: 10px; a cada lugar.
Primero a .post-body para separar las letras del borde.

Efectivamente, las letras de la entrada se han separado del borde, pero no lo han hecho ni la entrada en sí ni el título, ni lo que hay al pie de la misma.
Al mismo tiempo esto significa que la superficie útil de la entrada es 20 píxels inferior a la que tuviera.

Sigamos. Ahora le daré la misma separación a .post y a .sidebar .widget y este es el resultado:

Como puedes comprobar, se ha separado el contenido de los widgets y la entrada, su título y lo que hay al pie.

Al darle una distancia total también se han separado por arriba y por abajo.
Esto se soluciona diéndole que lo haga solo por un lado o expresando en la misma línea todas las distancias.

En el primer caso pondremos, por ejemplo, padding-$startSide para separarlo solo por la izquierda, o padding: 0 10px 0 10px; indicándole que le de 0 por arriba, 10 por un lado, 0 por abajo y 10 por el otro. De esta forma podemos controlar exactamente los 4 lados de un espacio.

¡Bien! Sigamos separando. Lo siguiente será separar los widgets de los laterales de sus contenedores.
Para ello añadiré la linea de padding a .main .widget y a .sidebar y esto es lo que se ve.

Puedes notar que en este caso, además de separase el cuerpo de la entrada, también la fecha se ha separado del borde.

Por último separaré las columnas del contenedor general, así que añadiré una línea de padding a
#main-wrapper y a #sidebar-wrapper

¿Que ha pasado aquí?
Sencillamente, que ya no había más espacio.
Este último padding, en el contenedor principal de cada columna, en lugar de encoger el contenido lo que ha hecho ha sido expandir las columnas y si a ésto le sumas los bordes el resultado es éste.

Voy a ir aumentado el ancho total de #outer-wrapper, a ver cuantos píxels necesitaría para que ambas se vean en su sitio.

Sumándole 18 pixels he conseguido que se vean así, pero no olvidemos que al principio teníamos 30 pixels de distancia entre ellas.

¿Serán los marcos los culpables? Voy a quitarlos.

Ya ves, hemos ganado algunos píxels, exactamente 8, pero siguen faltándonos 10 de los 18 que le he añadido más los 30 que teníamos al principio. O sea, los 10 pixels del último padding añadido multplicado por 4 laterales, (2 en cada columna).

Para que puedas ver mejor cual de las distintas separaciones ha sido la culpable, he hecho un montaje con todos los pasos dados hasta ahora.

Podrás apreciar, en principo, que las primeras separaciones apenas han afectado a las medidas iniciales. Tan solo los bordes, que por la zona más exterior de ambas columnas se han mantenido dentro de los 10 pixels de distancia que les marca el #outer-wrapper, se han "comido" parte de los 30 pixels de distancia interna.
En este detalle del interior podrás apreciarlo mejor.

Estos han sido los píxels que he recuperado al quitar los bordes, pero me seguian haciendo falta los del último padding, que ha provocado que las columnas se expandieran hacia el centro.

A todo esto quizá te quede una duda: Si .sidebar .widgets controla todos los widgets, ¿se puede controlar un solo widget?

Vamos a verlo.
Con la plantilla en su código básico, voy a enmarcar solo .sidebar .widget y a enmarcar también un widget concreto, por ejemplo las Eiquetas, con un color distinto.

Y como puedes comprobar, no hay un doble borde en el gadget de las etiquetas.
Tan solo ha salido el borde del color que le he indicado, dominando su código particular al general.

Redimensionar el blog -4ª parte- Margin

2009-10-17T12:05:00.000+02:00

En la entrada anterior os mostraba como van reduciéndose o ampliándose las columnas si vamos separando los contenidos, añadiendo paddings en los distintos contenedores que hay en una plantilla, hasta llegar al resultado final de ver la sidebar debajo de las entradas.

En aquel caso estaba claro que no cabía en el espacio disponible, por eso se había ido allá abajo, pero ¿y si lo que ves resulta ser esto?

Te preguntarás porqué no cabe si parece haber espacio entre ambas columnas.

En este caso lo que he modificado han sido los márgenes entre columnas, margin, dándole a todo los mismos 10 píxels que le di a los padding, aunque sin modificar éstos en esta ocasión.

Recordarás que decía en la otra entrada que había una distancia de 30 píxels de separación entre columnas.
Esos 30 píxels no están reflejados en ningún sitio. Son tan solo lo que sobra del espacio disponible, 660 píxels, al estar colocado el main a la izquierda del todo y la sidebar a la derecha del todo, mediante los float.
Al decirle que deje un margen de 10 píxels por cada lado, las columnas, a diferencia de lo que sucedía con el padding, se han desplazado 10 píxels hacia el centro, con lo cual sólo quedan 10 de aquellos 30, pero, además, cada una de ellas necesita 10 píxels libres por el centro. Al haber sólo 10 píxels disponibles, la sidebar se va al fondo a buscarlos.

Hoy no volveré a poner todas las capturas que hice con los paddíngs. Tan sólo os mostraré un par de cosas que teneis que tener en cuenta.

En primer lugar, este es el aspecto del blog sin modificar. (Le he puesto fondos distintos a los de la entrada anterior, para que puedas compararlos si quieres).

Recordareis que al darle un padding a .post-body, el texto se separaba de los márgenes.
Sin embargo, dándole esos 10 pixels de margen a esta zona,

como podeis ver no se separa el texto, sinó el cuerpo entero de la entrada escrita.

Lo mismo sucede con las demás zonas. Puedes ver en este detalle del montaje de los distintos márgenes que he ido aplicando, como ninguno de ellos provoca que el título del gadget se separe del borde, cosa que se si lograba con el padding.

Para terminar, y quizá dejar un poco más claros los conceptos, aquí puedes ver 3 aspectos de la misma zona.

El primero corresponde a la entrada de ayer, tras haber aplicado separaciones (padding) a todas las zonas.
El segundo corresponde a la de hoy, tras haber aplicado márgenes a las zonas.
Y el tercero es una suma de ambos.

Podrás apreciar que en el primero, las columnas se superponen, pero no hay distancia entre ellas, en el segundo no parecen superponerse, pero si hay distancia entre ellas, mientras que en el tercero no solo se superponen, sinó que además hay una distancia entre ellas.

Esto es a causa de los 10 pixels de margen que, al no especificar a que lado se los daba, se los ha dado a los 4.