Scrollbars en cualquier parte del blog

Las scrollbars son las barras de desplazamiento que habitualmente usamos para hacer scroll (subir y bajar) por una página web, pero que podemos adaptar mediante CSS para usarlas en algunas partes de nuestro blog.

* Scrollbars en todos los widgets del blog *

Cuando añadimos al blog algún elemento (widget) como una lista de links, por ejemplo, que podría hacer demasiado larga la sidebar, un efecto que queda muy bien y al mismo tiempo acorta los contenidos de nuestros widget, son las scrollbars.

Podemos añadirla, a todos los widgets del blog, lo que hará que pongamos lo que pongamos dentro de los elementos, estos siempre tengan la medida que escojamos, o sea, el mismo tamaño para todos los widgets de la plantilla:


Vamos a colocar los scrollbars a todos los widget de nuestro blog y les daremos una altura de 200px. Las barras se pondrán en overflow:auto, lo que quiere decir que se mostrarán automáticamente cuando el contenido del elemento sobrepase los 200px.

Nos situamos en nuestra plantilla -> Edición HTML. Insertamos esta pieza de código en el CSS. Podríamos añadirlo justo debajo de /* Sidebar Content */.

.sidebar .widget{
height:200px;
overflow:auto;
}

* Scrollbars en los widgets de una de las sidebars *

El sitio para colocarlo será donde el anterior, es decir, debajo de /* Sidebar Content */. Localizamos el nombre de nuestras sidebars, normalmente suele ser sidebar una de ellas, la otra será newsidebar, sidebarleft, sidebarrigth...Para el ejemplo vamos a suponer que se llaman "sidebar" y "newsidebar", si queremos colocar las scrollbars en "sidebar" pegaremos esta pieza de código:

#sidebar .widget{
height:200px;
overflow:auto;
}

Si preferimos colocarlas en la otra sidebar "newsidebar" pegaremos esto:

#newsidebar .widget{
height:200px;
overflow:auto;
}

* Scrollbar en un Widget solamente *

Antes de colocar el código para el widget, hemos de localizar 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>

Nos será mucho más fácil localizar el "id" del elemento si antes le hemos puesto título, en este ejemplo le he puesto "MIS AMIGOS" a la lista de links.
Lo que vemos en negrita 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 *
Para poner las scrollbars en el cuerpo de las entradas del blog, hemos de localizar en el HTML de la plantilla, esto: .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>

¡¡¡Nota!!!
Esta entrada está basada en la plantilla Mínima de Blogger, pero puede aplicarse de igual forma en todas las demás.
Cuando hablo de /* Sidebar Content */, por ejemplo, en algunas plantillas no se llama de esta forma, pero no habrá problema en cualquier otra plantilla, si se colocan los códigos CSS, antes de ]]></b:skin>.