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.

  • http://www.blogger.com/profile/11020145278487788613 Marie

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

  • http://statesidepinay.blogspot.com/ jenny

    thanks for this tutorial. I’m using it right now on my blog :)

  • http://www.blogger.com/profile/06683288542416469045 blankPixels

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

    :)

  • http://www.blogger.com/profile/12188066345722781723 NYC Educator

    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.

  • http://www.justanotherpixel.net/ blankPixels

    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.

  • http://www.blogger.com/profile/12188066345722781723 NYC Educator

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

    You can email me at nyceducator@gmail.com 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.

  • http://www.blogger.com/profile/06683288542416469045 blankPixels

    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) yahoo.com.
    I need the template so I can adjust it myself for your blog.

  • http://www.blogger.com/profile/06683288542416469045 blankPixels

    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;
    }

  • http://www.blogger.com/profile/06683288542416469045 blankPixels

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

  • http://www.blogger.com/profile/06683288542416469045 blankPixels

    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.

  • http://www.blogger.com/profile/12188066345722781723 NYC Educator

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

  • http://www.blogger.com/profile/06683288542416469045 blankPixels

    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. :)

  • http://www.blogger.com/profile/07927791088722518756 Mariz

    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!

  • http://www.blogger.com/profile/06683288542416469045 blankPixels

    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?

  • http://www.blogger.com/profile/09405818736938110846 Tricia L Chaves

    Wonderful!!! Many thanks, it looks great on my blog:
    http://www.triciachaves.blogspot.com

  • http://www.blogger.com/profile/06683288542416469045 blankPixels

    @ 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.

  • http://www.blogger.com/profile/07983939455246580224 Le’Shaz

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

  • http://www.blogger.com/profile/02828378728962868575 Jo

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

  • http://www.blogger.com/profile/06683288542416469045 blankPixels

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

  • http://www.blogger.com/profile/14849521992252834832 Adi Riswan

    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

  • http://integralbodytherapy.net/ Qigong

    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.

  • http://www.justanotherpixel.net/ blankPixels

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

  • http://www.stevewrightphotography.co.uk/ Studio photography

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

  • http://www.brandsubmitter.com/ SEO Service Company

    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.

  • http://www.blogger.com/profile/08493657536077257345 Cinnamon

    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!

    http://ajourneyofbooks.blogspot.com :D

  • http://www.blogger.com/profile/06683288542416469045 blankPixels

    @ 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

  • http://www.blogger.com/profile/02245776078209667812 Kristina

    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 =(

  • http://www.justanotherpixel.net/ blankPixels

    @ 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) yahoo.com so I can check it out.

  • http://www.blogger.com/profile/02245776078209667812 Kristina

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

  • http://www.justanotherpixel.net/ blankPixels

    Oops. Sorry. It’s blankpixels0 (at) yahoo.com

  • http://www.justanotherpixel.net/ blankPixels

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

  • http://hayleyjohnsonphotography.blogspot.com/ Hayley

    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: http://www.stephaniefayblog.com/

  • http://www.justanotherpixel.net/ blankPixels

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

  • http://hayleyjohnsonphotography.blogspot.com/ Hayley

    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!

  • http://www.justanotherpixel.net/ blankPixels

    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

  • http://www.blogger.com/profile/06683288542416469045 blankPixels

    Hayley,
    check out this test page:
    http://mytestblog-blankpixels.blogspot.com/2009/08/testing.html

    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.
    <

  • http://www.blogger.com/profile/12213788390900021822 Hayley

    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?!

  • http://www.justanotherpixel.net/ blankPixels

    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) yahoo.com ? We can continue this through email then :)

  • http://putlie.com/ PuTLie

    thx for the tutorial.

  • http://www.blogger.com/profile/12431221538435203824 gleenn

    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.

  • http://www.blogger.com/profile/05441860124362246107 Miss M.

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

    Thank you so much for sharing it !!!! :)

  • http://www.blogger.com/profile/13370721349794495427 NiamhNIMROD

    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 “/>”.’

  • http://www.justanotherpixel.net/ blankPixels

    @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) yahoo.com
    - that’s a zero after blankpixels
    so i can check it for you.

  • http://latinaonamission.com/ Ms. Latina

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

  • http://www.blogger.com/profile/07862354537321428995 Audrey

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

  • http://www.blogger.com/profile/12222019044582462260 azzul

    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.

    salamat!

  • http://www.blogger.com/profile/06683288542416469045 blankPixels

    @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:
    http://www.dyers.org/blog/archives/2008/02/28/blogger-random-blogroll-widget/

    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 :)

  • http://www.empoweredseo.com/top-search-engine-ranking-factors.html james

    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?

  • http://www.blogger.com/profile/09673339563181355058 murk_core

    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..

  • http://www.blogger.com/profile/06683288542416469045 blankPixels

    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.

  • http://www.blogger.com/profile/08938634200925063052 cikNadz

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

  • http://www.blogger.com/profile/04576213180419395290 Sush

    Thnx!! That was cute and useful!

  • http://www.blogger.com/profile/06683288542416469045 blankPixels

    No problem, guys! Sush, thank you for the link love! :)

  • http://www.blogger.com/profile/07500733577920040395 Hobo Mama

    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: http://www.HoboMama.com

  • http://www.blogger.com/profile/06683288542416469045 blankPixels

    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.

  • http://www.4xindia.com/ Matt

    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!

  • http://www.blogger.com/profile/03164548520559233996 Debbie

    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.

  • http://www.blogger.com/profile/06683288542416469045 blankPixels

    No problem, Matt & Debbie! :)

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