How to create scrollable link list

If you want to have list of links on your blog but this list is long (for example hundreds of links) and occupies too much space you should read this article.

It is not nice when list of links is too long because it occupies too much space on your blog or web page. If you want to preserve all of your links and space of your blog you can use scrollable box which contains link list.

Here is example of link list with vertical scrollbar:

Advices to increase blog traffic

How to display HTML code in blog or web

How to add a falling snow effect to blog (blogger or blogspot)

Improve blog experience with bookmarking and sharing service (AddThis button)

Adding categories to blogspot (blogger)

To create scrollable list of links like this you should add this code:

<div style="overflow:auto;width:100%;height:150px;border:1px solid #ccc;">

<a href="http://interestingwebs.blogspot.com/2008/12/advices-to-increase-blog-traffic-and.html">Advices to increase blog traffic</a>
<br>
<a href="http://interestingwebs.blogspot.com/2008/12/easy-way-to-put-code-snippets-in-blog.html">How to display HTML code in blog or web</a>
<br>
<a href="http://interestingwebs.blogspot.com/2008/12/how-to-add-falling-snow-effect-to-blog.html">How to add a falling snow effect to blog (blogger or blogspot)</a>
<br>
<a href="http://interestingwebs.blogspot.com/2008/12/improve-blog-experience-with-addthis.html">Improve blog experience with bookmarking and sharing service (AddThis button)</a>
<br>
<a href="http://interestingwebs.blogspot.com/2008/11/adding-categories-to-blogspot-blogger.html">Adding categories to blogspot (blogger)</a>

</div>

Of course in <a> tags you should put yours links. And you can add as many links as you want.
The <div> tag defines a division or a section in an HTML document.
In div element overflow property is set to auto which mean that if the content is clipped, the browser should display a scroll-bar to see the rest of the content.


Instructions for blogspot bloggers to add scrollable link list in sidebar :

1. Go to Layout.


2. Click on Add Gadget.


3. Select HTML/JavaScript.


4. Enter a title and copy and paste adjusted HTML code from this article and click on button Save (for detailed instructions see How to add HTML code to blog)

Positive effect of link list with vertical scrollbar is smaller consumption of space and possibility to view all articles.

Negative effect is that you need to manually update link list every time you add new post.


Related articles:
Adding categories to blogspot (blogger)
How to create list of post links grouped by category using RSS (blogspot)
Create expandable TOC (table of contents or sitemap) in HTML