» » » Crear secciones arriba de la cabecera del blog

Crear secciones arriba de la cabecera del blog



Para crear cuatro secciones nuevas arriba de la cabecera del blog en las Plantillas de Blogger, para poder poner un anuncio, una imagen, etc. en un gadget.






Ver en Blog de prueba


Ir a Plantilla ►Editar HTML, y haz click dentro del editor, presiona Ctrl F

encuentra:


</header>


Y pegar esto encima



<div id='columna-bloque'>
<div id='columna1' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='columna' id='columna1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div id='columna2' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='columna' id='columna2' preferred='yes' style='float:right;'>
</b:section>
</div>
<div id='columna3' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='columna' id='columna3' preferred='yes' style='float:right;'>
</b:section>
</div>
<div id='columna4' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='columna' id='columna4' preferred='yes' style='float:right;'>
</b:section>
</div>
<div style='clear:both;'/>
</div>



Cada sección ocupa el 25% del espacio disponible, pueden cambiar esos valores para mostrar una más larga que la otra Ejemplo una de 40% y las otras de 20%.

Nota → El valor total del bloque es de 100% por lo que la suma de todas columnas no debe superar este porcentaje.

Guardar los cambios

Para personalizar ir a:

Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado


En el recuadro pegar el siguiente Código:
/*Nueva Seccion Cabecera*/
#columna-bloque{
width: 940px;
clear: both;
margin: auto;
height: 200px;
margin-bottom: 10px;
line-height: 1.4em;
}
#columna-bloque h2{
border: 1px solid #b2b2b2;
background: #ededed;
margin-top:-1px;
font-family:'Trebuchet MS',Trebuchet,Helvetica,Arial,Verdana,Sans-Serif;
color: #9e9e9e;
font-size: 12px;
background: trasparent;
margin: .5 em 0 .5 em;
padding: 5px;
}
.columna{
padding: 5px;
}

Así tendrás en tu blog de Blogger 4 secciones nuevas arriba de la cabecera.









Si te gusta la entrada compártela.

¡Gracias!

5 comentarios:

  1. Anónimo14/12/14

    Hay alguna manera de instalar una plantilla nueva y no perder todas los Gadgets q tiene mi configuración actual????

    ResponderEliminar
  2. Maca25/2/15

    Hola! Gracias por el tutorial
    Me aparecen debajo del header/cabecera ¿Qué hago?
    www.the-black-owl.com

    ResponderEliminar
    Respuestas
    1. Cambio-Cambie7/3/15

      Maca pusiste el código arriba de /header> si es así y no te dio resultado, te recomendaría que busques b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/> donde dice true pone false, con eso aras que la cabecera pueda ser eliminada y dará movilidad al gadget, pudiendo mover, la cabecera, para abajo.mira este tutorial para guiarte.

      Eliminar
  3. GastonDS15/3/18

    muchas gracias y como hago para poner 3 en lugar de 4 y que el del medio quede siempre centrado? aunque no ponga nada en los laterales

    ResponderEliminar
:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Haga clic para ver el código!
Para introducir un emoticon al menos un espacio antes del código del emoticon.

▬ 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