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
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
17 comentarios: