» » » Crear dos secciones arriba de las entradas

Crear dos secciones arriba de las entradas



En una entrada anterior habíamos visto como Crear secciones arriba de la cabecera del blog, en esta veremos como crear dos secciones nuevas o columnas de gadgets arriba o debajo de las entradas del blog en las Plantillas de Blogger, así poder poner un anuncio, una imagen, etc. en un gadget.

Antes


Después 




Diseño ►Edición HTML ►Presionar Ctrl + F, en el buscador pegar

<b:section class='main' id='main' showaddelement='no'>
Este nos mostrara

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Entradas del blog' type='Blog'/>
</b:section>

►Para poner dos secciones nuevas arriba de las entregas del blog


Pegar sobre 

<b:section class='main' id='main' showaddelement='no'>
este código
<div id='main-top1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top1' preferred='yes' style='float:left;'/>
</div>
<div id='main-top2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='main-top-column' id='main-top2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>


►Para Poner dos secciones nuevas debajo de las entradas del blog


Pegar debajo de


<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Entradas del blog' type='Blog'/>
</b:section>

este código
<div id='main-footer-contenedor'>
<div id='main2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col1' preferred='yes' style='float:left;'/>
</div>
<div id='main3' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>

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

Si te gusta la entrada compártela.

¡Gracias!

Publicar un comentario
▬ 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