Hacker of the Web
Tus ideas en código!...y mas

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

Localizar bien el área


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.

Dos secciones en linea


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.

Tres secciones en linea


[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.

#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

14 comentarios !

Julián Tamayo Endocrinólogo dijo...

Excelente tu pagina , me ha permitido optimizar mi blog de una manera impresionante, sin embargo despues de hacer este ajuste con los nuevos gadget el tamaño de las letras se asemeja mas al de las entradas del blog. como hago para que sea igual de pequeña que el sidebar?
ENLACE

Unknown dijo...

Julian Tamayo, para arreglar eso puedes colocar los siguientes estilos CSS.

#anuncio-izq {
float:left;
width:50%;
margin:0;
font-weight: bold;
font-size:12px;
font-family:tahoma;

}
#anuncio-der {
float:right;
width:50%;
margin:0;
font-weight: bold;
font-size:12px;
font-family:tahoma;

}

pero si prefieres solo la :

font-size:12px;

es la del tamaño xD!!


Si no puedes coméntalo xD

Marvin Rivas dijo...

Exelente Tu blog amigo, encontre esta occion que tenia meses buscando,
No encuentro el icon para seguirte en gogle. pero ya te estoy siguiendo en twitter. te voy a enlazar a mi blog, aver que piensas Tu.
ENLACE

Unknown dijo...

DiGiTaL, me parece exelente que te pudiera servir la maraña de texto arriba xD!!

Gracias por el enlace!!

Para seguirme con Google puedes usar el siguiente enlace: http://www.blogger.com/follow-blog.g?blogID=5248247656224370068

Marvin Rivas dijo...

Hola. Aqui estoy de nuevo y queria preguntarte, si tu sabes como crear una ventana emergente, que cuando una vicita llega le anuncie que se registre,llena los datos o simplemente la cierra y sigue navagando por el blog. Espero Tu repuesta. Gracias

Unknown dijo...

DiGiTaL, Claro que si ;) Pero es mucha informacion así que lo publicare en un post xD!!

Será sencillo de implementar xD!!

Marvin Rivas dijo...

Hola amigo SaNty, solo queria saber cuando vas a publicar el post, sobre lo que pregunte, o si ya lo publicastes y no lo veo por aqui :) o me dejas un mensaje por Aqui ENLACE Chao

Unknown dijo...

DiGiTaL, dame un poco de tiempo, en lo que lo escribo. De igual manera yo te aviso ;)!!

Marvin Rivas dijo...

Gracias SanTy, Estare pendiente del post, y que bueno que tu tambien estas pendiente de los que te siguen. Eso anima mucho.

Marvin Rivas dijo...

Hola SAnTy, Gracias por el post.
Tanbien gracias por decirme la occion de dejar comentarios en mi blog, ya que no me habia percatado de eso, Creo ya lo resolvi, Espero que ahora si puedan dejar comentarios quienes me vicitan, porque la verdad si estava muy difisil dejar un comentario.
Lo otro no he podido implementar el PopUp no se que estare haciendo mal. pero voy atratar con un poco de paciencia.

Marvin Rivas dijo...

SanTy Como se implementa La occion de ENTRADAS RECIENTES ,que muestras en tu blog, me gusta porque no usas tanto espacio en el blog, ya que el que yo estoy usando me muestra las Diez entradas recientes pero las muestra en el columna hacia abajo y es mucho espacio, Me gusta mucho el tuyo,

Unknown dijo...

DiGiTaL Si es un poco complicado entenderle a mis garabatos de entradas, pero con un poco de pasiencia le entenderás xD!!

Lo de las entradas recientes, publicaré algo parecido a el mio pronto, no te desesperes, tengo varias peticiones ;)

CondoritoD dijo...

Gracias SaNtY estamos aprendiendo mucho de BLOG. Estare pendiente de tus nuevos post,

Anónimo dijo...

hola m ha funcionado perfecto lo unico es que me queda un gadgt sobre el otro como los pongo uno al lado del otro? lo mismo me paso en la cabecera


Página Principal
Arriba