Crear secciones de cabecera.

Etiquetas: Trucos en jueves, diciembre 04, 2014

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!