Saludos amigos, el día de hoy les mostrare la forma mas fácil de agregar una columna a nuestro blog de Blogger.
1- Entramos a la página de Blogger.
2- Al entrar buscamos el blog al que vamos agregar la nueva columna.
3- Al entrar a nuestro blog, damos clic en la pestaña “Diseño” y luego en “Edición de HTML”.
4- Recuerda que " NO " hay que expandir los artilugios, ahora pon mucha atencion a lo siguiente:
5- Oprimiendo las teclas ( Ctrl ) y la letra efe ( F ) saldra un pequeño buscador, y escribimos /* Header
6- Luego más abajo, buscamos la sección /* Outer-Wrapper. Cambiamos los siguiesntes valores como estan en la imagen de color rojo: así,
Despues en #main-wrapper, colocamos el siguiente valor:
Luego de haber realizado estos pequeños cambios, bajamos un poco más:
7- Todavia seguimos en la sección de /* Outer-Wrapper.
Como la seccion de Main-Wrapper la acabamos de hacer, procedemos a colocar este codigo como esta abajo, en la seccion que muestra la imagen:
Código.
#newsidebar-wrapper {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long
text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text
content breaking IE sidebar float */
}
Este codigo le dara forma a nuestra nueva columna.
8- Así como esta en la imagen debe haber quedado el codigo colacado.
Ahora procedemos a cambiar los valores de las dos columnas, que son: la #sidebar-wrapper y la nueva columna, #newsidebar-wrapper:
9- Recuerda que todavia estamos en la seccion /* Outer-Wrapper.
Cambiamos el valor de la columna #sidebar-wrapper, debe quedar así:
Luego cambiamos el siguiente valor de la nueva columna #newsidebar-wrapper, debe quedar así.
Si has realizado bien los pasos, te debe quedar algo igual a como esta en la imagen, ahora vamos a agregarle un margen a las columnas:
10- Recuerda que todavia seguimos en la seccion de /* Outer-Wrapper.
Realizado lo anterior, ahora vamos a agregar una margen en las columnas para que no quede tan juntas de la Main-Wrapper, osea donde queda las entradas. Colocamos el siguiente codigo, como lo indicare mas abajo:
Código.
margin-left: 0px;
Este pequeño codigo nos permitira agregarle una pequeña margen a nuestras columnas.
Ahora nos debe quedar así:
Realizado lo anterior nos debe quedar igual que la imagen. Seguimos mas abajo:
11- Realizado lo anterios nos dirijimos a la siguiente sección, /* Footer.
Aquí cambianos el siguiente valor: Así,
Realizado lo anterior, seguimos al ultimo paso.
12- Buscamos la seccion <div id='main-wrapper'>.
Colocamos el siguiente código, en la seccion como lo indica la imagen: así,
Código
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='About Me' type='LinkList'/>
</b:section>
</div>
Este código debe quedar tal y como esta, no hacemos ninguna modificación en él.
13- Si has realizado bien lo anterior, debe quedar algo así:
Y finalmente damos clic en “Guardar Plantilla”
14- Despues de haber guardado los cambiamos, damos clic en “Elementos de la página”.
15- Si hemos realizado bien todo lo anterior tendremos algo así:
Nota: Recuerde lo siguiente…
Puede colocar el valor que desen para las columnas, pero es muy importante esto:
- Tanto Header como Footer deben tener el mismo valor, esto es para que nuestro blog no quede muy deforme. En este caso Header y Footer tienen valor por 950px.
- Si sumamos el valor de las dos columnas mas el valor de las dos margenes y el valor donde quedan las entradas de nuestro blog, su suma dara un total de 950px. Es aconsejable que todo tenga el mismo valor de 950px, el valor de las columnas, las margenes y donde quedan las entradas puede variar a su comodidad no necesariamente tiene que ser el mismo valor, pero su suma debe ser igual a Header y Footer.
- Aconsejo utilizar una maxima medida de 950px, si el valor es mas grande no se vera bien a la hora de abrir un nuestro blog.
16- Finalmente asi queda nuestro blog con nuestra nueva columna.
1- Entramos a la página de Blogger.
2- Al entrar buscamos el blog al que vamos agregar la nueva columna.
3- Al entrar a nuestro blog, damos clic en la pestaña “Diseño” y luego en “Edición de HTML”.
4- Recuerda que " NO " hay que expandir los artilugios, ahora pon mucha atencion a lo siguiente:
5- Oprimiendo las teclas ( Ctrl ) y la letra efe ( F ) saldra un pequeño buscador, y escribimos /* Header
6- Luego más abajo, buscamos la sección /* Outer-Wrapper. Cambiamos los siguiesntes valores como estan en la imagen de color rojo: así,
Despues en #main-wrapper, colocamos el siguiente valor:
Luego de haber realizado estos pequeños cambios, bajamos un poco más:
7- Todavia seguimos en la sección de /* Outer-Wrapper.
Como la seccion de Main-Wrapper la acabamos de hacer, procedemos a colocar este codigo como esta abajo, en la seccion que muestra la imagen:
Código.
#newsidebar-wrapper {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long
text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text
content breaking IE sidebar float */
}
Este codigo le dara forma a nuestra nueva columna.
8- Así como esta en la imagen debe haber quedado el codigo colacado.
Ahora procedemos a cambiar los valores de las dos columnas, que son: la #sidebar-wrapper y la nueva columna, #newsidebar-wrapper:
9- Recuerda que todavia estamos en la seccion /* Outer-Wrapper.
Cambiamos el valor de la columna #sidebar-wrapper, debe quedar así:
Luego cambiamos el siguiente valor de la nueva columna #newsidebar-wrapper, debe quedar así.
Si has realizado bien los pasos, te debe quedar algo igual a como esta en la imagen, ahora vamos a agregarle un margen a las columnas:
10- Recuerda que todavia seguimos en la seccion de /* Outer-Wrapper.
Realizado lo anterior, ahora vamos a agregar una margen en las columnas para que no quede tan juntas de la Main-Wrapper, osea donde queda las entradas. Colocamos el siguiente codigo, como lo indicare mas abajo:
Código.
margin-left: 0px;
Este pequeño codigo nos permitira agregarle una pequeña margen a nuestras columnas.
Ahora nos debe quedar así:
Realizado lo anterior nos debe quedar igual que la imagen. Seguimos mas abajo:
11- Realizado lo anterios nos dirijimos a la siguiente sección, /* Footer.
Aquí cambianos el siguiente valor: Así,
Realizado lo anterior, seguimos al ultimo paso.
12- Buscamos la seccion <div id='main-wrapper'>.
Colocamos el siguiente código, en la seccion como lo indica la imagen: así,
Código
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='About Me' type='LinkList'/>
</b:section>
</div>
Este código debe quedar tal y como esta, no hacemos ninguna modificación en él.
13- Si has realizado bien lo anterior, debe quedar algo así:
Y finalmente damos clic en “Guardar Plantilla”
14- Despues de haber guardado los cambiamos, damos clic en “Elementos de la página”.
15- Si hemos realizado bien todo lo anterior tendremos algo así:
Nota: Recuerde lo siguiente…
Puede colocar el valor que desen para las columnas, pero es muy importante esto:
- Tanto Header como Footer deben tener el mismo valor, esto es para que nuestro blog no quede muy deforme. En este caso Header y Footer tienen valor por 950px.
- Si sumamos el valor de las dos columnas mas el valor de las dos margenes y el valor donde quedan las entradas de nuestro blog, su suma dara un total de 950px. Es aconsejable que todo tenga el mismo valor de 950px, el valor de las columnas, las margenes y donde quedan las entradas puede variar a su comodidad no necesariamente tiene que ser el mismo valor, pero su suma debe ser igual a Header y Footer.
- Aconsejo utilizar una maxima medida de 950px, si el valor es mas grande no se vera bien a la hora de abrir un nuestro blog.
16- Finalmente asi queda nuestro blog con nuestra nueva columna.
No hay comentarios:
Publicar un comentario