Wednesday, 27 April 2011

How to add beautiful stylish Scrollbar Widget to blogger

Summary: This useful article teaches you that how you add Scrollbar to  free blog blogger template side this is very useful to add links of labels etc and you can save space in blogger sidebar  


By this useful article you  teach that how you add scrollbar in blogger blog. I think this is very good practice to add scrollbar widget to free blog blogger. Scrollbar is very useful that any links, labels of blogger posts  you want to show in  blogger blog. Some time labels and links are consisting of too many lists and looking ugly on the Sidebar of blogger blog, so do not worry this is good solution to save your blogger sidebar unnecessary links and labels and it  very simple to add Scroll bar widget in free blog blogger. 
  
Now add crollbar to widgets  and decrease height and  width of your blogger sidebar,   when a visitors comes to your blogger blog it is very easy to scroll down your links and labels and also scrollbar gives the facility to visitors and reader to adjust your post titles too small and setup  of  width/height limit, there will be a horizontal/vertical scrollbar enabling users to view all the content. This is very useful tutorial in point of view to display that  boxes with scrollbars and when the contents in the widget exceeds and enable users to read the contents that overflow or exceed the box area. This scrolling element is especially useful for targeted links which may be very lengthy. Any time as you like you can short your links and labels . Now I will discuss about scrollbar step by step see the instructions has given below:


1. Login to www.blogger.com and then go to  Dashboard and then  Design and Page  Elements.

 2. After that  click on “Add a Gadget” on the sidebar.

 3. Now select "HTML/Javascript" and add the following code with carefully.

<div style="overflow:auto;width:180px;height:300px;padding:10px;">
<ul>

<li><a href="URL Link"&gt;Title of text</a></li>
<li><a href="URL Link"&gt;Title of text</a></li>
<li><a href="URL Link"&gt;Title of text</a></li>
<li><a href="URL Link"&gt;Title of text</a></li>
<li><a href="URL Link"&gt;Title of text</a></li>
<li><a href="URL Link"&gt;Title of text</a></li>
<li><a href="URL Link"&gt;Title of text</a></li>
<li><a href="URL Link"&gt;Title of text</a></li>
<li><a href="URL Link"&gt;Title of text</a></li>
<li><a href="URL Link"&gt;Title of text</a></li>
<li><a href="URL Link"&gt;Title of text</a></li>
<li><a href="URL Link"&gt;Title of text</a></li>
<li><a href="URL Link"&gt;Title of text</a></li>
<li><a href="URL Link"&gt;Title of text</a></li>
<li><a href="URL Link"&gt;Title of text</a></li>
<li><a href="URL Link"&gt;Title of text</a></li>
<li><a href="URL Link"&gt;Title of text</a></li>  
</ul>
</div>


4.   Look at the above useful code change the lines in green colors with your post link and title which  you want to add in scrollbar  and  save your template, after that check the sidebar of your blogger blog that one beautiful scroll bar will be shown in your blogger sidebar and enjoy.


This useful article will be profitable for new bloggers and other visitors who want to add stylish scrollbar in blogger blog with easy way, if you like give me your suggestion and leave your comments.



0 Comments:

Post a Comment