| Podemos agregar una sidebar doble, debajo de la que ya tenemos, con el siguiente procedimiento (tomamos como referencia la plantilla Denim):
Sin expandir plantillas de artilugios: 1.- Localizamos el código CSS de la sidebar original:
2.- Para poner en su sitio y de manera simétrica las dos partes de la nueva sidebar pegamos, debajo del código anterior, el siguiente:
3.- Desplazándonos hacia abajo en la plantilla, localizamos el código HTML de la sidebar original:
...y pegamos, antes de la etiqueta
Así se verán los elementos de página con la sidebar doble que hemos agregado debajo de la original:
Ahora ya podemos añadir gadgets en cada una de las partes de la sidebar doble. Agregar otra sidebar sencilla debajo de la sidebar doble Si queremos agregar otra sidebar sencilla debajo de sidebar doble procedemos así: 1.- Localizamos el siguiente código, que hemos agregado para la sidebar doble:
...y debajo del mismo pegamos éste:
2.- Descendemos en la plantilla y localizamos el código HTML de la sidebar doble:
...y antes de la última etiqueta
3.- Guardamos plantilla. Así se verán los elementos de página con las dos sidebar que hemos agregado: la doble y la sencilla, y podremos agregar gadgets en ellas.
Nota En este tutorial se han tomado las medidas originales de la plantilla Denim, por consiguiente si hemos modificado el ancho del blog en donde vamos a agregar las sidebar, debemos ajustar el ancho de las mismas con el que le hemos dado al blog, guardando la simetría.
|
Mostrando entradas con la etiqueta agregar sidebar. Mostrar todas las entradas
Mostrando entradas con la etiqueta agregar sidebar. Mostrar todas las entradas
16.12.10
Agregar una sidebar doble
15.8.10
Agregar sidebar (barra lateral) - Plantilla Awesome
| 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
|
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 |
| |
Suscribirse a:
Entradas
(
Atom
)
