Feed Gadget for Vista Sidebar

I finally switched to Windows Vista, and so far without any problems.
A thing I particularly like in Vista, is the Sidebar, and the Gadgets you can have there. It is very easy to create a gadget, it is just a tiny webpage, I read on many nerdpages, so I decided to give it a try.
And sure, it is very easy to build your own Vista Sidebar Widget.
In this post I will explain how I built a simple gadget that displays the 5 most recent post from the Beautiful Beta feed.

Now if you want to install the gadget, click this link.
Save the file to your desktop, and check that its extension is .gadget. If the file extension shows up as .zip, change it to .gadget. Doubleclick the downloaded file to install the gadget. From your Vista Sidebar, add the gadget.

If you want to see how it works, follow the next tutorial.

1. Check your local gadget folder
You can find the installed gadget by pressing [windows] + R on your keyboard, to bring up the 'Run'-dialog. In the inputbox enter
%userprofile\AppData\Local\Microsoft\Windows Sidebar\Gadgets and click OK. This will bring you to your folder with local sidebar gadgets (local means: only available to you, not to other users of your PC).
Now you will see your new gadget, it's called BloggerFeed.gadget

2. Examine the gadget structure
Open the BloggerFeed.gadget folder. In it there are 2 files and 3 folders.
The first file, BloggerFeed.html, is the gadget code, in html. Open it in Windows Notepad and examine it. You can see some familiar code here, calling the blogger JSON-feed for BeautifulBeta. If you like, change "beautifulbeta" to the name of your own blog to view your own feed.
The second file, gadget.xml, is called the Gadget Manifest, and contains meta-data about the gadget. This data is displayed in the Gadget Window when you try to add a new gadget to your sidebar.
The CSS-folder contains the stylesheet for the gadget, defining fonttype, fontsize, colrs, and so on. Not much different from your ordenary blog or website, isn't it?
The JS-folder contains the javascript-code for retrieving and parsing the JSON-feed. This code is also used in my Blogger Widget, a hack you have most likely used yourself.
The IMAGES-folder contains the icon (I copied this one from a standard Microsoft gadget).

3. Try it and modify it!
It is as easy as this. Please try it yourself, change the looks, or the blog, or whatever you like, and share your experience!

4. Things to do
This is only a first simple approach. Things I like to add to it in the future:
- Fly-out to display feed contents
- Setup screen to change the blogname and other settings
- Auto-refresh

Enjoy!

Beyond the 100 posts limit

After a lot of trial and error, and without having any success to develop a decent piece of programming to call JSON-feeds recursively, I suddenly had a flash of insight in how we can cross the 100 posts limit of the Table of Contents Widget. It's all because of Annie, one of those friends in the Blogosphere that makes me (and others) think. She has 101 blog posts, and is in dire need of a Table of Contents that can list all 101 of them. Well, check out my sidebar, the link will show Annie's table of contents, with all 101 of them!

The new BlogToc Widget release is updated in several ways:
- it now supports > 100 posts
- the link is more user-friendly
- a note is added displaying number of posts and filter applied

If you have more than 100 posts, you have to duplicate the JSON-script-call that is in your sidebar several times, each time with a different start-index. If you have more than 100 posts, you need 2 calls like this:

<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=100&callback=loadtoc"></script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=101&max-results=100&callback=loadtoc"></script> 

If you go beyond 200, you will have to add another line, starting at start-index=201 and so on.
It is as simple as that. Took me DAAAAAAAAAAAYYYYYYYYYYS to come up with it.

There is a new class added, .toc-note, that you can use to style the top-line. I used a simple styling, a 5px left-padding and a 80% font size.

Next stop: adding customization options (especially language).

BlogToC Widget Released

The job is done. We now have a complete interactive Table Of Contents. Click the button in my sidebar to display the TOC. You can sort the TOC by Post Title by clicking the column header. Click it again, and it is sorted in reversed order. The same way if you want to sort the posts by date: newest first, or oldest first. And by clicking on one of the labels in the TOC filters all posts with that label. Click the column header to return to the full ToC.

Here is how to install it to your Blog.

Step 1: Back Up your Template.

Step 2: Add a HTML Page Element
Edit your template in HTML-mode, and look for the <b:section> with id=main. This is the section that holds the Blog posts.
Change that line as follows:

<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

Save the template and switch to the Page Elements Tab.
Add a HTML page element above your Blog Posts element.
Leave the title blank. Add the following html:

<div id="toc"></div>

Save your template.

Step 3: Add a Sidebar HTML-element
Now add a HTML-element to the sidebar. Set the title to "TOC".
For the contents, enter:

<div id="toclink"><a href="javascript:showToc();">Show TOC</a><br/><br/></div>
<script style="text/javascript" src="http://kpn.planet.nl/oosti468/downloads/blogtoc.js"></script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

Replace YOURBLOG with the name of ...... exactly.
Oh yes, and save.

Step 4: Add custom styles to the skin of your template.
New id's and classes are:
#toc : the div-wrapper that contains the TOC
.toc-header-col1 : header of column 1
.toc-header-col2 : header of column 2
.toc-header-col3 : header of column 3
.toc-entry-col1 : cell in column 1
.toc-entry-col2 : cell in column 2
.toc-entry-col3 : cell in column 3

For your convenience: Beautiful Beta uses the following styling:

<style type="text/css">
#toc {
  border: 0px solid #000000;
  background: #ffffff;
  padding: 5px;
  width:500px;
  margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
  background: #ffd595;
  color: #000000;
  padding-left: 5px;
  width:250px;
}
.toc-header-col2 {
  width:75px;
}
.toc-header-col3 {
  width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
  font-size:80%;
  text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
  font-size:80%;
  text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
  padding-left: 5px;
  font-size:70%;
}
</style>

You can add this to the <b:skin>-part of the template, or insert it in the sidebar widget.

Enjoy!

Picasa Album Widget

Picasa is the free-to-download, easy-to-use, and Google-Pushed software tool to manage all your digital pictures. You can upload your pictures to your Picasa Web Albums. Now, wouldn't it be nice to have these albums available on your Blog? That is where this new widget comes in.

This widget will show your public Picasa Webalbums in your sidebar, and links to Picasa itself.

Go to the Widgets and Downloads Page to install this widget to your Blog.

In the widget installer, you have to enter the URL of your Picasa Web Albums. So if your Picasa Web Album is stored at http://picasaweb.google.com/yourname, that is what you have to enter in the installer's inputfield.
In the skin of your template, you can add CSS-styling for a new class, bbpicasabox.
An example of the styling definitions is given below:

.bbpicasabox {
  border: solid 1px #000000;
  padding: 5px;
  background: #efefef;
  margin-bottom:5px;
  width: 180px;
  text-align:center;
}

.bbpicasabox a:link, .bbpicasabox a:visited {
  text-decoration:none;
}

.bbpicasabox a:hover {
  text-decoration:underline;
}

.bbpicasabox img {
  border-style:none;
}