How To Make A Scrollbar In Your Blogger Widgets I : In Second

There are several ways to customize the look of widgets that are too long in our blog pages. Two of them have been discussed in How To Make A Dropdown List I and II.



If in How To Make A Dropdown List I and II. we abbreviate the display of labels and other widgets with a dropdown list, then in this article we will discuss how to adjust our widget display in the form of scrollbar.

According to Wikipedia, a scrollbar (Also known as a handle in the very first GUIs) is a graphical object in a graphical user interface (GUI) with which continuous text, pictures or anything else can be scrolled  including time in video applications, i.e., viewed even if it does not fit into the space in a computer display, window, or viewport.



With scrollbarr method, we can set how long the display of our widgets, so that the view from our blog pages will become more neatly arranged.



Actually, it's very easy to make a scrollbar in our widget.  Log in to your Blogger Blog, Go to your Dashboard >> Layout >> Edit HTML and find /* Sidebar Content */ (in some case, may be you'll found like mine, with ----- ), we only need to add this simple script code. just below /* Sidebar Content */

/* Sidebar Content
----------------------------------------------- */

.sidebar .widget{

height:250px;

overflow:auto;

}

This is my blog page views before :

And this is after :

We can set the height of the scrollbar to fit our blog page by change the value 250 (px), Please try  to change into 200px or 300px, you'll know the differences and will be found your match lenght...



When there is a sentence in the widget contents that exceed the sidebar limit, like in my NEW BLOGGER TIPS LABELS, then there will be a horisontal scrollbar automatically show up.



If you want to (I personally do not need it because there is already wide settings sidebar), you can also add Horisontal Scrollbar deliberately to set the width of the widget, by copy this script code width: 200px; (change the number 200 as you want) and paste right under height:250px;, so it will look like,

/* Sidebar Content

----------------------------------------------- */

.sidebar .widget{

height:250px;

width:200px;

overflow:auto;

}

ATTENTION : This trick will set all of our widget in sidebar being a scrollbar mode, So please make sure if you have installed widgets from third parties (like Google Adsense), this scrollbar tricks does not violate their Term Of Service or their rules. I am not responsible if you get in trouble because of this trick...!!!



To overcome those problems, we can make a scrollbar in our blogger widget separately one by one... We will discuss it soon in my next post.. How To Make A Scrollbar In Your Blogger Widgets II and III.