Agregar una sidebar - Plantilla Minima

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: width: 660px ...por: width: 950px 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: width: 410px; ...por: width: 440px; 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í: #sidebar-wrapper ...por: #newsidebar-wrapper Y float: $endSide; ...por: float: $startSide; 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: width:660px; ...por: width:950px; 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:

Twittear

Índice: Agregar una sidebar
Para plantillas Herbert
Para plantillas Minima
Para plantillas Denim
Para plantillas Rounders
Para plantilla Simple
Para plantilla Picture Window
Para plantilla Travel
Para plantilla Awesome
Agregar sidebar doble

◄Anterior | Siguiente►

Ensanchar blog de Blogger

Índice: Ensanchar blog
Para plantillas Rounders
Para plantillas Denim
Para plantillas Mínima
Para plantillas nuevas
Para plantilla Scribe
Para plantilla Harbor
Para plantilla Dots
Para plantilla thisaway

Ensanchar blog, para plantillas Mínima Vamos a Editar HTML... Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ► ...y localizamos la instrucción #outer-wrapper { que es el ancho del blog. En la línea width:660px; cambiamos el número de pixeles (660) por 850, que es un ancho recomendable. Más abajo localizamos la instrucción #main-wrapper { que es el ancho de las entradas. En la línea width:410px; cambiamos el número de pixeles (410) por 580, o por el ancho que cada bloggero quiera darle a las entradas de su blog. Continuando más hacia abajo ubicamos la instrucción #sidebar-wrapper {, que es el ancho de la barra lateral. en la línea width: 220px; cambiamos el número de pixeles (220) por 240, o por el ancho que cada bloggero quiera darle a la barra lateral de su blog. El ancho del cuerpo de las entradas ( #Main-wrapper { ) más el ancho de la barra lateral ( #Sidebar-wrapper { ) no deben sobrepasar el ancho que le hemos dado al blog, que en este caso es de 850 pixeles. Debebemos procurar, por el contrario, que la suma de estos dos anchos sea un poco menor (30px) que el ancho del blog. Más arriba en nuestra plantilla localizamos la instrucción #header-wrapper {, que es el ancho de la cabecera del blog y, en la línea width:660px;, cambiamos el número de pixeles (660) por 850, que es el ancho que le hemos dado a nuestro blog. Hacia abajo en la plantilla localizamos #footer {, que es la barra inferior o pie del blog, y en la línea width:660px; cambiamos el número de pixeles (660) por 850. Por último con la vista previa confirmamos que todo está correcto y guardamos los cambios. Twittear

Índice: Ensanchar blog
Para plantillas Rounders
Para plantillas Denim
Para plantillas Mínima
Para plantillas nuevas
Para plantilla Scribe
Para plantilla Harbor
Para plantilla Dots
Para plantilla thisaway

◄Anterior | Siguiente►