La plantilla que vamos a modificar es la Minima, que podemos identificar en el encabezamiento del código, así: -----------------------------------------------
Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */ |
Los blogs con plantilla Minima 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:
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
} |
- Modificamos la línea resaltada cambiando:
...por:
- Aumentamos el ancho de las entradas localizando el siguiente código:
#main-wrapper {
width: 410px;
float: $startSide;
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 */
} |
- Modificamos la línea resaltada, cambiando:
...por:
- Localizamos y copiamos este segmento de código:
#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
} |
...y lo pegamos a continuación del mismo, modificando las líneas resaltadas, así: ...por: Y ...por: Con esto creamos la nueva sidebar. Debemos tener en cuenta que la suma de los anchos de las dos sidebar's, más el del cuerpo de las entradas, no deben exceder al ancho del blog.
- Bajando en la plantilla buscamos 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> |
- Vamos al 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.
- Le damos a la cebecera el mismo ancho que le dimos al blog, para lo cual localizamos este código:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
} |
...y modificamos la parte resaltada cambiando: ...por:
- 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 cada sidebar: |
0 comentarios :
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.