31 de diciembre de 2016

Agregar widgets a la cabecera de un blog con Blogger

Añadir gadgets a la cabecera del blog


Tal como está configurado por defecto el diseño de la plantilla, en Blogger no es posible añadir ningún widget dentro de la cabecera del blog porque está limitado a solo un elemento, que es el gadget/widget de Cabecera de página.

Diseño de la cabecera del blog


Tenemos que habilitar la opción de agregar nuevos widgets a la cabecera y para eso tenemos que modificar la sección (header) que le destina Blogger.


Agregar nuevos widgets / gadgets a la cabecera de un blog con Blogger


Primero hacemos una copia de seguridad de la plantilla y del blog.

En el menú de la izquierda vamos a,
Plantilla → Editar HTML

Dentro de la ventana con el código, activamos el buscador con CTRL+F y escribimos en él,

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

La etiqueta <b:section> permite crear una sección y debe llevar una etiqueta de cierre <b:/section>. Esta etiqueta <b:section> la interpreta Blogger como una etiqueta <div>, lo que permite delimitar y controlar el contenido del documento o página por secciones.
Puede incluir atributos, uno de ellos es obligatorio "id" y el resto se pueden añadir opcionalmente.

Usamos el nombre/valor del atributo "class" (es opcional) para poder usar la misma regla en varias secciones.

Crear secciones en Blogger es interesante porque permite gestionar de forma personalizada y sencilla el contenido del blog sin necesidad de editar el código de la plantilla.

El atributo id con la etiqueta <b:section> debe tener necesariamente un valor único que no se puede repetir (sí es posible con la etiqueta <div> en HTML).

Una vez agregado un código de sección en el código de la plantilla se habilitará la función de Añadir gadgets para poder incorporarlos desde Diseño dentro del menú de Blogger.

Volvamos a la línea que hemos buscado en el código de plantilla.
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Corresponde a la sección de la cabecera del blog con el valor id='header'.

Se incluyen dos limitaciones,
  • maxwidgets='1': Limita el widget a uno. Si queremos poner 2, cambiamos el 1 por el 2 o por el número de widgets que se deseen añadir.
  • showaddelement='no': No permite mostrar en Diseño la opción Añadir un gadget. Para poder ver esta opción, ponemos yes.

El contenido de esta etiqueta <b:section>...</b:section> es,

<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITULO DEL BLOG (cabecera)' type='Header' visible='true'>...</b:widget>
</b:section>

Los widgets que están entre las etiquetas <b:section> y </b:section> son los que están incluidos dentro de la cabecera (header) del blog. De momento solo hay el único permitido que es Header1 (título de la cabecera).

Hacemos los siguientes cambios marcados en negrilla,

<b:section class='header' id='header' maxwidgets='2' name='Header' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='TITULO DEL BLOG (cabecera)' type='Header' visible='true'>...</b:widget>
</b:section> 

Guardamos la plantilla y nos vamos a Diseño, donde podemos ver que se ha agregado +Añadir un gadget

Añadir gadget encima de la cabecera del blog

Ahora ya podemos añadir el widget o widgets que necesitemos.

Cuando se crea una sección y se agrega un widget usando el enlace: "Añadir un gadget", aparecerá el código del widget dentro de la sección. En el caso que estamos viendo se muestra en,
<b:widget id='Header1' locked='true' title='TITULO DEL BLOG (cabecera)' type='Header' visible='true'>...</b:widget>


El código de los widgets en Blogger


Si vamos a la edición de la plantilla (Plantilla → Editar HTML), podemos ver sus widgets si hacemos clic sobre "Ir al widget"

Una vez seleccionado el widget deseado, Blogger nos llevará a su código dentro del código fuente del blog.

Widgets existentes en la plantilla del blog


Los widgets en Blogger usan la etiqueta <b:widget> y pueden llevar atributos (solo dos son obligatorios).

  • id: Identifica el widget y su valor debe ser único, no se puede repetir.
  • type: Su nombre está definido por Blogger. Los más habituales son,
    • Attribution (Atribución de Blogger)
    • Blog (Entradas del blog)
    • BlogArchive (Archivo)
    • BlogProfile (Perfil del autor)
    • CustomSearch (Caja de búsqueda)
    • Gadget (Los widgets que hemos añadido y no son de Blogger)
    • Header (Cabecera)
    • HTML (Código HTML o JavaScript)
    • Image (Imagen)
    • Label (Etiquetas)
    • Navbar (Barra superior de Blogger)
    • LinkList ( Lista de enlaces)
    • List (Lista de viñetas)
    • PageList (Lista de páginas) 
    • PlusBadge (Insignia de Google +)
    • PopularPosts (Entradas populares)

Como podemos comprobar en el menú desplegable de widgets de la plantilla, todos terminan con el número 1.

La razón de este número es porque algunos widgets se pueden añadir sin limitación de número y Blogger los va numerando a medida que se van agregando. Otros widgets por el contrario solo se pueden incluir una sola vez como es el caso de Attribution.

Los widgets pueden incluir código HTML además del código de Blogger.