Añadir gadget arriba en la cabecera del blog


Antes vimos Eliminar cabecera del blogCrear secciones arriba de la cabecera del blogBuscador en la cabecera del blog. Ahora veremos como Añadir gadget arriba en la cabecera del blog.


Para añadir un gadget arriba de la cabecera del blog hay que saber que, 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, por ejemplo, un menú. Aquí veremos cómo habilitar la opción Añadir gadget dentro de la cabecera.

Para habilitar la opción Añadir un gadget arriba de la cabecera del blog:


  • Vamos a:


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

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


  • El buscador localizara una línea como esta:

<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. Cambiamos por 2 o por la cantidad que se quiera poner.

showaddelement='no': no permite mostrar en Diseño la opción Añadir un gadget, ponemos yes.


  • Una vez cambiados esos valores vamos a:

Página principal ► Diseño


Veremos la sección de la cabecera, así:





 Ver blog de prueba

Si te gusta la entrada compártela.

¡Gracias!

13 comentarios:

  1. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  2. Hola amigo, gracias por tu post, me ha servido. Quiero colocar una imagen arriba de la cabecera y lo he conseguido gracias a tu información. Lo que quiero preguntarte ahora es como lograr que esa imagen que puse arriba del header se extienda a todo el ancho de la pantalla, se puede hacer eso? Gracias, ojalá me puedas ayudar. Saludos.

    ResponderEliminar
    Respuestas
    1. vas a Plantilla ► Personalizar ► Avanzado ► Añadir CSS, donde dice añadir CSS, agregas esto:

      # .... {
      width:100%; /*Ancho*/
      height:100%; /*Alto*/
      }
      o
      # .... {margin:-10px 0 0 -10px;}/*Aquí arreglas el valor*/

      Espero que te sirva.

      Eliminar
  3. Hola! todo ha sido perfecto, pero lo que deseo en poner la barrar de menú sobre la cabecera y solo se pone como un menú en columnas ¿como lo soluciono? mil gracias de antemano

    ResponderEliminar
  4. para ser mas especifica lo que requiero es una barra de pestañas y lo que logro poner es una lista de vínculos o menú desplegable

    ResponderEliminar
  5. Hola!
    disculpe, a mi no me funciono ;_;
    hice todo los pasos pero no apareció ningún gadget sobre la cabecera

    ResponderEliminar
  6. Hola!
    disculpe, a mi no me funciono ;_;
    hice todo los pasos pero no apareció ningún gadget sobre la cabecera

    ResponderEliminar
    Respuestas
    1. Volve a intentarlo porque tiene que funcionar, sino déjame aquí
      la dirección del blog para ver que esta mal.

      Eliminar
  7. Pongo lo que hay que buscar en la plantilla y no me encuentra nada...

    ResponderEliminar
  8. Pongo lo que hay que buscar en la plantilla y no me encuentra nada...

    ResponderEliminar
    Respuestas
    1. Eso se debe a que blogger ha ido cambiando los formatos de la plantilla. Pruebe buscando la ppalabra: maxwidgets ;)

      Eliminar
▬ Antes de comentar recuerda:▬
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.

►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>

No olvides suscribirte para recibir las actualizaciones

Back to Top