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.
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;
}
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;
}
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;
}
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;
}
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>.
0 comentarios:
Publicar un comentario