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.

2 comments:

By MelCole of PA said...

Hi there, thank you for this post. It really helped me in squeezing my blog roll of links from friends. By the way, do you have any post about how to enclose a marquee style in a frame. I have a problem in my blog that the badges of my friends is overflowing before it starts to be a marquee. My blog is at http://melcoleofpausa.blogspot.com

sunl said...

Over Flow occurs When provide size is smaller than the size of content. To retain content in box, just calculate the total size of content and provide more size value in code.

For Example: if your content height=80 and width=70 then you have to put values in code height=90 width=80 to stop overflow

Post a Comment

You are welcome to ask any questions and submit suggestions related to post

 

Home | Make Money By Links