Añadir dos o mas secciones en una misma linea

Supongamos que tienes un gadget de Adsense, pero ocupa mucho espacio, que tal si en vez de tener un solo gadget, agregas dos en el mismo espacio. Te ahorrarías un poco de espacio y al mismo tiempo ganarías mas anuncios y por lo cual mas clics en anuncios.

Para los usuarios de Blogger que quieren aprovechar al máximo cada espacio del blog, o simplemente por estética. Pero por otras razones también puede ser utilizado por usuarios de adsense.

Por estas razones ya son bastantes los que piden como es que puedes partir una sección de blogger en dos partes o si se puede en mas, para así colocar mas gadgets y tener mejor organizada la información en las páginas del blog.

En algunos casos en el que se busca tener o se tiene demasiada información, que no basta con la barra lateral ni el área de entradas.

El método por el cual conseguiremos añadir las secciones en linea es un poco engorroso, por lo cual, puede que tengas que leer el post mas de una vez para entender bien que es lo que debes hacer. Tambien necesitas saber bien que es lo que quieres.

[1] Primero antes de nada debes entrar en la pestaña diseño de tu blog y despues en Edicion HTML(sin expandir las plantillas de artilugios).

[2] Después debes localizar el lugar del blog donde quieres añadir las secciones en linea, si no sabes muy bien como se llama el lugar(que será algo como el contenedor de las secciones) intenta lo siguiente:
Si en el lugar donde vas a agregar las secciones tienes un gadget con un nombre muy particular(entradas del blog, seguidores, u otro), búscalo(con Ctrl+F) por medio de title='Titulo del gadget', encontrarás el código del gadget:

<b:widget id='XXXXX' locked='false' title='Titulo del gadget' type='XXXX'/>

Donde, por ejemplo colocaré las secciones por encima de los posts

tendré que busca el gadget Entradas del blog y que antes del código del gadget debe estar las siguientes etiquetas:

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

Siempre buscaremos la etiqueta <b:section, en este caso de ejemplo la sección principal del blog.

Justo antes de esta colocaré las secciones que estarán en linea y una etiqueta extra para cambiar de nivel(que funciona como un salto de linea):

<b:section id='anuncio-izq' preferred='yes' />
<b:section id='anuncio-der' preferred='yes' />
<div style='clear:both;'>&#160;</div>
<b:section class='main' id='main' showaddelement='no' >

Pero si quiero las secciones debajo de las entradas, despues de el código del gadget puede haber otro gadget o una etiqueta como la siguiente. Pero lo importante es encontrar esta etiqueta (casi siempre esta después de algunos gadgets): </b:section>
[3] Una vez localizada, se colocan abajo de esa etiqueta otras como las siguientes:

</b:section>
<b:section id='anuncio-izq' preferred='yes' />
<b:section id='anuncio-cen' preferred='yes' />
<b:section id='anuncio-der' preferred='yes' />

Cada etiqueta de esas es una sección(donde se agregaran los gadgets) y puedes colocar las que gustes, aunque entre mas secciones coloques, mas pequeñas estarán.

[4] Ahora colocaremos el estilo, con el cual haremos que las secciones se coloquen en linea. Justo antes de la etiqueta ]]></b:skin> donde en mi caso coloqué lo siguiente:

#anuncio-izq {
float:left;
width:33%;
margin:0;
}
#anuncio-cen {
float:left;
width:33%;
margin:0;
}
#anuncio-der {
float:right;
width:33%;
margin:0;
}

Primeramente copiamos los ids de las secciones(puedes cambiarlas por anuncio-1, anuncio-2, anuncio-3....anuncio-10), que en el código del paso 3 estan en negrita, anteponiendo un signo numérico "#" en cada id.

Despues si se colocan tres secciones como en mi caso, tendre que dividir el 100% de ancho del contenedor de secciones, entre tres(que es el numero de las secciones):
100/3=33.33333
Vemos que en la división da con decimales, pero esas no las colocaremos. Por ejemplo si quiero colocar solo dos secciones cada sección tendrá un width:50%;.

Otro detalle, es que las primeras secciones se les coloca un float:left; y al ultimo debe colocarse un float:right;, los demás atributos son exactamente los mismos o los que gustes colocar.

No te desesperes, que no es fácil. Solo tranquilízate y lee con cuidado. Suerte y espero que lo logres!!

|✔| Puedes aprender CSS, en Hacker of the Web tenemos un manual muy bueno, aunque es básico: Manual básico de CSS.