Add Scrollbar in Sidebar Widgets

How to add Scrollbar in Blog Widgets ?

                                                    Fig - 1

Some time your sidebar Link List or other links Widget become Very large and you want to hide it without removing links. Here is trick by which you can do this. In this trick all your links will be in scrollbar and your widget will look Very short in size. For add this scrollbar in your widget you need to modify your Template. It is not very difficult, you have to add code in your template for this follow instructions below:

1. Login You blogger Account.
2. Click Layout and then click EditHTML.
3. Scroll down to see Widget IDs Look Like In Fig - 2.

 
                                                     Fig - 2



4. Marked With Red Colour is Widget IDs of Particular Widget. It can be any
thing like

<b:widget id='LinkList1' locked='false' title='General' type='LinkList'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Label1' locked='false' title='Label' type='Label'/>

 Red coloured in this code example : LinkList1, HTML1,Label1, etc. It is because if you choose Label and LinkList is perticular Name while HTML is Blank you not named that widget and HTML is default name.

5. Now about code. Code which you have to Put in Template is given in Blue
    Box Below. Put this code along with sidebar content already have in your
    template. It can be something like that given in Fig - 3

                                                  Fig - 3

/* Sidebar Content */
#Label1{
height:200px;
overflow:auto;
}

6. You can change the heigh of the coloum by changing Value 200px.
7. Save your template. You done.


Note:- This code is only to change one wideget of sidebar. If you want to change all widget in all sidebar, you have to place code given in blue box below instead of given above.

/* Sidebar Content */
#sidebar .widget{
height:200px;
overflow:auto;
}

If you have added another side bar in blogger default template like rounder etc then you have to put additional code to along with above. This code is given below

* Sidebar Content */
#newsidebar .widget{
height:200px;
overflow:auto;
}

Here is trick to leave one widget without scrollbar. For this you have to increase hight of coloum sufficient so that it increases more than hight of real content in that coloum.

Having any trouble leave comment and i will try to solve it.

Share: