Scrolls o barras de desplazamiento

Las scrollbars se usan para subir y bajar por una página web. También podemos usarlas en algunas partes de nuestro blog.

Scrollbars en todos los widgets del blog
Añadimos justo debajo de /* Sidebar Content :

.sidebar .widget{
height:200px;
overflow:auto;
}
Scrollbars en los widgets de una de las sidebars
También lo colocaremos debajo de /* Sidebar Content . Localizamos el nombre de nuestras sidebares, normalmente suele ser sidebar una de ellas, la otra será newsidebar, sidebarleft, sidebarrigth...Vamos a suponer que se llaman "sidebar1" y "sidebar2", si queremos colocar las scrollbars en "sidebar1" pegaremos esta pieza de código:
#sidebar1 .widget{
height:200px;
overflow:auto;
}
Si preferimos colocarlas en la otra sidebar "sidebar2" pegaremos esto:
#sidebar2 .widget{
height:200px;
overflow:auto;
}
Scrollbar en un Widget solamente.
Localizamos en la plantilla el "id" o nombre del elemento al que queremos añadir las scrollbars.
En nuestra plantilla ->Edición HTML sin expandir los elementos veremos algo como esto:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='MIS AMIGOS' type='LinkList'/>
<b:widget id='Archivelist' locked='false' title='' type='ArchiveL'/>
<b:widget id='Label1' locked='false' title='Label' type='Label'/>
</b:section>
</div>
Lo que está en azul es la "id" de cada widget, imaginemos que vamos a ponerle scrollbars a una de nuestras listas de links "LinkList1". Buscaremos /* Sidebar Content y justo debajo pegaremos esta pieza de código (cuando el widget escogido es una lista, hemos de añadir el "ul" :
#LinkList1 ul{
height:200px;
overflow:auto;
}
Scrollbars en el cuerpo de las entradas
Localizamos en el HTML de la plantilla: .post { y justo debajo colocar el código para mostrar las barras:
.post {
height:200px;
overflow:auto;
}
Scrollbars para una parte del post (ScrollBox o Caja de Texto)
Insertamos esta pieza de código en el CSS de la plantilla, en la que especificaremos el alto (height) y el ancho (width) de la caja de scroll:
.scrollbox {
height:100px;
width:300px;
overflow:auto;
}
En el editor de entradas escribimos el post normalmente y donde queremos incluir la parte con scrollbars, colocamos esto:
<div class="scrollbox">TEXTO O IMAGEN/ES QUE VAMOS A INCLUIR EN LA CAJA DE SCROLL</div>

2 comentarios:

Eugenio Sánchez Bravo

Muchas gracias. Un post bastante útil.

jesgo

Eugenio, te agradezco el comentario.

» Escribe tu comentario aquí:


Si quieres hacer alguna consulta sobre tu blog habilita tu perfil o deja un enlace a tu blog:
<a href="url-de-la-página">Texto enlace</a>

» O utiliza el antiguo formulario


Los comentarios están siendo moderados y publicados lo antes posible.



jesgo23 ©2008/2009 | Plantilla Blogger | Diseño jesgo Creative Commons License