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!
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:
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).
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
Change that line as follows:
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:
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:
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:
You can add this to the
Enjoy!