Google Calendar Widget

On the brink of the New Year we all update our calendars, and shred the old ones. Perfect timing for a new Blogger Sidebar Widget, that shows events from your Google Calendar in your sidebar.

It is easy to install, so give it a try!

Install Widget
Go to the Widgets & Downloads Page and click the Add Calendar Widget To Blog button.

This will bring up a pop-up window, where you can customize the settings of the widget, before instlling it to one of your blogs.
Change the settings, then click Customize, and then click Add Widget to my Blog.

Preparing you Google Calendar
Before adding the Widget to your Blog, you need to prepare your Google Calendar to share events. Your calendar has to be public; private ones will not be shown in the widget.

You will find your Google calendars at http://calendar.google.com. On the left-hand side of the screen you can see the list of all your calendars, the ones owned by you, and the ones you have subscribed to. Each calendar has a small dropdown menu. Open this dropdownmenu for the calendar you want to share, and select "Calendar Settings". On the second tab, select the radiobutton to indicate that you want to share all calendar information with everyone. Now go to the first tab, and copy the calendar ID from this page; you will find it close to the bottom, between parentheses, following the XML/ICAL/HTML-buttons. You will need this ID to customize the widget. The ID will look like v4tfgsl4n3la@group.calendar.google.com.

If you feel insecure about this, create a test-calendar, and give it a try before sharing your real calendar.

Customizing the Widget
Go to the Widgets & Downloads Page and click the Add Calendar Widget To Blog button. This will bring up the customization-window.
You need to enter the following settings.
Widget Title
This sets the heading of the Widget in your Blogger sidebar.
Calendar ID
The ID of your public Google Calendar, that you copied from the Calendar Settings page. It is best to copy-paste this ID, to avoid typing errors.
Number of events
This is the number of events that will be displayed in the sidebar. Be aware that a maximum of 25 events can be displayed.
Calendar Owner Label
If you want the name of the calendar owner to be displayed, you can enter the label that you want to use here. The label is displayed in front of the owner name. Change it tou anything you like, or leave it blank.
Event Location Label
If you want the location of te event to be displayed, you can enter the label you want to use here. The label precedes the event location. Change it to anything you like, or leave it blank.
Date Label
The date label precedes the date of the event. Change it to anything you like, or leave it blank.
Time Label
The time label precedes the date of the event. Change it to anything you like, or leave it blank.
From Label and To Label
The from- and to-label precede the starttime and endtime of the event. Change them to anything you like, or leave it blank.
Whole Day Label
The Whole Day Label is displayed if an event takes an entire day. Change it to anything you like, or leave it blank.
Checkboxes
With the checkboxes you can select which information you want to display. If you uncheck all boxes, only the eventnames, dates and times will be displayed.

If you make a mistake, click Reset to reset to the defaults.

Adding the Widget to your Blog
Click Customize to create the Widget Code, then click Add to Blog to add the widget to your blog. This brings up a Blogger-window, where you can select the blog that you want to add the widget to.

Styling the Widget
If you want to style the widget, you can use the following custom CSS classes:

• .bbcalbox : wraps around the widget


• .bbcalname: the calendar name


• .bbcaldescription: the calendar description


• .bbcalowner: the calendar owner name


• .bbcaleventname: the title of the calendar event


• .bbcaleventdescription: the description of the calendar event


• .bbcaleventlocation: the location of the event


• .bbcaleventdatetime: the date/time information of the event


• .bbwidgetfooter: the widgetfooter

Feedback
Please let me know if this widget is useful.
I wish you all a happy New Year!

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!