How To Add Scrolling Effect to Blogger Link Lists

How To Add Scrolling Effect to Blogger Link Lists

by :- Gopal Vishwakarma

9 July 2018 5:41 am
6 Comments

With some few lines of css, you can make a LinkList on your Blogger blog to become scroll-able. This will be helpful in adjusting the height of a LinkList that looks so long on your blog. Below is an example of a scrolling Link List gadget on my blog which am using to display links to some blogging tips on my blog.

How To Get Started

I expect you to have already added the LinkList to your blog. If not, log in to your Blogger dashboard, go to “Layout“, click the “Add gadget” link and choose “Link List” from the list of Blogger gadgets. Add links to the gadget and SAVE.

To add the scrolling effect to the LinkList, we need to get the ID of the LinkList. To get this, go to “Layout” and click on the “edit” link under the LinkList as seen in the picture below:

You should see a new window similar to the one in the screenshot below:

Click in the address bar of the new window and carefully scroll to the end of the address till you see an ID similar to the one in the screenshot above.

In the screenshot above, the id of my LinkList is LinkList6. This will be needed in the css code.

==> From your Blogger dashboard, go to “Template“, ==> “edit HTML” ==> “Proceed“

==> Use CTRL F to find ]]></b:skin>

==> Immediately above it, paste this css code:

#LinkList6 .widget-content {
height: 150px;

#LinkList6 .widget-content { height: 150px;</ textarea></form> <br /> <span style="color: magenta;">overflow: auto; }</span><br /> <br /> NOTE: If your LinkList is LinkList2, make sure you edit the code above with the id of your LinkList. You can also adjust the “height” as you desire.<br /> <br /> ==> Click on <span style="color: blue;">SAVE TEMPLATE</span>.<br /> <br /> <a class="button downloadbutton" href="YOUR LINK" rel="nofollow" style="float: left;" target="_blank"> <span style="display: inline-block;">Your Button Name</span></a> View your blog and you should see the scrolling effect, right on your Link List.<br /> <br /> I hope this works..<br /> <br /> Please, let me know if it works for you. If you face challenges or have contributions to make, kindly relay them via the comments.<br /> <br /> Cheers!</div>