Gadget de etiquetas con dos columnas

Siguiendo con el tema para principiantes de las etiquetas, hoy vamos a ver un sencillo script que he visto ya por varios blogs para poner el gadget de etiquetas en dos columnas. Este truco le será muy útil a aquellos que tengan muchas etiquetas y se les convierta el Gadget en una lista lateral demasiado larga.

Aquí tenemos el script que deberemos insertar antes de ]]></b:skin> en la edición de HTML:

#Label1 ul li{
float: left;
width: 45%;
}

Hacemos click en "vista previa" para asegurarnos de que todo ha ido bien y guardamos. Voilá! Ya lo tenemos todo hecho!

A mi gusto, me parecía que el tamaño de letra era demasiado pequeño así que hice una pequeña modificación para aumentarla un poco:

#Label1 ul li{
font-size:20px;
float: left;
width: 45%;
}

Solo deberemos cambiar el número en azul por el tamaño de fuente deseada.

http://medioblogger.blogspot.com/2012/05/gadget-de-etiquetas-con-dos-columnas.html

Read more...

Dividir el crosscol del blog

2 títulos "Lo mismo de dos formas diferentes"

• 1.- Dividir el crosscol del blog
• 2.- Añadir Gadgets entre el header y las entradas (crosscol) (al final)

Título 1
Dividir el crosscol del blog

El crosscol es esa área debajo de la cabecera en la que la mayoría de las veces añadimos un menú horizontal, aunque muchas otras veces queremos que nos rinda más ese espacio para añadir más gadgets y la mejor forma de hacerlo es dividir el crosscol del blog para que pueden entrar más gadgets en una fila, es decir, que si originalmente se ve así:

Con las respectivas divisiones pueda verse así:

Empecemos, lo primero es entrar en Diseño | Elementos de la página y cerciorarse que no haya ningún gadget en esa área, si tienes alguno lo mejor es moverlo a la sidebar u otro lugar momentáneamente, ya después podrás ponerlo de nuevo ahí, sólo tienes que arrastrarlo y soltarlo en el lugar donde lo quieras mover.

Ya que está libre esa área entonces vamos a Diseño | Edición de HTML y SIN expandir los artilugios busca este código:

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'/>
</div>

O si usas una plantilla del Diseñador de Plantillas de Blogger entonces busca este código:

<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes' />
<b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
</div>

Cualquiera de esos códigos que tengas elimínalo y en su lugar pon este:

<div class='region-inner tabs-inner' id='crosscol-wrapper' style='text-align:center'>

<div id='crosscol0' style='text-align: center; padding: 5px;'>
<b:section class='tabs' id='crosscol-superior' preferred='yes'/>
</div>

<div id='crosscol1' style='width: 33%; float: left; margin:0; padding: 5px;'>
<b:section class='tabs' id='cross1' preferred='yes' style='float:left;'/>
</div>

<div id='crosscol2' style='width: 33%; float: left; margin:0; padding: 5px;'>
<b:section class='tabs' id='cross2' preferred='yes' style='float:left;'/>
</div>

<div id='crosscol3' style='width: 33%; float: right; margin:0; padding: 5px;'>
<b:section class='tabs' id='cross3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
</div>

Guarda los cambios y listo, puedes ingresar a Elementos de la Página y ya podrás ver tu crosscol dividido en tres partes.
Si quisieras que sólo estuviera dividido en dos y no en tres partes entonces elimina el código en color gris, y cambia los 33% que están a los lados por 49%
Fácil y rápido ¿no?

9 de mayo de 2011 Publicado por El Potro

Título 2

Añadir Gadgets entre el header y las entradas (crosscol)

Existe una seccion de Blogger, que no es utilizada por el mismo blogger, y por ende por CASI nadie. La sección se llama crosscol, lo mejor es que esta, esta ubicada por debajo del header y de las entradas.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

[1]Lo que hay que hacer para poder utilizarla es entrar en Diseño>Edicion HTML>Expandir las plantillas de artilugios. y despues buscamos este codigo:

<div id='crosscol-wrapper' style='text-align:center'>
  <b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

[2]Cambias la palabra en rojo(no) por yes, despues guardas los cambios y listo.

[3]Pero también puedes dividirla en tres columnas, pero para esto necesitas sustituir el código anterior:

<div id='crosscol-wrapper' style='text-align:center'>
  <b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

por este otro:

<div id='crosscol-wrapper'>
  <div style='clear:both;'/>
  <div id='crosscol-contenedor'>
    <div id='crosscol-left'>
      <b:section class='crosscol' id='crosscol1' preferred='yes' style='float:left;'/>
    </div>
    <div id='crosscol-center'>
      <b:section class='crosscol' id='crosscol2' preferred='yes' style='float:left;'/>
    </div>
    <div id='crosscol-right'>
      <b:section class='crosscol' id='crosscol3' preferred='yes' style='float:right;'/>
    </div>
  <div style='clear:both;'/>
  </div>
</div>

[4]Despues tienes que añadir antes de ]]></b:skin> el siguiente código CSS:

#crosscol-wrapper {
text-align:center
}
#crosscol-left {
width: 30%;
float: left;
margin:0;
text-align: center;
}
#crosscol-center {
width: 40%;
float: left;
margin:0;
text-align: center;
}
#crosscol-right {
width: 30%;
float: right;
margin:0;
text-align: center;
}
#crosscol-contenedor {
clear:both;
}
.crosscol {
background:#fff;
margin: 5px;
padding: 5px;
border: 1px solid #60A9D1;
}
.crosscol-columna {
padding: 10px;
}

[5]Y guardas los cambios:

http://santyweb.blogspot.com/2009/02/anadir-gadgets-entre-el-header-y-las.html

Read more...