4.4.13

Añadir gadgets en cabecera de Blogger


La cabecera de Blogger es una sección que está limitada a un solo gadget. Esto impide que podamos agregar un gadget dentro de ella, encima del título del blog, para poner, por ejemplo, un menú. En este tutorial veremos cómo habilitar la opción Añadir un gadget dentro de la cabecera.

Si vamos a:

Página principal ► Diseño ► Diseño

...veremos la sección correspondiente a la cabecera, sin la opción Añadir un gadget, así:

Sección Cabecera de Blogger

Para habilitar la opción Añadir un gadget:

1.- Vamos a:

Diseño Plantilla Editar HTML Click dentro del editor Ctrl+f

2.- Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (search), una línea del mismo:

      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/>
</b:section>

     El anterior código pone a esta sección las siguientes limitaciones:
  • maxwidgets='1': máximo de widgets (gadgets): uno.
  • showaddelement='no': no permite mostrar en Diseño la opción Añadir un gadget.
3.- Eliminamos del código esas dos limitaciones, debiendo quedar así:

      <b:section class='header' id='header'>
<b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/>
</b:section>

4.- Guardar plantilla.

     Eliminadas las limitaciones habremos habilitado la opción Añadir un gadget.

5.- Vamos a:

Página principal ► Diseño ► Diseño

...y veremos la sección de la cabecera, así:

Añadir gadgets en la cabecera de Blogger

Podremos agregar, ahora sí, un gadget dentro de la cabecera y encima del título. Esa zona es muy apropiada para poner un menú.

Así se verá un gadget agregado encima del título del blog, dentro de la cabecera, habilitando para ésta la opción Añadir un gadget:

Gadget agregado encima del título del blog

 

Añadir un gadget debajo del título

Para añadir un gadget dentro de la cabecera, debajo del título, lo añadimos como ya se explicó, luego vamos a Diseño ► Diseño:

Añadir un gadget debajo del título

...y lo "arrastramos" debajo del título:

Añadir un gadget debajo del título

De esta manera el gadget quedará debajo del título y al lado izquierdo. Para darle otra posición, por ejemplo en el centro o al lado derecho, vamos a Editar HTML, localizamos esta etiqueta ]]></b:skin> y, antes de la misma, pegamos el sigiente código:

#Image1 {
text-align: right;
margin-top: -XXXpx;
}
  • #Image1 es la identificación del gadget. Lo identificamos como se explica en este tutorial, buscándolo en la plantilla por el título que le hayamos puesto.
  • right posiciona el gadget al lado derecho; para ubicarlo en el centro ponemos center.
  • -XXXpx le da un margen superior negativo al gadget en caso de que necesitemos subirlo (cambiando las Xs por el número de pixeles). Si no necesitamos subirlo omitimos esta línea.

33 comentarios :

▼▲ Ocultar / Mostrar comentarios
Comentario escrito por JhonnySan : #

Muy buena entrada era justo lo que estaba por buscar.
Saludos

Comentario escrito por Pedro Pablo Pachón : #

¡Saludos Jhonny! Gracias por su visita.

Comentario escrito por Sara Rodríguez : #

Muy útil! Gracias!

Comentario escrito por Cocinando Los Domingos : #

muchas gracias, ya lo aplique en mi blog. quisiera saber como puedo poner el gadget dentro de la cabecera pero debajo del titulo y del lado derecho.

Comentario escrito por Unknown : #

Cocinando los domingos, agregué en el tutorial la parte "Añadir un gadget debajo del título", en donde está la respuesta a su pregunta.

Saludos.

Comentario escrito por Unknown : #

Hola Pedro,he buscado por todo internet y no encuentro esto que quiero para mi blog, podrias ayudarme por favor
http://forobeta.com/archivos/blogger/16691d1376947437-crear-espacio-gadget-panel-de-diseno-de-blogger-130819112049742226.jpg

aqui te envio la imagen... gracias por la ayuda

Comentario escrito por Unknown : #

Mariano, si te refieres a crear un formulario de registro en la siguiente dirección encuentras un constructor de formularios:

http://www.jotformz.com/

Comentario escrito por Zach Hutton : #

antes de todo un saludo.
he intentado todo lo que has comentado y solo consigo poner widget arriba o abajo de la cabecera peron no dentro me podrias ayudar.
gracias,

Comentario escrito por Pedro Pablo Pachón : #

Zach Hutton,
El tutorial está probado y, siguiendo los pasos tal como se indican, pone el widget dentro de la cabecera. Así que revisa cuidadosamente y sigue los pasos tal cual. Si no lo logras me dices concretamente en dónde tienes la dificultad.
Saludos.

Comentario escrito por Anónimo #
Este comentario ha sido eliminado por el autor.
Comentario escrito por Saulo : #

Amigo muchas gracias :3 estuve buscando un tutorial que sea sencillo / efectivo :3 gracias de verdad

Comentario escrito por Pedro Pablo Pachón : #

César ¡Con mucho gusto!

Comentario escrito por CDG : #

Hola, quería agradecerte por el tutorial, pero tengo un problema, el tamaño del texto se queda muy pequeño, donde tendría que modificarlo para hacerlo más grande?? o cambiarlo de color. Muchisimas gracias, espero que puedas ayudarme.

Comentario escrito por Pedro Pablo Pachón : #

Hola CDG GM, vas al siguiente tutorial:

http://bloguermast.blogspot.com/2012/07/personalizar-gadgets-blogger.html

Dentro de la sección "Personalización individual" buscas "Personalización del contenido" y haces lo que allí se indica, teniendo presente que Text1 es el tipo de gadget. Deberás identificar el tipo de gadget que estás utilizando (Text1, Text2, Text3, etc. HTML1, HTML2 HTML·3, etc. Image1, Image2, Image3, etc.), y cambiar, en el código, Text1 por el tipo de gadget correspondiente.

Si tienes alguna dificultad me lo haces saber, por favor.

Saludos.

Comentario escrito por Descubre tu Mundo : #

Genial Pedro, muchas gracias, ahora a pensar que le voy a poner ahí para que quede guapo el blog...

Comentario escrito por Pedro Pablo Pachón : #

¡Saludos Eduardo!

Comentario escrito por Carlos : #

Hola qué tal?
Te comento que muy buena tu ayuda, ahora cómo puedo fijar el menú? Es decir, mientras me desplazo hacia abajo del blog, el menú se quede estático para no tener la necesidad de subir, cada vez, hasta la cabecera para buscar otra categoría dentro del blog.

Comentario escrito por Unknown : #

Carlos, un gadget solo no se puede fijar, se puede fijar la sección en la que está el gadget. En su caso, si puso el menú en la cabecera, que es a lo que se refiere este tutorial, debe fijar la cabecera. Para lograrlo debe pegar inmediatamente después del encabezamiento de la cabecera (header), en la plantilla, que es éste:

/* Header
----------------------------------------------- */

...el siguiente código:

.header {
position:fixed;
}

Saludos.

Comentario escrito por Formatos y Modelos Legales : #

Saludos:
Muy buena la entrada, termino de implementar el código en mí blog y funcionó perfectamente, lo necesitaba para un anuncio de adsense. Si está dentro de las normas de adsense me enteraré.

Comentario escrito por Unknown : #

esta buena la explicacion :)

Comentario escrito por Adriana M. : #

Muchas gracias! :)

Comentario escrito por Pedro Pablo Pachón : #

¡Con mucho gusto Adriana!

Comentario escrito por Unknown : #

Me dice error y no me permite hacerlo

Comentario escrito por Anónimo #

muchas gracias amigo!!...ahora puedo hacer lo que queria!!...me las estaba viendo negras!!!!....grax!!!!

Comentario escrito por Anónimo #

O.o no tienes un buscador aqui e tu blog?....es que queria mirar por si tenias algun tutorial para eliminar el widget del titulo del blog...pero no puede :/ ...saludos!

Comentario escrito por Unknown : #

Lion Pineda, el widget que contiene el título del blog es la cabecera, y para eliminarla este es el tutorial:

http://bloguermast.blogspot.com/2010/01/eliminar-reemplazar-cabecera-de-blogger.html

Saludos.

Comentario escrito por Unknown : #

Hola! Quiero crear gadget justo debajo de la cabecera pero me ocupan todo el ancho del blog; quiero que sean tres, no sé sí me explico:

CABECERA
GADGET GADGET GADGET
(esto es lo que quiero)



CABECERA
GADGET
(esto es lo que me sale)

¿Cómo puedo hacerlo?

Comentario escrito por Unknown : #

Hola! Quiero crear gadget justo debajo de la cabecera pero me ocupan todo el ancho del blog; quiero que sean tres, no sé sí me explico:

CABECERA
GADGET GADGET GADGET
(esto es lo que quiero)



CABECERA
GADGET
(esto es lo que me sale)

¿Cómo puedo hacerlo?

Comentario escrito por Unknown : #

Hola! Quiero crear gadget justo debajo de la cabecera pero me ocupan todo el ancho del blog; quiero que sean tres, no sé sí me explico:

CABECERA
GADGET GADGET GADGET
(esto es lo que quiero)



CABECERA
GADGET
(esto es lo que me sale)

¿Cómo puedo hacerlo?

Comentario escrito por Sandra : #
Este comentario ha sido eliminado por el autor.
Comentario escrito por Sandra : #

Hola,
Gracias por el post, es justo lo que estaba buscando, pero no hay manera de que me salga. No sé si el problema se deberá a lo siguiente. el código que me sale en la plantilla es el siguiente:

b:includable id='main'.../b:includable
b:includable id='description'.../b:includable
b:includable id='title'.../b:includable

Intento quitar los "b.include" para dejar el mismo código que pones pero aunque lo guarde no se quitan siguen saliendo, ¿qué puedo hacer?

Gracias,
Saludos.

Comentario escrito por Unknown : #

Casala,
Esos códigos no son, y no intente más quitarlos porque puede dañar la plantilla.
El código que se indica en el tutorial está más arriba. Procure localizarlo y hacerle las modificaciones indicadas, pero sin eliminarlo.
Saludos.

Comentario escrito por Elvira Porcel : #

Hola,
Mil gracias por el post, ha sido muy util pero desde que he hecho ese cambio y he insertado un menú horizontal algo he hecho mal porque cuando quiero cambiar de lugar los gadget al darle a guardar disposición me dice que "se ha producido un error. Actualiza la página e intentelo de nuevo". ¿Que ha podido ocurrir? queria pasar el gadget de debajo de la cabecera arriba y no me deja.
Gracias.
Un saludo.

Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.

El autor.