martes, 9 de junio de 2015

BLOGGER: Personalizar las plantillas

¡Hola de nuevo internauta!,

     En la entrada de hoy veremos como personalizar una plantilla en Blogger. No vamos a explicar como hacerlo desde el menú sino dentro de la propia plantilla, mediante código, por lo que recomendamos que para usarlo se conozca CSS.

¡Al meollo!.



Explicando el código

El código para modificar las fuentes, colores y estilos de la plantilla se encuentra dentro del la etiqueta <head></head> y dentro de ella dentro de la etiqueta <b:skin></b:skin>  el siguiente ejemplo, así como el texto de este artículo, está sacado de la ayuda de Blogger :

<head>
...
<b:skin>
  <style type='text/css'>
  /*
   * Variable definitions:
   *  <Variable name='bgcolor' description='Page Background Color' 
       type='color' default='#fff'/>
   */
  body {
    background: $bgcolor;
    margin: 0;
    padding: 40px 20px;
  }
  </style>
</b:skin> 
</head>

Lo que va entre los caracteres de comentario /* */ lo usa Blogger de manera interna para asignar valores a las variables que se usan en las plantillas y que se pueden invocar desde cualquier código CSS de la misma. Además aparecerán en la pestaña "Fuentes y Colores" de Blogger por lo que cualquiera puede usarla y modificarla desde dicha opción. De esta manera nos ahorramos repetir su valor tantas veces como las usemos.

Las propiedades de la etiqueta <variable/> son:


  • name: Nombre de la variable, puede contener letras y números y solamente puede existir una con el mismo nombre.
  • description: Descripción de la variable que aparece en la pestaña "Fuentes y Colores" de Blogger.
  • type: Admite dos valores, color para indicar que se trata de un color y type para indicar que se trata de una fuente de letra (arial, courier, etc).
  • default: El valor por defecto para dicha variable. Los colores usan un código hexadecimal y las fuentes una lista con el formato font-style font-weight font-size font-family .


Para invocar dicha variable lo haremos mediante $nombre_de_variable , en el ejemplo, $bgcolor.

Y hasta aquí la entrada de hoy. Espero que os haya gustado.

¡Gracias por leerme!.

No hay comentarios:

Publicar un comentario