Sunday, May 20, 2007

Scrolling Blogrolls for the Sidebar (Blogger)

I'm answering my own question, thanks to some wonderful html work by Susan/Taffy of the 4 Real Learning Forums, who made a nice widget with 4Real blogs on it. :) Also thanks to Blogrolling, who is now giving out for free what they used to charge for - the ability to have several blogrolls under one account. With these two things in hand, I'm all set:

First, set up an account at and start one or as many separate lists of links as you like.

Now go into Blogger and click on "layout" for the blog you want to edit. Click on "Add a Page Element" on the sidebar, and chose "HTML/Javascript".

Now add the following html/javascript to the box that opened - changing all parenthesis ( ) to "arrows" i.e. > and < :

(div style="height:100px; overflow:auto;")
(The Javascript Link You Are About to Get From Blogrolling)(/center)(/div)

Go to your account at Blogrolling and click on "get code" for the blogroll you want to include on your sidebar. Chose the Javascript code (the first option) and copy and paste it above where I have "The Javascript Link You Are About to Get From Blogrolling")

Now don't forget to click save! :)

You can change the height in the first line of html to whatever you like. I like mine on the small side (100px) but that is just personal preference.

Since you can now have several blogrolls at, you can make more scrolling sidebar lists in the same way, for example you could have "Favorite Blogs," "Favorite Websites," "Books I'm reading (with links to Amazon)," etc.


Angie said...

I am already using for the Catholic Mothers Online blog roll that I run, as well as now for my "blogs of interest." But, I never thought of using it for things like books I am reading, favorite websites, etc. Thanks for the great idea!

Elena said...

After some searching I found the widget you were referring to. It's great! You might want to post it so that others can find it more easily. Thanks.

Mare said...

Thanks for the tutorial! This has been so helpful!

MamaFlo said...

I'm a new blogger and your tutorial on a scrolling blogroll was exactly what I've been looking for and it worked like a charm - thank you very much!
So many other "directions" on the web are just too hard to understand.
Thank you Again and I Love Your Blog!

Laura said...

Thank you for this. Works great. I just have too many blogrolls. They look so cluttered. But this was a huge help. :)

Pale Rider 55 said...

thank you so much for this code!

Mohamad Rodzi said...

Cool stuff.
Does anybody know how to do a "floating" sidebar that will follow whenever you scroll down a page?

Thanks. Much appreciated if you could help.

*lynne* said...

hi! found you when searching Google for "hack scrolling blogroll" - and you answered my question in such a simple and straightforward manner - thanks very much!! :) :)

btw - only discovered a few days ago about blogrolling allowing for multiple free blogrolls - better late than never!! :)


aries_arevalo_ax said...

thanks a lot for the help. this was the number 1 hit on the google on my search for a scrolling list code. God bless!

blankPixels said...

i also posted another simple way of doing a Scrolling Blogroll in Blogger that is also easy to edit using the BlogList widget.

check out my post:

Adi Riswan said...

great tutorial, since i've lot of messy link in my blog..

thanx mom :-)