Usamos cookies propias y de terceros para ofrecer info personalizada según su navegación. Si continua navegando consideramos que acepta el uso de cookiesOKMás información

Como dividir footer o pie de página del Blog


En las plantillas tenemos la opción de elegir el footer, con una columna, dos o tres. 
Para ello iremos a Plantilla, Personalizar:


página del Blog


página del Blog



En el diseñador de Plantillas de Blogger
Diseño
Diseño de pie de página,
y elegimos el que queramos, una dos o tres columnas.

Pero en ocasiones tenemos plantillas en las cuales no hay ninguna, y como todo se puede arreglar, vamos a ver como solucionarlo.


Vamos a Edición HTML de la plantilla y buscamos  este  código:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Lo reemplazamos por el siguiente código:


<div id='footer-wrapper'>
<div id='footer-column-container'>
<div id='footer-column-left' style='float:left; width: 32%;margin: 2px;'>
<b:section class='footer-column' id='footer2' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div id='footer-column-center' style='float:left; width: 32%;margin: 2px'>
<b:section class='footer-column' id='footer3' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div id='footer-column-right' style='float:right; width: 32%;'>
<b:section class='footer-column' id='footer4' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div style='clear:both;'/>
<div id='footer-bottom'>
<b:section class='footer' id='footer-column-bottom' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div></div>
<div style='clear:both;'/>


Vista previa y si todo esta bien, guardamos los cambios. 

Vamos a Diseño > Elementos de Página veremos las tres columnas
El 
32% , lo podremos modificar si queremos otras anchuras

Si la parte de las 3 columnas queda sin color de fondo podemos añadir la siguiente línea al CSS para darle color:


#footer-wrapper{background-color: #ffff66;/* color linea*/border: 1px solid #0000FF;/* color /fondo.*/}


Con esto ya tienes tu Footer dividido en 3 columnas para poder darle mayor utilidad.   ¿Tienes que dividir tu pie de página?



En las plantillas tenemos la opción de elegir el footer, con una columna, dos o tres. 
Para ello iremos a Plantilla, Personalizar:


página del Blog


página del Blog



En el diseñador de Plantillas de Blogger
Diseño
Diseño de pie de página,
y elegimos el que queramos, una dos o tres columnas.

Pero en ocasiones tenemos plantillas en las cuales no hay ninguna, y como todo se puede arreglar, vamos a ver como solucionarlo.


Vamos a Edición HTML de la plantilla y buscamos  este  código:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Lo reemplazamos por el siguiente código:


<div id='footer-wrapper'>
<div id='footer-column-container'>
<div id='footer-column-left' style='float:left; width: 32%;margin: 2px;'>
<b:section class='footer-column' id='footer2' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div id='footer-column-center' style='float:left; width: 32%;margin: 2px'>
<b:section class='footer-column' id='footer3' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div id='footer-column-right' style='float:right; width: 32%;'>
<b:section class='footer-column' id='footer4' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div style='clear:both;'/>
<div id='footer-bottom'>
<b:section class='footer' id='footer-column-bottom' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div></div>
<div style='clear:both;'/>


Vista previa y si todo esta bien, guardamos los cambios. 

Vamos a Diseño > Elementos de Página veremos las tres columnas
El 
32% , lo podremos modificar si queremos otras anchuras

Si la parte de las 3 columnas queda sin color de fondo podemos añadir la siguiente línea al CSS para darle color:


#footer-wrapper{background-color: #ffff66;/* color linea*/border: 1px solid #0000FF;/* color /fondo.*/}


Con esto ya tienes tu Footer dividido en 3 columnas para poder darle mayor utilidad.   ¿Tienes que dividir tu pie de página?


Error blogger

Unknown
Vaya, hemos caído en el error blogger ..llevo todo el día mirando como solucionar el problema y opte por cambiar a una plantilla predeterminada y resulta que el error sigue siendo el mismo.
Ni siquiera puedo restaurar a las copias de seguridad que tengo guardadas. Y ahora a ultima hora he encontrado un articulo que explica que es un problema de blogger.
Este es el mensaje que sale cada vez que intentas entrar en HTML:
error-blogger

Así que lo expongo, por si acaso alguien esta con el mismo problema, para que no toque nada y espere a ver si blogger, lo soluciona.
Mientras tanto, tenemos todo descolocado, asi que en cuanto esto se solucione intentaremos recomponer con la copia de seguridad o volviendo a diseñar el blog.

Actualización:
Al día siguiente ya me permitió modificar la plantilla, así que si te ocurre hay que esperar pacientemente.




Vaya, hemos caído en el error blogger ..llevo todo el día mirando como solucionar el problema y opte por cambiar a una plantilla predeterminada y resulta que el error sigue siendo el mismo.
Ni siquiera puedo restaurar a las copias de seguridad que tengo guardadas. Y ahora a ultima hora he encontrado un articulo que explica que es un problema de blogger.
Este es el mensaje que sale cada vez que intentas entrar en HTML:
error-blogger

Así que lo expongo, por si acaso alguien esta con el mismo problema, para que no toque nada y espere a ver si blogger, lo soluciona.
Mientras tanto, tenemos todo descolocado, asi que en cuanto esto se solucione intentaremos recomponer con la copia de seguridad o volviendo a diseñar el blog.

Actualización:
Al día siguiente ya me permitió modificar la plantilla, así que si te ocurre hay que esperar pacientemente.




Cómo utilizar las fuentes personalizadas de Google en Blogger

Vamos a ver como utilizar las fuentes personalizadas de Google en Blogger, para ello tendremos que entrar en:

 http://www.google.com/fonts 
Seleccionar fuente


donde tenemos muchas fuentes para elegir, despues de mirar y mirar seleccionamos la que mas nos guste...


link de la seleccion















Copiaremos el link de la selección le añadiremos / de esta manera
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>

Sera este el que utilizaremos:
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'/>
y lo pegaremos antes de la etiqueta </head> de nuestra plantilla.

Para utilizar  el tipo de fuente,un poco mas abajo encontraremos la font family  que sera lo que añadiremos en el CSS según donde vayamos a utilizarlo:
Font Family














 Por ejemplo en el body:
body { font-family: 'Indie Flower', cursive;
color: #991188; 
El resultado sera:

Ejemplo de fuente




           FacebookGoogle+TwitterBlogRSS RSS

Directamente a tu e-mail     


                                                   

Vamos a ver como utilizar las fuentes personalizadas de Google en Blogger, para ello tendremos que entrar en:

 http://www.google.com/fonts 
Seleccionar fuente


donde tenemos muchas fuentes para elegir, despues de mirar y mirar seleccionamos la que mas nos guste...


link de la seleccion















Copiaremos el link de la selección le añadiremos / de esta manera
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>

Sera este el que utilizaremos:
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'/>
y lo pegaremos antes de la etiqueta </head> de nuestra plantilla.

Para utilizar  el tipo de fuente,un poco mas abajo encontraremos la font family  que sera lo que añadiremos en el CSS según donde vayamos a utilizarlo:
Font Family














 Por ejemplo en el body:
body { font-family: 'Indie Flower', cursive;
color: #991188; 
El resultado sera:

Ejemplo de fuente




           FacebookGoogle+TwitterBlogRSS RSS

Directamente a tu e-mail     


                                                   

Titulo en movimiento en barra navegador


Colocaremos el titulo en movimiento en la barra del navegador, 
titulo-en-movimiento

solamente tendremos que cambiar donde dice:   
AQUI EL TITULO O MENSAJE QUE QUIERAS  y agregarlo como elemento HTML en nuestra plantilla


<SCRIPT LANGUAGE="JavaScript">
var txt=" AQUI EL TITULO O MENSAJE QUE QUIERAS";
var espera=100;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);}
rotulo_title();
</SCRIPT>
Con este sencillo truco pondremos en movimiento la pestaña  y lanzaremos en mensaje que queramos.

Ya sabes, si quieres comentar...  y si te gusto compártelo...

Colocaremos el titulo en movimiento en la barra del navegador, 
titulo-en-movimiento

solamente tendremos que cambiar donde dice:   
AQUI EL TITULO O MENSAJE QUE QUIERAS  y agregarlo como elemento HTML en nuestra plantilla


<SCRIPT LANGUAGE="JavaScript">
var txt=" AQUI EL TITULO O MENSAJE QUE QUIERAS";
var espera=100;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);}
rotulo_title();
</SCRIPT>
Con este sencillo truco pondremos en movimiento la pestaña  y lanzaremos en mensaje que queramos.

Ya sabes, si quieres comentar...  y si te gusto compártelo...

Plantilla de Entrada las labores repetitivas

La Plantilla de Entrada, otra muy buena utilidad que nos brinda blogger para facilitarnos las labores repetitivas de nuestras entradas, así que si mas vamos a verla. 


plantilla-entrada

Para acceder a ella tendremos que ir a:
  1. Vista diseño de nuestro blog y pasaremos a configuración, Entradas y comentarios y vemos que tenemos dentro de Entradas, Plantilla de las entradas, es en ese recuadro donde pondremos todo lo que queramos que salga en nuestras entradas, ahora bien todo lo tendremos que poner en HTML, pero si no sabemos nada de este código bastara con ir a una nueva entrada y en vista redactar poner lo que queramos que salga y luego pasamos a vista  html y copiamos y pegamos todo el código, en el recuadro que mencionábamos antes.
  2. Esto ocurrirá a partir de incorporar el código, todas las demás entradas seguirán como estaban hasta ese momento. Pero todas las nuevas entradas que hagamos saldrán nuestro código y que si en ese momento no quisiéramos que se vieran, bastara con eliminarla en esta entrada, y la próxima , volvería a salir. 
  3. Por lo que si ponemos algo que luego no queremos que salga, sera cuestión de volver a donde hemos señalado en primer termino y eliminarlo. En este blog, ahora tenemos esta firma y los iconos sociales que tenemos en las nuevas entradas.



Ya sabes, si quieres comentar...  y si te gusto compártelo...
La Plantilla de Entrada, otra muy buena utilidad que nos brinda blogger para facilitarnos las labores repetitivas de nuestras entradas, así que si mas vamos a verla. 


plantilla-entrada

Para acceder a ella tendremos que ir a:
  1. Vista diseño de nuestro blog y pasaremos a configuración, Entradas y comentarios y vemos que tenemos dentro de Entradas, Plantilla de las entradas, es en ese recuadro donde pondremos todo lo que queramos que salga en nuestras entradas, ahora bien todo lo tendremos que poner en HTML, pero si no sabemos nada de este código bastara con ir a una nueva entrada y en vista redactar poner lo que queramos que salga y luego pasamos a vista  html y copiamos y pegamos todo el código, en el recuadro que mencionábamos antes.
  2. Esto ocurrirá a partir de incorporar el código, todas las demás entradas seguirán como estaban hasta ese momento. Pero todas las nuevas entradas que hagamos saldrán nuestro código y que si en ese momento no quisiéramos que se vieran, bastara con eliminarla en esta entrada, y la próxima , volvería a salir. 
  3. Por lo que si ponemos algo que luego no queremos que salga, sera cuestión de volver a donde hemos señalado en primer termino y eliminarlo. En este blog, ahora tenemos esta firma y los iconos sociales que tenemos en las nuevas entradas.



Ya sabes, si quieres comentar...  y si te gusto compártelo...

Abrir los links en una nueva ventana

codigos

Con este sencillo código, lograremos abrir los links en una nueva ventana, este truco nos sera útil para que nuestras visitas permanezcan un poco mas en nuestro blog,








Un link, se vera de la siguiente manera:


<a href="http://laredteayudara.blogspot.com/">
Para abrirlo en una nueva ventana, iremos a Edición HTML de la entrada y le añadimos
 target="_blank" 
al link a modificar como lo muestra la siguiente cita:
<a href="http://laredteayudara.blogspot.com/" target="_blank">
Deja un espacio entre /" y target.


Para que todos los links se abran en una nueva ventana vas a
 Diseño, Edición HTML y pegas después de:
<head> 
lo siguiente:
<base target='_blank'/>
Como puedes ver es muy sencillo,
Te ha resultado fácil la explicación de ¿como abrir los links en una nueva ventana?
Compartelo en las redes:
codigos

Con este sencillo código, lograremos abrir los links en una nueva ventana, este truco nos sera útil para que nuestras visitas permanezcan un poco mas en nuestro blog,








Un link, se vera de la siguiente manera:


<a href="http://laredteayudara.blogspot.com/">
Para abrirlo en una nueva ventana, iremos a Edición HTML de la entrada y le añadimos
 target="_blank" 
al link a modificar como lo muestra la siguiente cita:
<a href="http://laredteayudara.blogspot.com/" target="_blank">
Deja un espacio entre /" y target.


Para que todos los links se abran en una nueva ventana vas a
 Diseño, Edición HTML y pegas después de:
<head> 
lo siguiente:
<base target='_blank'/>
Como puedes ver es muy sencillo,
Te ha resultado fácil la explicación de ¿como abrir los links en una nueva ventana?
Compartelo en las redes:

Como señalizar el código que añadimos en nuestra plantilla

plantillaModificar nuestra plantilla y luego no encontrar lo que hemos puesto, por no señalizar el código que añadimos para cualquier modificación, resulta de lo más incómodo, y veo que a muchos nos pasa así que lo vamos a explicar para el que quiera ser ordenado, con las modificaciones, en sus plantillas


Pero vamos a ponerlo correctamente ya que si bien algunas veces blogger nos admite el fallo, luego es un lio buscarlo.

En una plantilla, marcaremos de una forma el CSS y de otra el HTML.


Señalizar lo que añadimos en el CSS
 CSS  es  el código de la misma que está incluido entre las etiquetas <b:skin><![CDATA[/* y ]]></b:skin>.
/* ------ */
/* Footer----------------------------------------------- */


Señalizar lo que añadimos en el HTML
HTML desde la etiqueta ]]></b:skin> hasta el final del código de la plantilla es  código HTML, aunque con la única precaución de no incluir nada entre las etiquetas </head> y <body>.

<!-- Script de indice -->

<!-- Inicio del script de indice -->Aqui pondríamos nuestro script<!-- Final del script de indice -->

Los navegadores no interpretarán lo que esté incluido dentro de esas etiquetas <!--   -->
De esta manera si quisiéramos cambiar algo de nuestra plantilla, solamente la solamente lo tendríamos que meter entre medio, ya que los navegadores no lo interpretaría, y poner el código donde quisiéramos.
<!-- Inicio de enlace
AQUI IRIA EL CODIGO
Final del enlace  -->
De tal forma que si un día lo quisiéramos  volver a usar bastaría con eliminar lo  añadido.





plantillaModificar nuestra plantilla y luego no encontrar lo que hemos puesto, por no señalizar el código que añadimos para cualquier modificación, resulta de lo más incómodo, y veo que a muchos nos pasa así que lo vamos a explicar para el que quiera ser ordenado, con las modificaciones, en sus plantillas


Pero vamos a ponerlo correctamente ya que si bien algunas veces blogger nos admite el fallo, luego es un lio buscarlo.

En una plantilla, marcaremos de una forma el CSS y de otra el HTML.


Señalizar lo que añadimos en el CSS
 CSS  es  el código de la misma que está incluido entre las etiquetas <b:skin><![CDATA[/* y ]]></b:skin>.
/* ------ */
/* Footer----------------------------------------------- */


Señalizar lo que añadimos en el HTML
HTML desde la etiqueta ]]></b:skin> hasta el final del código de la plantilla es  código HTML, aunque con la única precaución de no incluir nada entre las etiquetas </head> y <body>.

<!-- Script de indice -->

<!-- Inicio del script de indice -->Aqui pondríamos nuestro script<!-- Final del script de indice -->

Los navegadores no interpretarán lo que esté incluido dentro de esas etiquetas <!--   -->
De esta manera si quisiéramos cambiar algo de nuestra plantilla, solamente la solamente lo tendríamos que meter entre medio, ya que los navegadores no lo interpretaría, y poner el código donde quisiéramos.
<!-- Inicio de enlace
AQUI IRIA EL CODIGO
Final del enlace  -->
De tal forma que si un día lo quisiéramos  volver a usar bastaría con eliminar lo  añadido.





Gadget que sólo lo pueda ver el administrador del blog

Unknown
gadget





















Que sólo lo pueda ver el administrador del blog y no los lectores.
Siempre estamos modificando los gadget y muchas veces nuestros lectores, están viendo los gadget mal puestos o inacabados, puede ser cualquier tipo de gadget.

Con este código veremos que podremos ocultarlo mientras lo manipulamos y dejamos a nuestro gusto, solamente agregaremos dos líneas a nuestro gadget para ocultarlo.
Entraremos en vista Diseño y  en Edición HTML de la plantilla con Ctrol f buscaremos el gadget.
Cualquiera nos va a servir para ver como ocultarlo,
Con  un  gadget HTML/Javascript  veremos un código, asi:

<b:widget id='HTML1' locked='false' title='' type='HTML'><b:includable id='main'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/>
</b:includable></b:widget>


Lo único será añadirle lo escrito en azul.

<b:widget id='HTML1' locked='false' title='' type='HTML'><b:includable id='main'><span class='item-control  blog-admin'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/></span></b:includable>
</b:widget>


Si cierras la sesión y entras a tu blog no veras  el gadget que ocultaste, pero si inicias sesión estará  visible para ti.
Para los gadget que no tienen el código igual, una referencia será buscar
<b:includable id='main'>              
 y colocas después
<span class='item-control  blog-admin'>
No todos los gadgets tienen la misma estructura como la del ejemplo, pero será fácil guiarte,
sólo debes colocar el primer código azul  justo después de
<b:includable id='main'> 
 y
 </span> 
 antes de

 </b:includable>

Ahora solo tu veras ese gadget…
¿Te ha servido esta información?
gadget





















Que sólo lo pueda ver el administrador del blog y no los lectores.
Siempre estamos modificando los gadget y muchas veces nuestros lectores, están viendo los gadget mal puestos o inacabados, puede ser cualquier tipo de gadget.

Con este código veremos que podremos ocultarlo mientras lo manipulamos y dejamos a nuestro gusto, solamente agregaremos dos líneas a nuestro gadget para ocultarlo.
Entraremos en vista Diseño y  en Edición HTML de la plantilla con Ctrol f buscaremos el gadget.
Cualquiera nos va a servir para ver como ocultarlo,
Con  un  gadget HTML/Javascript  veremos un código, asi:

<b:widget id='HTML1' locked='false' title='' type='HTML'><b:includable id='main'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/>
</b:includable></b:widget>


Lo único será añadirle lo escrito en azul.

<b:widget id='HTML1' locked='false' title='' type='HTML'><b:includable id='main'><span class='item-control  blog-admin'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/></span></b:includable>
</b:widget>


Si cierras la sesión y entras a tu blog no veras  el gadget que ocultaste, pero si inicias sesión estará  visible para ti.
Para los gadget que no tienen el código igual, una referencia será buscar
<b:includable id='main'>              
 y colocas después
<span class='item-control  blog-admin'>
No todos los gadgets tienen la misma estructura como la del ejemplo, pero será fácil guiarte,
sólo debes colocar el primer código azul  justo después de
<b:includable id='main'> 
 y
 </span> 
 antes de

 </b:includable>

Ahora solo tu veras ese gadget…
¿Te ha servido esta información?

Añadir dos columnas de gadgets arriba o abajo de las entradas.

gadget

















Para añadir un gadget arriba o abajo de las entradas bastara con arrastrar el gadget hasta donde queramos que aparezca,

Pero si queremos añadir dos columnas de gadget arriba o abajo de las entradas. tal y como vemos en la siguiente imagen
la-red-columnas







 Entraremos en Edición HTML de la plantilla,y con Ctrl F buscaremos este código:

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

Si quieres las columnas de gadgets encima de las entradas, entonces agrega arriba de lo anterior esto:



<div id='BlogGadget1' style='width: 48%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-1' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget2' style='width: 48%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

Si también quieres dos columnas de gadgets debajo de las entradas, entonces agrega debajo del primer código esto:



<div id='BlogGadget3' style='width: 48%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-3' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget4' style='width: 48%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>


El % en color rojo es el ancho de cada uno de los contenedores, si los gadgets no estuvieran igualados, reduce esos valores hasta que los gadgets se vean igualados, conseguiremos tener dos columnas en esa zona del blog.


Puedes poner las columnas arriba, las columnas abajo o arriba y abajo, eso es ya decision de cada uno o bien la necesidad que tengamos en cada blog



gadget

















Para añadir un gadget arriba o abajo de las entradas bastara con arrastrar el gadget hasta donde queramos que aparezca,

Pero si queremos añadir dos columnas de gadget arriba o abajo de las entradas. tal y como vemos en la siguiente imagen
la-red-columnas







 Entraremos en Edición HTML de la plantilla,y con Ctrl F buscaremos este código:

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

Si quieres las columnas de gadgets encima de las entradas, entonces agrega arriba de lo anterior esto:



<div id='BlogGadget1' style='width: 48%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-1' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget2' style='width: 48%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

Si también quieres dos columnas de gadgets debajo de las entradas, entonces agrega debajo del primer código esto:



<div id='BlogGadget3' style='width: 48%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-3' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget4' style='width: 48%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>


El % en color rojo es el ancho de cada uno de los contenedores, si los gadgets no estuvieran igualados, reduce esos valores hasta que los gadgets se vean igualados, conseguiremos tener dos columnas en esa zona del blog.


Puedes poner las columnas arriba, las columnas abajo o arriba y abajo, eso es ya decision de cada uno o bien la necesidad que tengamos en cada blog



Centrar Gadget en el blog facilmente

gadget
Veremos como centrar gadget en el blog, de una manera sencilla y eficaz.
<div align="center">Código que se quiere centrar</div>
<div align="right">Código que se quiere a la derecha</div>
<div align="left">Código que se quiere a la izquierda</div>

Tan solo hay que añadir el código donde se indica para alinearlo a cualquier posición.

Pero si queremos centrar  gadget de blogger,  iremos a vista diseño de nuestro blog, y en 
Plantilla, HTML, Ir al Widget, y se nos abre un desplegable, con el nombre de los gadget, elegimos el que queremos centrar, en este caso elegimos el de etiquetas ya que no se puede modificar su Html.
centrar-gadget-blog
Buscaremos con Ctrol F y pondremos  ]]></b:skin>  y justo encima le pegaremos el siguiente codigo.
#nombrewidget { text-align: center; }



Donde Nombre widget sera nuestro gadget, con estos sencillos pasos, lograremos alinear nuestro gadget

gadget
Veremos como centrar gadget en el blog, de una manera sencilla y eficaz.
<div align="center">Código que se quiere centrar</div>
<div align="right">Código que se quiere a la derecha</div>
<div align="left">Código que se quiere a la izquierda</div>

Tan solo hay que añadir el código donde se indica para alinearlo a cualquier posición.

Pero si queremos centrar  gadget de blogger,  iremos a vista diseño de nuestro blog, y en 
Plantilla, HTML, Ir al Widget, y se nos abre un desplegable, con el nombre de los gadget, elegimos el que queremos centrar, en este caso elegimos el de etiquetas ya que no se puede modificar su Html.
centrar-gadget-blog
Buscaremos con Ctrol F y pondremos  ]]></b:skin>  y justo encima le pegaremos el siguiente codigo.
#nombrewidget { text-align: center; }



Donde Nombre widget sera nuestro gadget, con estos sencillos pasos, lograremos alinear nuestro gadget