How To Ad Scroll-Bars to Blogger Post

Internet is a gutter of information and one can google anything over any topic for help. While surfing through the internet you notice some sites quite attractive and informative. You intend that you should keep a record of all these sites and want to form a list of all these sites under different categories. This list sometimes gets too long and sometimes bore looking for other visitors to your page. Here a need of a scroll-bar arises to fix all such data in a small place. Here in this tutorial i have managed to form a step form guide to help newbies ad a scrolbar to their sidebars or blog posts for long link lists or adding html codes.

Step 1: Login to your blogger account and go to your respective blog dashboard. 

Step 2: Click 'ad a gadget' to the side- left,right or footer bars where you want ad your text scrollbar to appear. In case you want it to appear in between post than while editing post switch to 'html' mode.

Step 3 : Ad the following code to your decided place and click publish. 

The text in blue marks that you can change scrollbar width and height whatever you like.

The text in purple marks that you can put your desired url here.

The text in orange marks that you can ad text here which ever you like.

<div class="widget-content"> <ul style="height:125px;width:125px; overflow:auto; "> <li><a href="http://www.blogaddress.com">Your Text</a></li> <li><a href="http://www.blogaddress.com">Your Text</a></li> <span style="font-weight:bold;"></span> </ul></div>

Scrollbar is added to a portion of your post. Now, here if anyone wants to write a post just like this post a problem will arise that how to write the above code in a scrollbar. To solve this problem follow two more steps. First write the whole code in the post while 'compose' tab selected. Second, switch to 'html' mode and just before and after the code ad these lines:  

Before:<div class="widget-content"><ul style="height:125px;width:125px; overflow:auto; ">

After:<span style="font-weight:bold;"></span> </ul></div>