El Mosquitero

Un bloguer-camionero. Sin más…

Cómo tener nuestra propia plantilla personalizada

He estado pensando mucho esto de hacer o no cambios en el blog y finalmente me he decidido por hacerle algunos ajustes que me permitieran salir del aburrido atolladero que significa encontrarse en un blog de una sola columna, pero que evitara en lo posible el que  me viera obligado a eliminar una plantilla tan cómoda y sencilla como lo es la de MistyLook. Sí, aunque a algunos les parezca extraño, toda esta plantilla que estáis observando se basa, única y exclusivamente en la antes mentada.

Yo siempre he sido de los que gustaban de personalizar su blog.

Hasta tal punto ha llegado esa obsesión, que ya por aquí me conocen por ser ese bloguer que administra un blog que pocas veces permanece con la misma apariencia en la segunda visita. Y no se crean que es que cambio la plantilla cada dos por tres.

En realidad lo que hago es cambiar los parámetros que le dan forma para ir adecuándola a lo que en esos momentos me parece más acertado, chulo, o molón, y así dejarlo implementado siempre con la misma plantilla, la MistyLook.

Una vez que reconoces cada uno de los códigos que ésta tiene, cosa que solo se consigue toqueteando una y otra vez con la técnica del ensayo-error (recuerda hacer copias de seguridad con el blog de notas antes de guardar cualquier cambio), eres capaz de añadirle las pocas líneas que puede que le faltan para que con un ligero cambio de parámetros su forma cambie a tu gusto.

Atención calamidades:

  • No hagáis ninguno de estos cambios que os voy a relatar al tuntún.
  • No pretendáis hacer ningún cambio en vuestras plantillas sin haberla antes guardado en el blog de notas con los artilugios extendidos.
  • Y tercero, todas las plantillas no tienen los mismos códigos, así que antes de hacer los cambios deberéis aprender a reconocerlos.

Por ejemplo, pongamos por caso que ahora queremos que nuestra sídebar (barra lateral) tenga una línea que la delimite y que la diferencie de los posts.

Bien, pues sería tan sencillo como ver si en nuestra plantilla pone ‘border-left:0px dashed #265e15;’ en el CSS de la misma:

224305-8112010114148am

Donde ‘Border.left:0px’ indicaría que el borde aparecería a la izquierda de la columna con un ancho de 0px. Así será invisible, pero si en vez de 0 cambiáramos el parámetro por un 1 la línea sería visible.

Al mismo tiempo también podríamos cambiar el tipo de línea que sería visible, ya que sustituyendo el ‘dashed’ por un simple ‘solid’, ésta pasaría a ser de discontinua a continua en un abrir y cerrar de ojos.

Ese mismo subrayado se puede utilizar también para modificar los títulos de los posts y las secciones de las barras laterales añadiendo, como antes, una simple línea en cada sección.

barra titulos

Por ejemplo, en donde pone ‘#sidebar h2’ hay que buscar la línea que pone ‘border-bottom:1px solid;’. Si no tienes esa línea en el blog puede que sea porque, o no está el código, o éste indica que el pixel de la misma es 0, como hemos visto antes.

Del mismo modo, si además de ésta anterior le añadimos ‘border-left:0px dashed #265e15;’ a continuación, en los títulos nos aparecerán dos barras distintas, una lateral, la que indica este código, y otra inferior, que es la que acabamos de ver. Así la caja de los títulos de la barra lateral nos aparecería como medio rectángulo, haciendo las veces de divisor y cama para los mismos.

barra inferior posts

Si esos códigos los añadimos en todas y cada una de las secciones que tienen como característica el personalizar los títulos del blog, conseguiremos tener la capacidad de marcar o desmarcar los mismos a nuestro antojo. Podremos cambiar la forma en la que los demás ven nuestros títulos de posts y sidebar con un simple cambio de parámetros del ‘0’ al ‘1’ y viceversa.

También se puede entablar el blog en diferentes tablas a modo de capas, lo que nos permite ver cuadros que rodean tal o cual contenido a nuestro gusto.

Por ejemplo, yo tengo una tabla para cada sección. Ahora solo es visible la del contenedor y el resto permanece invisible, pero no se si recordaréis que hace muy poco en el blog se podía ver un contenedor que rodeaba a cada post y que lo diferenciaba del resto.

Esa técnica en un poco más complicada que la anterior y necesita de un poco más de paciencia para llevarla a cabo, amén de un poco de experiencia a la hora de reconocer trozos de código en la plantilla que elijamos. Pero sería más o menos tan sencillo como aprender en qué punto el código habla de cómo serán nuestros posts y entonces encuadrarlo todo él entre este otro que sería el que le añadiríamos:

Antes del post:

tabla posts

Y después del post:

tabla posts 2

No hagáis caso de los códigos que se ven arriba y abajo en esta captura, ya que los mismos son trozos de tabla que enmarcan el rectángulo de comentarios de cada post en el caso superior, y la aparición de otro adicional para las entradas relacionadas en el inferior.

Lo mismo pasa con las columnas laterales.

En este caso lo que hay que hacer es sacar la calculadora y es algo más complicado de hace de lo que parece. Hay buenos blogs en donde se explica cómo hacer esto, pero en resumen la cosa sería tal que así.

En un blog con una sola columna lateral lo que deberíamos hacer es copiar todo el código CSS que le da forma:

sidebar

Y pegarlo a continuación sustituyendo su nombre por un identificativo nuevo. Por ejemplo añadiéndole un ‘–left’ al que ya tiene.

sidebar left

De esta forma tendríamos el mismo código dos veces seguidas en la plantilla, pero cada uno daría forma a una sidebar diferente. Pero la cosa está en que aún no tenemos esa barra lateral físicamente visible ya que no tenemos el código necesario en la plantilla para que ésta lo sea. Así que nos vamos mucho más abajo y en donde comienza a dársele forma a nuestra sídebar veremos un pequeño trozo de código que reza tal que así:

sidebar 3

Y justo encima de él, para no complicarnos mucho pegamos lo siguiente tal cual hemos hecho anteriormente y con el nombre que decidimos ponerle anteriormente a nuestra sidebar en el paso anterior, finiquitándolo con un simple </b:section> al final que nos dará la forma final de la sidebar:

sidebar definida

Una vez hecho esto solo habrá que calcular el nuevo ancho del blog para que quepa la nueva barra lateral, por lo que si ésta medía 200px deberemos aumentar en tal proporción el ancho del blog.

Para ello habría que ir a buscar en dónde se dicta cual es el ancho del blog y sumarle los pixels de nuestra nueva barra lateral:

ancho blog

Si por casualidad vierais que vuestro blog se hace demasiado ancho, cosa bastante probable si es uno ancho de por sí, lo que deberíais hacer es modificar tanto los anchos de las columnas como de los posts para restarle entre todos los píxeles de la nueva.

Por ejemplo, en mi plantilla sustituí los 600px de los posts por 500px y le resté 50px a la primera barra lateral dejándola en 200px, así saqué los 150px que me hacían falta para la nueva. Si no lo haces así la plantilla se descuadrará y en vez de modificarla habrás conseguido un churro insufrible. Por ello te recuerdo que antes de hacer cambio alguno en tu blog deberías intentarlo en uno de pruebas. Así te ahorrarás sustos innecesarios.

Con pequeños cambios como éstos nosotros podemos utilizar una misma plantilla para hacerla tan diferente como queramos.

Eso nos ahorra el tener que buscar nuevas plantillas y nos ayuda a aprender a identificar códigos y familiarizarnos con ellos. Nos permite saber de antemano en donde está el trozo de código que tal vez queramos modificar. Nos ayuda a ubicarnos en la misma y nos facilita el aprendizaje.

Si eligen una plantilla, incluso de las que ya están montadas, y comienzan a modificarla a su antojo intentando no cambiarla nunca, podrás hacer todo cuanto se les ocurra para personalizarla sin tener que recurrir a aburridas plantillas que seguro alguno habrá descargado también para su blog.

Mi plantilla solo la tengo yo, nadie más.

Y aunque la he modificado he de reconocer que sigue siendo, en esencia, la misma que una vez me descargué de Blogger Tamplates. Por eso no quito los créditos de abajo, porque sin ellos yo nunca hubiera tenido mi propia plantilla personalizada.

Ahora ya sabéis que lo único que os limita para tener vuestra propia plantilla en funcionamiento sois únicamente vosotros mismos. Aprender nunca es aburrido y si conseguís aclararos un poco os puedo asegurar que ya nunca dejaréis de hace esos pequeños cambios a vuestro blog que serán los que lo dotarán de personalidad propia.

Os recuerdo un post en el que os hablaba sobre cómo aprender a mejorar vuestros blogs y que tiene un parecido extrañamente familiar con este que acabáis de leer.

Allí puse negro sobre blanco unos cuantos blogs que para mi eran esenciales para tenerlos como guía en el arduo trabajo que significa aprender a identificar los códigos y parámetros que dan forma a nuestras bitácoras.

Ayuda para el blog, Ayuda para mi Web, Blog & Roll, Blog & Web, Blog del Blog, Bloguer Templetes, Cosas Sencillas, Diversas y Variadas, El mundo birrazo de Chukie, El Escaparate de Rosa, Forat, Gem@ Blog, Girly Bloguer,La Bloguería, Meta microcosmos, Mmadrigal, Muchas Plantillas, Olobloguer,Pizcos Blog, Silicon Inside, Tecnología diaria, Utilidades para Webmasters,Vagabundia, y finalmente Vida Bloguer.

Los recuerdo de nuevo hoy para que todos tengáis en cuenta que no es éste el blog de referencia para realizar los cambios que gustéis en el blog, sino ellos. Es allí donde aprenderéis a reconocer los códigos, a familiarizaros con ellos, donde podréis hacer preguntas que encontrarán una acertada respuesta y donde disfrutaréis del placer que significa saberse hacedor de una plantilla que nadie más que uno mismo tendrá para su blog.

A veces bloguear también significa aprender. Y eso es lo que más me gusta de todo esto.

Anuncios

7 Respuestas a “Cómo tener nuestra propia plantilla personalizada

  1. Juancar 08/11/2010 en 13:31

    Muchas gracias Antonio. Lo cierto,es que yo hago como tú con eso de ir probando,aunque lo cierto, mis conocimientos informáticos son muy limitados.Un saludo!

  2. Antonio E. Zafra 08/11/2010 en 13:37

    Pues no te digo nada de los míos @Juancar jejejeYo solo se retocar las plantillas más o menos de forma autónoma y formatear el ordenador. Si me sacas de ahí me haces un desgraciado jejeje

  3. Krol 08/28/2010 en 23:38

    Gracias por tus consejos, habrá que pelearse y aprender los códigos pero ¿y para cambiar el fondo y personalizarlo, con una foto por ejemplo? Gracias

  4. Antonio E. Zafra 08/28/2010 en 23:46

    Bueno Krol, si tu blog está en bloguer lo tienes bastante fácil. Con el nuevo diseñador de plantillas puedes hacerlo de forma sencilla y rápida. Solo tienes que toquetear un poco.Si lo que quieres es hacerlo a mano y así aprender un poco a identificar cada una de las partes del blog, solo tienes que ir a la plantilla y buscas en el CSS este trozo de código:body { background: #fff url(Aquí la foto que quieras poner de fondo) right top no-repeat; margin: 0; font: 76%/1.6em verdana, tahoma, arial, sans-serif; color: #000; text-align: center;Donde background solo tienes que poner entre los paréntesis la url de la foto que quieras poner de fondo, nada más.

  5. Krol 08/30/2010 en 20:04

    @Antonio E. ZafraGracias, investigaré. Mi gran problema es que soy muy muy muy novata y además no se hacer la mayoría de las cosas que para otros son "basicas", pero bueno algún día lo conseguiré.

  6. Antonio E. Zafra 08/30/2010 en 20:40

    @Kroltú solo sigue los pasos de esos que he enlazado en le blog y pregunta todo loq ue sea que necesitas. Ellos están acostumbrados a que les hagan las mismas preguntas que ahora a ti te obsesionan y sin duda tienen una forma más clara y sencilla de explicarlas que yo.Un beso.

  7. Chipilofan 11/28/2010 en 4:40

    Hola, hemos iniciado un proyecto, donde podrás dar de alta tu blog gratuitamente!No pierdas la oportunidad de agregar tu blog y cuentalo con tu amig@, asi seremos más cada día.Visita: http://altasblogs.blogspot.com/

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s