Blogger Tips & Tricks: Scrolling Blogrolls & Lists

And here I thought I wouldn't have any more posts for Blogger Tips & Tricks... Just goes to show you how much I know! Last week, as you may remember from my Blog Improvement post on Friday, Viv at Serendipity contacted me because she was having trouble commenting on my blog due to loading issues. I finally decided something had to be done because I didn't want people to decide it wasn't worth the loading time to visit my blog! Part of my solution included reducing the number of images in my sidebar, and the rest was devoted to turning my TBR list and Blogroll into scrolling lists. The most important part was the blogroll, because I believe loading the links can take a lot of time. Many of you asked about these scrolling lists, so I thought the topic deserved to be part of my Blogger Tips & Tricks series...

HOW DO I CREATE A SCROLLING BLOGROLL IN BLOGGER?

That's actually pretty close to what I typed in my Google search box when trying to figure this out. Ultimately, I used the information I found at Just Another Pixel, so rather than repost a version of their directions, I'm sending you to that site. It was relatively easy to take care of, but if you need any help from me, please feel free to drop me a note!

HOW DO I GET OTHER LISTS TO SCROLL?

Someone commented on my other post how turning my TBR list into a scrolling list made it look much more manageable. I couldn't agree more, especially since mine seems to grow weekly! Once I made my blogroll into a scrolling list, I thought I could de-clutter my other sidebar by doing the same to my TBR list. Ever the experimental dork once I learn something new with HTML, I decided to see if I could figure out how to do this based on the directions from Just Another Pixel and, more importantly, the code they used. A few minutes later I'm sitting on my "blogging love seat" shouting "I'm a genius!" (I'm so modest) to my husband, who looks at me like I'm a freak but quietly just says "yeah."

My TBR list is a text box that I added to my left sidebar in the Layout section of my blog, where you can "add a gadget." To make changes to it, I just manually searched for it in my Layout (under Edit HTML) after checking the "Expand Widget Templates" box and this was the code (you should be able to click on the pictures to make them bigger):


So if you take a look at the code below, I have added some lines in red, which was from the code at Just Another Pixel. These are the magic codes that will make your lists turn into scrolling lists.


Below are the lines of code so that you can copy and paste it into your own HTML templates. (As always, be sure to back up your templates before editing them, just in case you need to restore them after a mistake. It's happened to me, so I definitely recommend it!)



expr:id='data:widget.instanceId + "_container"' style='overflow: auto; display: block; overflow-x: no; overflow-y: scroll; height: 600px; width:190px;'
Please note that on the height and width fields, you can adjust those px values so that the list fits in your sidebar dimensions appropriately. So you can make the scrolling box as long or as short as you want to--I shortened mine to about a third of its original length.

Hope everyone finds this helpful! If you need any help, I'm happy to do what I can. And as I always say, when in doubt, search on Google and you can probably find a site with the answer to your question!

**ADDITIONAL NOTE**
Please check out the comments below. On May 20th, Jo posted a very helpful link with another option of how to make a scrolling list in your sidebar using an HTML/Javascript gadget. Thank you, Jo!! This is probably an easier option to work with so I encourage you to check it out! As for the blogroll, you're still probably stuck with editing your actual template, but at least you can have an easier time with your other scrolling lists!