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.
Un clic en “Plantilla”
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;
}
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.
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>
<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”
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.
Con el fin de reducir o aumentar la anchura total del widget simplemente cambie el ancho donde dice: 960px;
Si desea reducir el número de widgets a tres entonces simplemente elimina esta parte del código
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>
si deseas agregar una columna adicional a continuación, agrega este 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>
<b:section class='lowerbar' id='lowerbar5' preferred='yes'>
</b:section>
</div>
Recuerda 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ás 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
Fuente; ayudadeblogger
Publicado por;
0 comentarios