La plantilla que vamos a modificar es la Rounders, que podemos identificar en el encabezamiento del código, así: -----------------------------------------------
Blogger Template Style
Name: Rounders
Date: 27 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */ |
Los blogs con plantilla Rounders 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:740px;
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
} |
- Modificamos la línea resaltada cambiando
...por: De esta manera aumentamos el ancho del blog en 245px, que es el ancho de la sidebar que vamos a agregar (240px), para que nos quede igual a la que ya tenemos, mas 5px para sumarlos a los 15px del espacio entre la primera sidebar y el cuerpo del blog y repartir esos 20px entre los espacios que dejaremos entre cada sidebar y el cuerpo de las entradas. Para lograr lo anterior vamos al siguiente código, que se encuentra inmediatamente después del anterior: #main-wrap1 {
width:485px;
float:$startSide;
background:$mainBgColor url("http://www1.blogblog.com/rounders/corners_main_bot.gif") no-repeat $startSide bottom;
margin:15px 0 0;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
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 modificamos la parte resaltada, así: ...por:
- Más hacia abajo localizamos este código:
#sidebar-wrap {
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 inmediatamente después del mismo, modificando las líneas resaltadas, en el que pegamos, así: ...por: ...y ...por:
- En los dos anteriores códigos, el que teníamos y el que pegamos, modificamos la otra línea resaltada, así:
...por:
- Siguiendo hacia abajo en la plantilla localizamos este código:
<div id='main-wrap1'><div id='main-wrap2'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div></div> |
...encima del cual pegamos éste: <div id='newsidebar-wrap'><b:section class='sidebar' id='newsidebar' preferred='yes'><b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/></b:section></div> |
- A continuación localizamos el código de la sidebar que ya teníamos:
<div id='sidebar-wrap'>
<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='sidebartop'>
<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:section>
</div></div> |
...y borramos la parte resaltada, correspondiente al perfil, que hemos puesto en la sidebar nueva, para que no nos dé error por repetición.
- Debido a que los blogs diseñados con esta plantilla tienen todas las esquinas redondeadas y éstas no se desplazan al ensanchar, la cabecera (header) y el pie (footer) del blog nos quedarán partidos; Además la sidebar izquierda nos quedará con esquinas cuadradas y la derecha con esquinas redondeadas. Para evitar que esto ocurra y lograr uniformidad en el blog, eliminamos las imágenes que redondean estas esquinas, borrando todas las URLs en las que aparezca la palabra corners, y que son éstas:
url("http://www1.blogblog.com/rounders/corners_main_bot.gif") |
url("http://www1.blogblog.com/rounders/corners_main_top.gif") |
url("http://www2.blogblog.com/rounders/corners_cap_top.gif") |
url("http://www.blogblog.com/rounders/corners_cap_bot.gif") |
url("http://www.blogblog.com/rounders/corners_prof_bot.gif") |
url("http://www2.blogblog.com/rounders/corners_prof_top.gif") |
url("http://www.blogblog.com/rounders/corners_side_top.gif") |
url("http://www1.blogblog.com/rounders/corners_side_bot.gif") |
url("http://www2.blogblog.com/rounders/corners_cap_top.gif") |
url("http://www.blogblog.com/rounders/corners_cap_bot.gif") |
- Eliminamos esta URL, que corresponde a la imagen del marco que une las esquinas redondeadas del cuerpo de las entradas (la parte resaltada):
#main {
background:url("http://www.blogblog.com/rounders/rails_main.gif") repeat-y $startSide;
padding:0;
width:485px; |
- Le ponemos a la nueva sidebar el mismo color de la que ya teníamos. Para ello regresamos al código de dicha sidebar, que ya creamos, y le agregamos la línea resaltada:
#newsidebar-wrap {
background:#ccddcc;
width:240px;
float:$startSide;
margin:10px 0 0;
font-size:97%;
line-height:1.5em;
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 */
} |
- Vista previa y guardar.
Así se verá el blog con el perfil y un widget en la sidebar agregada (izquierda): |
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.