La plantilla que vamos a modificar es la Denim, que podemos identificar en el encabezamiento del código, así: -----------------------------------------------
Blogger Template Style
Name: Denim
Designer: Darren Delaye
URL: www.DarrenDelaye.com
Date: 11 Jul 2006
----------------------------------------------- |
Los blogs con plantilla Denim tienen una sidebar derecha. Vamos a agregar una sidebar izquierda: Vamos a Edición de HTML:
| Página principal ► Diseño ► Plantilla ► Edición de HTML |
Sin expandir plantilla de artilugios: - Aumentamos el ancho del blog, para lo cual localizamos el siguiente código:
#content-wrapper {
width: 760px;
margin: 0 auto;
padding: 0 0 15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0; |
- Modificamos la línea resaltada cambiando:
...por: De esta manera aumentamos el ancho del blog en 240px, que es el ancho de la sidebar existente, el mismo que le daremos a la sidebar que vamos a agregar.
- En el código que está a continuación:
#main-wrapper {
margin-$startSide: 14px;
width: 464px;
float: $startSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 |
...podemos observar que el ancho del cuerpo de las entradas es de 464px.
- Inmediatamente después encontramos este código:
#sidebar-wrapper {
margin-$endSide: 14px;
width: 240px;
float: $endSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
} |
...lo copiamos y lo pegamos enseguida del mismo, modificando (en el que hemos pegado) las líneas resaltadas, así: ...por y ...por: De esta manera creamos la nueva sidebar. Nótese que la suma de los anchos de las dos sidebar's (240px c/u), más el ancho del cuerpo de las entradas (464px), suman 944px, que no excede el ancho de 1000px que le hemos dado al blog. Podemos modificar los anchos de las sidebar's y del cuerpo de las entradas (columna central) a nuestro gusto y según nuestras conveniencias, siempre y cuando que la suma de los mismos no exceda al ancho del blog.
- En la parte inferior de la plantilla localizamos este código:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div> |
...encima del cual pegamos éste: <div id='newsidebar-wrapper'><b:section class='sidebar' id='newsidebar' preferred='yes'><b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/></b:section></div> |
Así crearemos el Widget con el prefil, ubicado en la nueva sidebar.
- Bajando en la plantilla localizamos el código de la sidebar que ya teníamos:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>
</div> |
...y borramos la parte resaltada, para que no nos dé error por repetición.
-
Subiendo en la plantilla localizamos este código: #header {
width: 760px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
} |
...y cambiamos la línea resaltada, así: por: ...para darle a la cabecera el mismo ancho que le dimos al blog.
- Hacemos vista previa y, si todo lo hemos hecho correctamente, veremos la sidebar izquierda y en ella, el perfil. Ahora podremos agregar gadgets en esta sidebar.
Así se verá el blog con un widget agregado en la sidebar nueva: |
4 comentarios :
Hola tengo la plantilla denim con una sidebar doble debajo de la sidebar normal, me gustaría poner otra sidebar normal bajo la doble se puede http://soldadodelreydereyes.blogspot.com/
César: Disculpa la demora en responderte. Escribí un tutorial con todo el proceso, desde crear una plantilla doble hasta crear otra sencilla debajo. Aquí está:
http://bloguermast.blogspot.com/2010/12/agregar-una-sidebar-doble.html
Saludos.
GRACIAS POR TU PAGINA
Saludos Jorge Iván, bienvenido!
Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.
El autor.