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.

Video tutorail Como insertar una multicolumna en Blogger

Como insertar una multicolumna en Blogger from Luis Chávez on Vimeo.

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”

3 Abre “Editar HTML”

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

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.

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”

¿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

TAGS: Widgets para Blogger

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.