Como insertar una multicolumna en Blogger


La utilidad de crear nuevos Widgets en nuestro Blogger es una de las formas en la que le damos más vida a nuestro blog y así tener nuestro Blogger como una página de diseño web profesional. El día de hoy va a aprender con unos simples pasos a insertar un código que hará todo este proceso. Este nuevo widget puede convertirse en tres columnas, cuatro columnas o tantas columnas como desee. Además este nuevo widget de pie de página tiene algunos grandes efectos añadidos a la misma CSS que hace que sea aún mejor. Lo que vamos hacer es insertar un código en el Editor HTML de nuestra plantilla.

Como insertar una multicolumna en Blogger

Video tutorail Como insertar una multicolumna en Blogger


A continuación mire su demostración en el siguiente blog que utiliza estos Widgets multicolumna. Pueden verlo al final del blog.


Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Plantilla

Como insertar una multicolumna en Blogger

3 Abre “Editar HTML

Como insertar una multicolumna en Blogger


Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

Como insertar una multicolumna en Blogger

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

Como insertar una multicolumna en Blogger

4 Busca este código

]]></b:skin>

Una vez que hayas encontrado el código, tendrás que insertar las siguientes líneas de código justo arriba del código que encontraste

#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}

Si quieres cambiar de color a la multicolumna basta con cambiar los números que están marcados de color verde por el número de color que tú quieras.

5 Ahora busca este otro código

</body>

Luego de encontrar el código, inserta el siguiente código arriba del código que encontraste



    <div id='lower'>
    <div id='lower-wrapper'>


    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar1' preferred='yes'>
    </b:section>
    </div>


    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar2' preferred='yes'>
    </b:section>
    </div>


    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar3' preferred='yes'>
    </b:section>
    </div>


    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar4' preferred='yes'>
    </b:section>
    </div>


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


Con el código que acabo de insertar le representara 4 columnas en su blog de Blogger y se verá tal como se muestra en la siguiente imagen en el diseño de su blog. Con esto obtendrá nuevos puestos para ubicar nuevos Widgets. Antes de dirigirte a Diseño tendrás que dar un clic en “Guardar Plantilla

Como insertar una multicolumna en Blogger

¿Cómo personalizar el widget?

Bueno voy a mantener la sencillez. Creo que los colores, el tamaño total y el relleno y márgenes son simplemente perfectos. La única cosa que usted tendrá que ajustar de acuerdo a la plantilla es el ancho del widget y el número de columnas verticales.

1. Con el fin de reducir o aumentar la anchura total del widget simplemente cambie el ancho donde dice: 960px;

2. Si desea reducir el número de widgets a tres entonces simplemente elimine esta parte del código

<div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar4' preferred='yes'>
    </b:section>
    </div>


3. O si usted desea agregar una columna adicional a continuación, agregue su nuevo código justo por encima del código que está marcado de color anaranjado

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


Inserta el siguiente código justo arriba del código que está marcado de color anaranjado

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar5' preferred='yes'>
</b:section>
</div>
  
Recuerde que lowerbar5 se refiere al número de columna.

Después de haber agregado la quinta columna a continuación, tendrá que cambiar el width: 23%; por width: 17%;

Deberá repetir el paso 3 para todas las columnas nuevas que desea crear. Sin embargo, tres, cuatro y cinco columnas son un estándar. El aumento de ellos hará que las cosas se vean feas.

Nota: Si quieres dejarlo tal como está en mi tutorial solo debes seguir las instrucciones hasta el paso 5 y si gustas aumentar o disminuir el número de columnas sigue las demás instrucciones

Fácil verdad!

Recuerda suscribirte y así recibirás mis nuevas actualizaciones directamente en tu bandeja de entrada

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

17 comentarios:

  1. Luis... Y como puedo hacer para colocar solo una columna debajo de mi menu (http://actperuana.blogspot.com/)... asi pueda insertar un slideshow ahi...

    ResponderEliminar
    Respuestas
    1. En el transcurso de la semana publicare ese truco de blogger, mientras tanto suscribete para poder recibir mis nuevas actualizaciones.
      Saludos

      Eliminar
  2. No me aparece el código del paso 4
    Qué puedo hacer?

    ResponderEliminar
    Respuestas
    1. El paso 4 existe en tu plantilla, y enviame la direccion URL de tu blog para especificarte.
      Saludos.

      Eliminar
  3. Hola quiero cambiar mi plantilla por la de blogger dynamic views y fijarla en snapshot hasta ahí no hay problema, lo que me gusta hacer es agregarle una columna a la izq. y añadir gadget, crees que se podrá? espero me respondas, saludos :D

    ResponderEliminar
  4. Hola !!!
    Un blog estupendo, me encanta todo y es de mucha ayuda para los bloggeros. Gracias por tu trabajo y generosidad.
    Tengo una pregunta sobre esta entrada. Como puedo instalar 2 o tres multicolumnas en mi blog pero con diferentes estilos añadidas desde el css. Gracias.

    ResponderEliminar
  5. saludos
    ]]>
    este comando no aparece en mi blog html
    como hago?
    german

    ResponderEliminar
    Respuestas
    1. Hola, con respecto a su pregunta, todas las plantillas de Blogger tienen el código que usted esta indicando, búsquelo con paciencia y vera que lo encuentra

      Saludos

      Eliminar
  6. Hola, me aparecen las secciones de forma vertical,

    ¿que podrá ser?

    ResponderEliminar
  7. Buen post brother, mi duda es como insertar una columna
    Saludos

    ResponderEliminar
    Respuestas
    1. Hola Raciel, gracias por escribir, muy pronto se publicaran varios tutoriales sobre el tema, recuerde suscribirse

      Saludos.

      Eliminar
  8. lo hice tal como esta ahi yy quedaron vertical q hago?

    ResponderEliminar
    Respuestas
    1. Hola, gracias por escribir, sobre su pregunta, cual es la dirección URL de su blog de Blogger, tal vez usted no ingreso correctamente el código, tal como lo muestro en el demo, funciona correctamente.

      Saludos.

      Eliminar
  9. buenas tardes... por algona razon hice el paso a paso ... y no logro ver el cambio para agregar los multicolumnas

    ResponderEliminar
    Respuestas
    1. Hola, gracias por escribir, con respecto a su pregunta, por favor hágame saber la dirección URL de su blog y con gusto le guiare

      Saludos

      Eliminar