How To Create Scrollable Link List

Posted by Lasantha Bandara File Under : html 0 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.

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.