<div id='sidebar-wrapper'>In this example, we have added a Link List Page Element into our Sidebar and the ID for this widget is “Linklist1”. If we have more link lists, the IDs will be “Linklist2”, “Linklist3” and so on. Also, we have inserted a HTML/JavaScript Page Element and the ID is “HTML1”. The third widget we added is a Label list and the ID is “Label1”. Look at your template and identify the widget. Take note of the widget ID.
<b:section class='sidebar' id='sidebar' preferred='yes'>
<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'/>
</b:section>
</div>
With the ID, we can now add the overflow property into the stylesheet under /* Sidebar Content */:-
/* Sidebar Content */
#Label1{
height:200px;
overflow:auto;
}
This will add the scroll-bar to the Labels widget only without affecting the other widgets. Insert the relevant ID of your widget into the portion shown in blue.
another Method
Select HTML JAVASCRIPT to add the page element .
Now You have to add some html codes to his page element to show of the scroll bar menu widget to the sidebar of your blogger.
<div class="widget-content">
<ul style="height:150px;width:150px; overflow:auto; ">
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li>
<li><a href="http://3rb-game.blogspot.com/">Your Text</a></li><span style="font-weight:bold;"></span>
</ul></div>
Copy this codes and paste it to page element and save it.
Now preview your blog.
You can change your links http://3rb-game.blogspot.com/ and text in the codes to show of yours links and posts.
Note:-In the codes you can edit height and width in red to adjust it to your blog.
Thanks so much, this is useful article...
ReplyDeleteYour fantastic post already stolen and republished:
ReplyDeletehttp://krishdownload.blogspot.com/2010/03/add-scrollbars-to-blog.html
Better complain to Blogger about it:
http://www.google.com/support/blogger/bin/request.py?contact_type=spam&hl=en&blog_ID=&blog_URL=
This comment has been removed by the author.
ReplyDeleteVery informative and very helpful. Thank you for sharing with us. canon mx492 setup
ReplyDelete