Personalizando el blogger #3 – Plantillas Externas

 

Al igual que vimos en la primera de las entradas sobre personalización del blogger, Personalizando el blogger #1 , dónde veíamos que podíamos seleccionar más plantillas y subplantillas que cuando inicialmente creabamos nuestro blog, ahora vamos a ver cómo aplicar plantillas fuera de éstas plantillas preseleccionadas por Blogger, es decir, importar Plantillas Externas.

 

Para ello, además repasamos la entrada anterior:  «Personalizando el blogger #2 Cambio de Fondo« donde encontrabamos ésta imagen:

Antes de hacer cualquier cambio, podemos hacer una copia de seguridad de la plantilla que ya tenemos, si es que hemos realizado algún cambio.

Como veiamos en la anterior entrada y podemos ver en esta imagen anterior, podemos tanto descargar la plantilla que tenemos actualmente («Descargar Plantilla Completa» en Diseño – Edición de HTML) cómo volver a subirla gracias a «Examinar» y «Subir«.

Pues ésto es básicamente lo que tenemos que hacer, mediante el botón «Subir«, poder subir alguna plantilla que hayamos descargado previamente en nuestro ordenador.
Para ello, basta con buscar plantillas para Blogger en  internet.
Existen varias páginas gratuitas de plantillas, así como de pago. Vamos a ver algunos ejemplos y más tarde un ejemplo práctico de cambio de plantilla, subiendo una que nos guste que hayamos encontrado en la red.

Además aclaro que la plantilla estará en formato .xml (mismo formato que cuando descargamos nuestra propia plantilla desde Blogger) y que éste archivo no sólo contiene la información sobre el fondo y los colores que se aplicarán a nuestro blog, sino que poseerá otro tipo de variables como el grosor de los botones, sombras para textos, tamaño de letra para títulos, para escritos, anchura y altura del blog y quizás una de las cosas más importantes y que explicaremos detalladamente más adelante: los widgets para Blogger; es decir, una de éstas plantillas nos puede ayudar mucho en la personalización de nuestro blog; sobre todo si no poseemos un conocimiento amplio sobre el tema.

Uno de éstos sitios donde encontrar plantillas es BTemplates. Ésta página me gusta porque hay un gran número de ellas, las cuales podemos seleccionar o elegir de distintas maneras:  por formato (una, dos o más columnas, etc), por estilo (elegante, callejero, fresco, etc), por color u otras opciones.

Podeis encontrar muchas y variadas páginas donde encontrar éste tipo de plantillas:

BTemplates
PlantillasBloggers
TemplatesBloggers
… Etc

Por ejemplo, vamos a probar uno de los estilos que hemos podido encontrar, concretamente éste:

 

Para ello nos dirigimos a http://btemplates.com/2010/blogger-template-phyto
y hacemos click en «Download«, gracias a lo cual, se habrá descargado en nuestro ordenador dicha plantilla*.      * Si ésta plantilla viene comprimida la descomprimimos.

Vamos a nuestro blog al apartado que comentabamos al principio de éste post: PersonalizaciónDiseño Edición de HTML. Y en el apartado «Realizar copia de seguridad/Restaurar plantilla» hacemos click en «Examinar«. Se abrirá entonces una ventana, buscaremos el archivo y una vez seleccionado elegiremos «Abrir«. Una vez seleccionado haremos click en «Subir«. En función de si hemos añadido widgets o no, o ya hubieramos aplicado otra plantilla, nos pregunatrá sobre los widgets ya instalados, podremos eliminarlos o dejarlos.
En éste ejemplo práctico, mi blog pasaría de ésto:

a ésto:

 


Como podeis observar, la apariencia del blog cambia totalmente, además dependiendo de la plantilla aplicada poseeremos unos widgets u otros (que tambien habrá que modificar más adelante).

Y si no os gusta, pues siempre podreis volver a aquel en el que estabais, gracias a haber descargado la plantilla que ya teniais.

Personalizando el blogger #2 – Cambio de Fondo

Bueno, antes de introducir alguna otra forma de personalización para nuestro blogger, no quería dejarme este paso sin señalarlo en una nueva entrada:

El cambio de Fondo o Background para nuestro blog.

Lo señalo en una nueva entrada ya que muchos usuarios sólo desean realizar un cambio como éste ya que jugando luego un poco con las opciones de Diseño que ofrece el propio blogger (Fuentes y colores, cómo se veía en otra entrada anterior) se pueden conseguir diseños personalizados muy buenos.
Para éste cambio, deberemos modificar el XML de nuestra plantilla a mano, nosotros mismos. Ésta tarea parece algo complicada cuando no estás metido en el mundillo, pero animaros a probarla, no se corre un gran riesgo ya que modificaremos apenas una línea en éste paso. De verdad, animaros que es muy fácil.
Para modificar éste XML deberemos ir a «Personalizar» «Diseño» y «Edición de HTML«.

Aquí, encontraremos una pantalla como ésta:

Distinguimos en la imagen anterior 2 apartados: A y B.

– El apartado A es el correspondiente a «Realizar copia de seguridad/Restaurar plantilla» donde disponemos de la opción «Descargar plantilla completa«, gracias a la cual podremos descargar la plantilla XML con los cambios que hayamos realizado en nuestro XML. 
Muy útil para situaciones como en la que nos encontramos, en la que haremos cambios en el código que llegado el caso, podremos invertir subiendo de nuevo éste archivo XML con la opción «Examinar» y «Subir» que tenemos disponible.


 – El apartado B es el propio código en sí. Aquí modificaremos lo oportuno en éste caso. (En la imagen anterior se ve parte de mi código; que no tiene porqué ser igual ni mucho menos con vuestro código específico).


Bien, sabido ésto, buscamos en éste código:

* — basic html elements — */ este es el codigo inicial
body {

padding: 0;
margin: 0;
fontsize: small;
color: $textcolor;
background:url( NUESTRAFOTOGRAFIA*) fixed no-repeat top left;

}
textalign: center;
}

Observamos concretamente la línea:
     background:url( NUESTRAFOTOGRAFIA*) fixed no-repeat top left;

Deberemos sustituir el texto en rojo por la dirección de nuestra fotografía.
Yo, por ejemplo, he subido una fotografía a blogger para usar como fondo, es ésta:

Por lo que sustituiré el texto en rojo por la dirección de mi fotografía, quedaría así:
background:url(http://2.bp.blogspot.com/_k-z9yPHb3Tg/S_A98VpGkeI/AAAAAAAAAOo/lkdcyRP5i78/s1600/banner+twitter2_8.jpg ) fixed no-repeat top left;

Podéis hacer distintas pruebas con imágenes que encontreis en la web, por ejemplo googleando:


O podeis subir vuestro propio fondo a cualquier sitio de almacenamiento (hosting) de imágenes e incluir la dirección en esa línea que modificabamos.

**Si no sabeis cómo realizar éste paso podeis subir imágenes de manera fácil y sencilla  a vuestro propio blogger creando una nueva entrada o post y haciendo click en «Insertar Imagen» como se observa en:

 Al hacer Click en «Insertar Imagen» se abrirá una pantalla en la que haremos click en «Examinar» para elegir la ubicación en donde se encuentra la imagen que queramos subir y «Aceptamos«, tal y como se ve en:

 Una vez subida, para conocer la dirección de ésta imagen, haremos click derecho sobre la imagen y seleccionaremos «Copiar la ruta de enlace«, y ya tendremos nuestra dirección de la imagen que acabamos de subir. Ya subida la imagen podremos cerrar ésta Nueva Entrada que acababamos de crear.

Por ejemplo, para la imagen anterior, si hacemos este procedimiento («Copiar la Ruta del enlace«) la dirección que obtendremos será:

http://2.bp.blogspot.com/_k-z9yPHb3Tg/S_FlT4EvErI/AAAAAAAAAQg/KKiTcbJa-H8/s1600/A%C3%B1adir+Una+Imagen.JPG

Tambien existe la posibilidad si ya sois un poco más manitas y manejais algún programa de retoque fotográfico, personalizar alguna imagen concreta, tal y como se ve en la imagen de fondo de mi blogger, en la que existen a los lados mi nick en varios colores, por ejemplo.

Y eso es todo, una vez cambiada ésta dirección en la línea correspondiente de nuestro XML haremos click en «Guardar Plantilla» y ya podremos ver nuestra nueva apariencia (fondo) del blog. Además, acordaros de que si algo no nos ha gustado, podemos volver a subir la plantilla que teniamos antes de los cambios y de esa manera volver al estado en que nos encontrabamos antes de éste cambio.

Entradas relacionadas:
http://cuandoeltiempoteatrapa.blogspot.com/2010/05/personalizando-el-blogger.html