How To Create Scrollable Link List

Posted by Lasantha Bandara on May 17th, 2009 File Under : html1 Comment

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:

To create scrollable list of links like this you should add below code to your post or page element :

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

<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<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>

Note : Remember to replace http://www.blogaddress.com and Your Text with your real links and texts.

You can change height and width of above code if you like.

File Under : html

One Response to “How To Create Scrollable Link List”

  1. Richard says:

    Nice tip, enjoyed following it and creating the same result. Thanks for sharing and looking forward for your next posts.

    Southern California website design

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.