How to Make a Scrolling Blogroll / BlogList in Blogger – That You Can Edit

If you check out my Blogroll at the bottom of this page, you’ll see it’s scrolling. Easy, right? But, it also has a QuickEdit function where I can simply add links of the blogs that I want to add to the list. And, it doesn’t take much space in my blog.

I’ve been looking all over for a Blogger trick like this but I was unsuccessful. Most of the techniques I found were complicated (you have to make a separate HTML file, iframes, javascript, etc). Some didn’t give me the results I wanted. So, I tinkered with Blogger’s BlogList / Blogroll widget and I made it a scrolling, editable Blogroll.

I know most of us have a long list of Blogs we want to visit everyday and we want to keep that list as accessible as possible, so we place them on our blogs for everyone to see. And as time goes by, we discover other blogs that we want to add to the list.

So, I’ll show you how I did a Scrolling Blogroll / BlogList in Blogger.

Step #1: Add the BlogList widget or element from your Page Elements tab in Blogger Layout settings. Place it wherever you want. Then, make sure your settings are like this, well, except for the title:
For Sort, you can choose “Most Recently Updated” so the blogroll will list first those blogs that were, well, most recently updated.

SAVE the changes you made.

Step #2: Go to Edit HTML tab. Make sure you BACKUP your template BEFORE you do anything.

Step #3: Make sure the Expand Widget Templates is checked.

Step #4: Look for these lines of codes in your HTML:
Take note the lines in RED might be different in your HTML codes.

Step #5: Since this will be a simple BlogRoll, no icons, no latest post, etc., REPLACE all these lines of codes with this:

title=’Just Another BlogRoll‘ type=’BlogList’>

style=’overflow: auto; display: block; overflow-x: no; overflow-y: scroll; height: 150px; width:250px;‘>

The line of code in PINK is actually the one that makes the blogroll scroll. So, if you have other Blogger widgets you want to scroll (awards or collection of photos, etc.), just add that line right there. If you’re not sure how to do it, show me the source or script of your template or just the widget and I’ll help you fix it.

Take note of the codes in YELLOW. You can change their values:
title=’Just Another BlogRoll‘ – This can be changed using QuickEdit (the pencil button on the lower right side of the widget) or Page Elements tab. Name it whatever you like.

height: 150px; width:250px; – Change the values to your preferred height and width, depending on where you’re going to place it.

SAVE your template.

Step #6: Now, if you don’t want your BlogRoll to have indents on every line, I suggest you place this between your and tags. Now, this will depend on where you’re placing your BlogRoll. Mine is at the #footer part so if you place it on your sidebar, just change #footer to #sidebar.

#footer ul {
margin: 0;
padding: 0;
#footer ul li {
list-style: none;
margin: 2px;
padding: 2px;
border: none;

Save your template.

It’s as simple as that. Phew!

Now, you can simply add your fave blogs to your Blogroll using the QuickEdit or Page Elements tab in Blogger. No need to create a separate HTML or anything that complicated. The list can be as longggg as you want it to be and it won’t take much space on your blog.

Leave me a comment if you have any problems implementing this to your blog.

If you use this, please link me to your blog. That’s all I’m asking.

I hope you like it!

Related Tutorial:
Scrolling Comments for Blogger

If you want to become unique and handsome, then you must try our bomber jacket along with best cheap designer handbags. We give you excellent choices of blue jackets and mens coats. Our genuine father’s day gift ideas provide the service and durability.

  • thanks for imparting me this info..really had a hard time bout it especially now that blogrolling is still least i got help from your info. a million thanks to you!:)

  • thanks for this tutorial. I’m using it right now on my blog 🙂

  • happy to help!
    and thanks for making time to thank me!


  • I like your idea, but for some reason it didn’t work well for me. The list appeared, but the first few letters of each blog name did not.

  • NYC Educator, I’d love to help you with that. If you can maybe try to implement this trick again on your blog, I’d be happy to check it out and help you fix it so you can use it on your blog.

  • Thanks very much. I’ve put it up again as “Blogroll in Progress” toward the bottom of the page at

    You can email me at if you like. I notice the original html has something about a margin that the new one doesn’t have, and though I know nothing about html, I wonder if that might explain it.

  • Can you save your template and email the .xml file to me? I’ll try implementing your template on a test blog and check what’s wrong.

    Email it to me at blankpixels0 (at)
    I need the template so I can adjust it myself for your blog.

  • Try changing these values. Make sure you check for duplicates:
    #sidebar ul {
    margin: 0;
    padding: 5px;
    #sidebar ul li {
    list-style: none;
    margin: 2px;
    padding: 2px;
    border: none;

  • oops… i mean i changed the values for padding for #sidebar. change the values if necessary.

  • look for this entry in your template:
    .sidebar li

    then, replace this value under that entry:
    text-indent: -15px;

    change it to
    text-indent: 0px;

    it should work. i’ve tried your template on a test blog and it worked.

    please leave ur feedback once you’ve tried it.

  • You are a genius. Thanks very much for your brilliance and your assistance. I’ll tell my readers about you too.

  • No problem, NYC Educator. I love helping out people like you. I’m just glad people find this tutorial helpful.

    Thanks for the post, btw. 🙂

  • Thanks a lot for this, i’ve been researching on how to do this for quite some time and i’m glad i found your site. It worked perfectly for me! If you don’t mind and if you have time only, I hope you can give instructions as well on how to do this with other page elements, i.e. photos of blog awards, blog directory lists. Thank you so much, i appreciate this a lot!

  • Mariz, I’m still checking on how we can do the scrolling image thing. You can do it with the slideshow gadget but the images are not clickable.

    I’ll post again when I’ve figured out how to do it ‘coz this scrolling effect only applies on existing blogger gadgets.

  • Anonymous

    I use your blog list with Thumbnails. Is there a chance to change the size of the thumbnails? My Blog feeds sends by default a 72 pix thumbnail, but i want it in 150 pix? How do i change that?

  • Wonderful!!! Many thanks, it looks great on my blog:

  • @ Anonymous:
    Let me check on that, too. Sorry, has been caught up with stuff that I even haven’t worked on Mariz’ query. I guess there’s a way. I’ll post an update as soon as I work on that.

    @ Tricia:
    I’m glad it worked for you. Did you use this on your bloglist on the right side of your blog? It does look good on your blog. And I like your blog’s layout, by the way. 🙂

  • Anonymous

    >>>> @ Anonymous:
    Let me check on that, too. Sorry, has been caught up with stuff that I even haven’t worked on Mariz’ query. I guess there’s a way. I’ll post an update as soon as I work on that. < <<< That would be great. Thanks in advance. I check your site regulary.

  • hi =D wanna say ..THANK U.. i have now a fancy-looking blogroll thru less effort and time.. mabuhay!!

  • Jo

    Hey tere, I’ve used your code, thanks! You can see it on my fantasy book reviews blog. Cheers again!

  • No prob, Le’Shaz & Jo.
    I’m glad it worked for you. 🙂

  • I’ve applicate it to my blog.. and it works!
    thx dude.. now i can have a long list of my blog visitors without waste too much space.

    i’m from Indonesia

  • to be able to put a comment box code into a scroll box then into my blog,so that other people can copy and paste it but… You have to click the “if you cannot input blog, click here” link on the blog editor page.

  • Qigong:
    Sorry, I didn’t get what you posted. Are you asking me how o make your comment box scrolling?

  • I am making seo blog listing site, for that I need 1000 only or bloging site providing information related to search engine optimization, please help me get these site.

  • I went with random ordering to give everyone a chance to be near the top. I can see why alphabetical could be useful, but certain bloggers would find themselves parked at the bottom of a very long list.

  • Thank you thank you thank you! I used this to shorten my list of contest postings. I had to use the #sidebar ul fix to get the first couple letters to show up, but now it works wonderfully! 😀

  • @ SEO Service Company:
    There are actually 2 options when you configure the widget list – Most Recently Updated and Alphabetically by Blog Title. So, you can choose the first one so everytime the blogroll is loaded, the positions of the ones listed is changed based on which one is, well, the most recently updated. But if you just want a place where you want all the blogs you frequent to be

  • I did everything you said to do, and if you have time I’d love your help! All the blogs went but it’s not scrolling. I’ve double checked what I entered in and it’s exact. Now I don’t know what to do…..can you help =(

  • @ Kristina:
    I checked your blog but I didn’t find this blogroll on there.
    I can help you but I need you to email me the template (XML) of your current layout (you’ll get this from where you backup your template on the layout tab).
    Send it to blankpixels (at) so I can check it out.

  • When I send you email it says it’s been discontinued and it won’t let me send anything

  • Oops. Sorry. It’s blankpixels0 (at)

  • Kristina, did you send it already?
    I haven’t received any emails yet.
    Try blankpixels0 (at) Yahoo might be blocking your email if you already sent it.
    (that’s a zero after blankpixels)

  • Is it possible to use this method to create a scrollable comments box? If so, how?
    I would like a scrollable comments box at the end of each post – like found here:

  • Hayley:
    That's a great idea. I'll try that one out and post an update here as to how I did it. 🙂

  • Thanks soooo much!!! I just LOVE a scrolling comments area – I feel, as a reader I am more inclined to post a comment when others comments are open and visible to the public – and scrollable means compact… Fingers crossed you can nail this one for us!!!
    Look forward seeing what you come up with!

  • Hayley, i figured out how to setup a scrolling comments section but here are a few things you need to note:
    – it will only work on blogs with separate pages for each post (post pages in blogger shouldbe enabled). i checked your blog and you're using images for your post titles so i'm assuming post pages feature isn't enabled on your blog.
    – the comments will be scrolling but

  • Hayley,
    check out this test page:

    that's what the comments section would look like when you implement the scrolling comments.
    you can resize the comment form and the comments section to your liking. but again, you have to enable post pages on your blog so all your posts have their separate pages.

  • That is PERFECT!!! I have spent hours over the last few weeks trying to tweak something like this and just couldn't do it, you are amazing!!!!
    Now… to get it on my blog… Lol!
    Can I email you privately with my email address to get further help with installation if needed?!

  • Sure 🙂

    I need the template that you're currently using so I can check which part of it you need to edit to get your comments working.

    Can you please send the XML (from the Layout tab of Blogger) to my email, blankpixels0 (at) ? We can continue this through email then 🙂

  • thx for the tutorial.

  • hi sis. I really like this article. I wanted to make a scroll for my blog labels so as to minimize the space and i was trying the insert that pink line you have there bove in your post but it wasn't working. I tried how many inserting it here and there to no avail. Can you advise me where to insert the pink line? 🙂
    thanks a lot and more power.

  • That’s exactly what I was looking for !!! Let’s see if I can do this…lol

    Thank you so much for sharing it !!!! 🙂

  • It won’t work for me. It keeps saying
    ‘Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Element type “div” must be followed by either attribute specifications, “>” or “/>”.’

  • @NiamhNIMROD:
    there’s a line in your template that needs to be changed. look for any div tag that wasn’t closed properly. or if you can’t find it, send it to me:
    blankpixels0 (at)
    – that’s a zero after blankpixels
    so i can check it for you.

  • TY for this post!!! I am trying to work on it to add buttons instead of text.

  • Hey, great info. Thanks. Um, question…can I scroll a “blog list” as well?

  • hey blankPixels, tell me if a hack can be created for this: using blogger’s blogroll, is there a way to display only, say, 5 blogs at a time and a fresh set of 5 whenever the page is refreshed.

    i have almost a hundred blogs that i want listed in my blogroll but displaying all that would take up too much space in the sidebar.


  • @Audrey: This is actually for a blog list/blogroll. Are you asking if it can be applied to a blog list with excerpts of the latest posts?

    @azzul: I did some searching and found this very easy tutorial for you. I tried it and it worked:

    However, it only works for the widget Link List so it’ll just show links, no images or latest posts. I’m trying to check if I can tweak it to show the latest posts. If I succeed, I’ll post a tutorial here 🙂

  • Informative post. I would make sure that i try it in one of my personal blogs. But I want it to be executed for the comment section also. How do i do it?

  • nice tut.. i was wondering if you have a tut about putting a scroll bar on certain side bar widgets only.. and (how do you get so much traffic everyday??) hehehe.. good luck sa adventures mo kabayan..

  • Check the pink text on the codes on this post. That line of code is the one that makes the scrolling happen. 🙂

    Most of the traffic I get are for my tutorials. The power of Google. Hehehe.

  • its works like magic. thank you!!!!!

  • Thnx!! That was cute and useful!

  • No problem, guys! Sush, thank you for the link love! 🙂

  • Thank you! Awesome hack. I love having more of my bloggy friends showing without all the clutter.

    By the way, it works with the showing snippets/thumbnails style, too, if you just put your highlighted code line in where you indicated.

    Installed it here:

  • Yep, I mentioned on the post that the highlighted text can be applied on any other widget that you would like to scroll. I’m glad you got it working for you.

  • I recently come across this blog and this is nice idea for providing us information about scrolling blogrpll. Would you mind to let us know about blog widgets too, Thanks!

  • Thank you for this tutorial. With my ds’s help I was able to change my blog roll to a scrolling one. I have been trying to do this for a while.

  • No problem, Matt & Debbie! 🙂

    RE: Widgets, Matt, I only post about widgets that I’ve actually used.