Dividir Cabecera del Blog y Colocar Menú Superior en Blogger. Que tal amigos, hoy estamos en nuestro quinto paso para crear nuestro blog gratuito y lo que les quiero enseñar en esta ocasión es a dividir la cabecera de nuestro blog para poder colocar algún banner de publicidad y también les enseñaré a colocar un menú superior donde podrá colocar más categorías. Los pasos son bastante sencillos de realizar así que comencemos.
Dividir Cabecera del Blog
Para eso iremos desde nuestro panel de control a Plantilla >> Editar HTML. Luego damos clic en cualquier espacio en blanco dentro del recuadro donde se encuentran los códigos y colocamos Ctrl+F para que nos aparezca el buscador. En el buscador colocaremos /* Header y daremos Enter.
Ahora lo que haremos será pegar debajo de ésta línea
/* Header
----------------------------------------------- */
Lo siguiente:
Luego buscaremos el siguiente código y agregamos lo que está en color rojo.
Ahora guardamos la plantilla y ya tendríamos la cabecera dividida para poder colocar nuestro banner. 😉
Dividir Cabecera del Blog
Para eso iremos desde nuestro panel de control a Plantilla >> Editar HTML. Luego damos clic en cualquier espacio en blanco dentro del recuadro donde se encuentran los códigos y colocamos Ctrl+F para que nos aparezca el buscador. En el buscador colocaremos /* Header y daremos Enter.
Ahora lo que haremos será pegar debajo de ésta línea
/* Header
----------------------------------------------- */
Lo siguiente:
.header {width:48%; float: left; margin:0 auto 1%;}
.header2 {width:47%; float: right; margin:0 auto 1%;}
.header2 {width:47%; float: right; margin:0 auto 1%;}
<div class='region-inner header-inner'>
<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>
<b:section class='header2' id='header2' showaddelement='yes'/>
<div style='clear: both;'/></div>
<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>
<b:section class='header2' id='header2' showaddelement='yes'/>
<div style='clear: both;'/></div>
Colocar menú Superior
Para poder colocar nuestro menú superior lo primero que debemos hacer es habilitar la opción para poder añadir un gadget arriba de la cabecera del blog. Para habilitar esta opción haremos lo siguiente:
Plantilla >> HTML >> Ctrl+F y en el buscador colocamos la siguiente línea <b:section class='header' id='header'
Lo que nos interesa es la línea completa que dice:
<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
Lo que haremos será dejar:
maxwidgets=2
showaddelement='yes'
Luego guardamos plantilla y ya podríamos agregar un gadget sobre la cabecera del blog. 😎
El siguiente paso será ir a Diseño >> Agregar un gadget (arriba de la cabecera) >> Texto
Colocamos el nombre que le daremos a las diferentes secciones y para realizar las separaciones les recomiendo realizarlas con ............ y ocultar los puntos con color blanco.
Dividir Cabecera del Blog y Colocar Menú Superior en Blogger "Vídeo"
¿Qué te ha parecido éste artículo?. Me encantaría saber tu opinión y para eso tienes la sección de comentarios un poco más abajo para que te expreses siempre en el margen del respeto y así poder dejar un comentario positivo como tambien uno negativo en el cual podamos debatirlo de forma amigable. Saludos amigos y a seguir ganando dinero por internet !! 😉
Dividir Cabecera del Blog y Colocar Menú Superior en Blogger
Cualquier duda que tengas, puedes dejarla en los comentarios y en cuanto la vea te respondo.
¡¡No te olvides de revisar el Ranking Top 10 donde se encuentran las mejores páginas para ganar dinero por internet!!
¡¡No te olvides de revisar el Ranking Top 10 donde se encuentran las mejores páginas para ganar dinero por internet!!
6 Comentarios
Hola amigo gracias por tu enseñanza, quisiera dividir multicolumnas , o colocar 3 banner
ResponderBorrararriba como tu pagina
Hola, para poner esos banner, solo debes agregar un imágen o códiho html de la imágen a la sección que tienes debajo del menú.
Borrarok gracias gokustian, acabo de dividir el head en dos , pero ahora en la versión móvil puesta en personalizada me sale mi titulo a la izquierda muy vertical por ejm:
BorrarMi blog
de recetas
caseras
alguna solucion ? o me queda regresar a solo un header.
Lo que sucede es que en la versión móvil nunca se verá igual que en el modo web amigo.
BorrarOye amigo con que monetizas tu blog?
ResponderBorrarPues hay plataformas de afiliación, las puedes ver en el menú superior en la sección Otros >> Plataformas de afiliación. Saludos.
Borrar