Dynamic Scrolling Lists in Blogger Template Sidebar

There are many reasons why someone might want to create a dynamic scrolling list in the Blogger template sidebar. For example:

• You have a list of links to other sites that you'd like to update occasionally without having to re-publish your entire blog (see the "Groceries" list to the right)
• You have a list that is dynamic (like a Blogroll), but it is getting too long to aesthetically fit into your template (see the "Banana Roll" list to the right)
• You have a list of links to posts in your own blog that you'd like to update occasionally without having to re-publish your entire blog (see the "Greatest Hits" list to the right)
• You want to include another blog within your blog, allowing you to post little snarky comments, short book and movie reviews, etc (see the sidebar list on this blog)

The magic that allows these dynamic scrolling lists is the <object> tag. The <object> tag pulls in content from another location and displays it in a little window. If the content is too big, it puts in a scroll bar.

The first step is to create another html document with your dynamic content. Here's some hints:

• Start with your Blogger template. (View the template, cut and paste it into a text document, and delete out anything that you don't want in the scrolling list.) This will make the text and colors in your scrolling list look like part of the main document. Of course if you want them to look distinctly different, just ignore this suggestion.
  
• Anything in the new html document is going to show up in the scrolling list, so be careful not to put in large titles, extra columns, or other fancy embellishments. We're going for a list of text here. Nothing more.
• Be sure that any links you put into your new document include the text target="_blank" as part of the target identifier. This will force the link to be opened in a new window. In other words, <a href="http://www.wilkinsons.com/Bananna/index.html" target="_blank"> will open a new window with content from this blog. <a href="http://www.wilkinsons.com/Bananna/index.html"> will try to open the same window inside the little scrolling list part of your blog. Not pretty.
  
  Oops, forgot the target="_blank"!


• You may want to put a little title link at the top of your html document that links back to your main blog. The reason is that the html document may get indexed by itself in search engine and on pages that perform trackbacks. When someone loads your html document by itself, you want them to know where to go to see it in context. (See my Banana Roll page for an example.)
  

Next, put the html document on your webserver in the same general location as your blog. They need to be in the same domain to work well on Internet Explorer in particular (see "blog-within-a-blog" below for details why). If you're using Blogger's hosting service (your blog address is http://something.blogspot.com), this is going to be a problem for you. Sorry about that. You can either find another location to post the html document or use the "blog-inside-a-blog" technique described below. If you're using ftp posting to a webserver that you have more control over, just ftp the html document up onto that server.

For example, my blog is set up in a set of directories at http://www.wilkinsons.com/Bananna/. The main address for the blog front page is index.html. I have also posted the html document Groceries.html in the same directory. If you take a look at that page on its own, you'll notice that it's pretty basic and not worth much. But put it inside the <object> tags on the main page, and it's pretty useful, not to mention cool.

To place the html document into a scrolling box in your template, encase it in <object> </object> tags. The address of the html document is included in the "data=" parameter. You should also set the width (or it will be as wide as it can get) and the height (so that it fits in the space you've designed for it).

Here's the code in my Blogger template that puts the Groceries.html page into a scrolling box on the main page:

<h2 class="sidebar-title">Groceries</h2> <div align="center"> <object data="http://www.wilkinsons.com/Bananna/Groceries.html" type="text/html" width="200" height="200"></object> </div>

A Blogroll is even more interesting, since it's a page that updates automatically and requires some template coding. Here's the code that puts my Blogroll into a scrolling box.

<h2 class="sidebar-title">Banana Roll</h2> <div align="center"> <object data="http://www.wilkinsons.com/Bananna/Bananaroll.html" type="text/html" width="200" height="200"></object> </div>

Note the reference to the html document "Bananaroll.html". That's where my Blogroll JavaScript code is located - on a separate html document that's pulled in via the "object" tags.

For most people, that's all you need to do. Put it together and take a look at it. One suggestion is that you look at your handiwork in both Firefox and Internet Explorer, especially if Firefox is your primary browser. They both handle the <object> tags a bit differently. For example,

here's Firefox	and here's Internet Explorer.

Note the extra spaces around the Internet Explorer lists. Firefox is more elegant, but Internet Explorer has 85% of the market, so you'd better design with it in mind.

Blog-Inside-A-Blog
If you're doing the "blog-inside-a-blog" version of the scrolling list (the fourth example above), there are some other intricacies.

• First, Internet Explorer by default will not allow the html document inside the <object> tag to be from a different domain. So, if you're going through Blogger's hosting service and your main blog is located at http://mymainblog.blogspot.com, Internet Explorer is going to have trouble displaying content from your sidebar blog (for example, http://mysidebarblog.blogspot.com). Instruct your users to enable "access data sources across domains" to see the scrolling list content.
• Second, you're probably going to have the Blogger toolbar at the top of your inserted blog. It's going to look bad, but I don't know of any way around it. If you use their hosting service, you have to play by their rules.
  

Enjoy! And let me know if you use this Blogger Hack. I'll post a link to your example.

For more Blogger Hacks, please see the Blogger Hacks series at Freshblog.