| La plantilla Awesome (Fantástico, S.A.) es de las nuevas de Blogger. Tiene una barra lateral (sidebar) derecha. Agregaremos una izquierda. Vamos a Edición de HTML:
Sin expandir plantillas de artilugios localizamos los siguientes códigos y hacemos las modificaciones indicadas con el resaltado en rojo:
..y veremos que ya tenemos habilitado el control para la barra lateral izquierda. Éste es el blog original:
Y éste es el blog con la barra lateral que agregamos, en la cual está el perfil más un gadget añadido:
Podemos añadir en las dos barras más gadgets en Añadir y organizar elementos de página. http://bloguermast.blogspot.com/2010/08/ensanchar-blog-harbor.html
|
Mostrando entradas con la etiqueta agregar barra lateral. Mostrar todas las entradas
Mostrando entradas con la etiqueta agregar barra lateral. Mostrar todas las entradas
15.8.10
Agregar sidebar (barra lateral) - Plantilla Awesome
14.8.10
Agregar sidebar - Plantilla Travel
La plantilla que vamos a modificar es la Travel, que podemos identificar en el encabezamiento, así:
Vamos a Edición de HTML:
Sin expandir plantilla de artilugios localizamos los siguientes códigos, y les hacemos las modificaciones indicadas con el resaltado en rojo:
..y veremos que ya tenemos habilitado el control para la barra lateral izquierda El blog original:
El blog con dos barras laterales:
|
| Twittear |
6.8.10
Agregar una sidebar - plantilla Picture Window
| La plantilla Picture Window es de las nuevas de Blogger. Tiene una barra lateral (sidebar) derecha. Agregaremos una izquierda. Vamos a Edición de HTML:
Sin expandir plantilla de artilugios localizamos los siguientes códigos y hacemos las modificaciones indicadas con el resaltado en rojo:
..y veremos que ya tenemos habilitado el control para la barra lateral izquierda Así Teníamos en Diseño la página para añadir y organizar elementos:
Ahora la tendremos así:
Y el blog se verá así, con el perfil en la barra lateral (sidebar) que agregamos:
|
4.8.10
Agregar sidebar - Plantilla simple
| La plantilla Simple es de las nuevas de Blogger. Tiene una barra lateral (sidebar) derecha. Agregaremos una izquierda. Vamos a Editar HTML:
Localizamos los siguientes códigos y hacemos las modificaciones indicadas con el resaltado en rojo:
..y veremos que ya tenemos habilitado el control para la barra lateral izquierda Así Teníamos en Diseño la página para añadir y organizar elementos:
Ahora la tendremos así:
Y el blog se verá así, con el perfil en la barra lateral (sidebar) que agregamos:
|
25.7.10
Agregar una sidebar - Plantillas Rounders
La plantilla que vamos a modificar es la Rounders, que podemos identificar en el encabezamiento del código, así:
Los blogs con plantilla Rounders tienen una sidebar derecha. Vamos a agregar una sidebar izquierda: Vamos a Edición de HTML:
Sin expandir plantilla de artilugios:
|
| Twittear |
16.7.10
Agregar una sidebar - Plantillas Denim
La plantilla que vamos a modificar es la Denim, que podemos identificar en el encabezamiento del código, así:
Los blogs con plantilla Denim tienen una sidebar derecha. Vamos a agregar una sidebar izquierda: Vamos a Edición de HTML:
Sin expandir plantilla de artilugios:
|
| Twittear |
15.7.10
Agregar una sidebar - Plantilla Minima
La plantilla que vamos a modificar es la Minima, que podemos identificar en el encabezamiento del código, así:
Los blogs con plantilla Minima tienen una sidebar derecha. Vamos a agregar una sidebar izquierda: Vamos a Edición de HTML
Sin expandir plantilla de artilugios:
|
| | Twittear |
9.3.10
Agregar una sidebar - Plantilla herbert
La plantilla que vamos a modificar es la Herbert, que podemos identificar en el encabezamiento del código, así:
Los blogs con plantilla Herbert tienen una sidebar derecha. Vamos a agregar una sidebar izquierda: Vamos a Edicitar HTML :
|
- Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (Search), una línea del mismo:
@media all {
div#main-wrapper {
float: $startSide;
width: 66%;
padding-top: 0;
padding-$endSide: 1em;
padding-bottom: 0px;
padding-$startSide: 1em;
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 cambiamos el Width (ancho), de 66% a 48%
- Más abajo en:
div#sidebar {
width: 30%;
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 */
}
cambiamos el Width de 30% a 24%.
- Debajo del anterior segmento de código, justo debajo de la primera llave de cierre ( } ) pegamos éste:
div#newsidebar-wrapper {
margin: 10px;
padding: 10px;
text-align: $startSide;
}
div#newsidebar {
width: 24%;
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 */
}
- Más abajo buscamos este segmento:
div#sidebar-wrapper {
padding-top: 20px;
padding-$endSide: 1em;
padding-bottom: 0;
padding-$startSide: 1em;
text-align: $startSide;
}
}
y, debajo de la primera llave de cerramiento ( } ), pegamos esto:
div#newsidebar-wrapper {
padding-top: 20px;
padding-$endSide: 1em;
padding-bottom: 0;
padding-$startSide: 1em;
text-align: $startSide;
}
- Siguiendo más hacia abajo localizamos este segmento de código:
#sidebar h2 {
margin: 0px;
color: $sidebarTitleColor;
font: $sidebarTitleFont;
padding: 0px;
border: none;
}
debajo del cual pegamos esto:
#newsidebar h2 {
margin: 0px;
color: $sidebarTitleColor;
font: $sidebarTitleFont;
background: $descriptionBgColor;
padding: 0px;
border: none;
}
La línea backgrounod la hemos añadido para ponerle color al fondo de los títulos de los elementos. Si queremos el mismo efecto en la otra sidebar la añadimos en el código de arriba.
- Debajo encontramos estos tres segmentos:
#sidebar .widget {
margin-top: 0px;
margin-$endSide: 0px;
margin-bottom: 33px;
margin-$startSide: 0px;
padding: 0;
}
#sidebar ul {
list-style-type: none;
font-size: 95%;
margin-top: 0;
}
#sidebar li {
margin: 0px;
padding: 0px;
list-style-type: none;
font-size: 105%;
}
Los copiamos y los pegamos enseguida cambiando sidebar por newsidebar.
Si queremos enmarcar los elementos individualmente, en #sidebar .widget y en #newsidebar .widget añadimos esta línea:
border: solid 1px $borderColor;
pudiendo cambiar el grosor, y el estilo de la línea.
- Por último bajamos a la zona de HTML, copiamos el código de la sidebar, que es éste:
<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='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='Profile1' locked='false' title='Perfil' type='Profile'/>
</b:section>
</div>
y lo pegamos encima de esta línea:
<div id='main-wrapper'>
Una vez pegado le hacemos las siguientes modificaciones:
- Borramos todos los b:widget (los que están resaltados); el del prefil (Profile) lo dejamos para que la sidebar no nos quede en blanco y podamos distinguirla.
- cambiamos los dos
id='sidebar'porid='newsidebar'.
- Borramos todos los b:widget (los que están resaltados); el del prefil (Profile) lo dejamos para que la sidebar no nos quede en blanco y podamos distinguirla.
- Para que el b:widget del perfil no nos quede repetido, lo que nos produciría un error, debemos borrarlo del código de la primera Sidebar, o sea que de ese código borramos esta línea:
<b:widget id='Profile1' locked='false' title='Perfil' type='Profile'/>
- Finalmente: Vista previa y Guardar plantilla.
| Yendo a Página principal ► Diseño ► Diseño podemos añadir y organizar elementos en cada Sidebar |
| Twittear |
| |
26.1.10
Ocultar o eliminar barra lateral (Sidebar) de blogger
| Ocultar barra lateral (Sidebar) en plantillas antiguas Para ocultar la barra lateral (Sidebar) de nuestro blog de blogger: Vamos a Editar HTML:
2.- Localizamos, poniendo una línea del mismo dentro del rectángulo de búsqueda (Search), el siguiente código: #sidebar-wrap { 3.- Agregamos las líneas resaltadas: #sidebar-wrap { visibility: hidden;display: none; 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 */ } 4.- Guardamos los cambios. Eliminar barra lateral (Sidebar) en plantillas antiguas Si lo que queremos es eliminar la barra lateral (Sidebar): 1.- Eliminamos el código indicado en el punto 2, del párrafo anterior. 2.- Localizamos y eliminamos el siguiente código: Eliminando la sidebar obviamente quedará vacío el espacio que ocupaba. Para llenarlo tendremos que aumentar el ancho del cuerpo de las entradas. Para eso localizamos el siguiente código: ...y en width: 630px aumentamos el número de pixeles hasta lograr el ancho del blog.3.- Guardamos la plantilla. Eliminar sidebar en plantillas nuevas Para eliminar la sidebar en plantillas nuevas: 1.- Eliminamos los gadgets que tengamos en la sidebar. 2.- Vamos a Editar HTML:
3.- Localizamos el siguiente código, poniendo dentro del rectángulo de búsqueda (Search) una línea del mismo: 4.- en la última línea cambiamos 310px por 0px5.- Guardamos plantilla. Tema relacionado:Ocultar, mostrar sidebar
|
Suscribirse a:
Entradas
(
Atom
)
