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!

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;
}

Custom Search Engine

Visit Annie's Blog to learn how you can add a custom search engine to your Blog. And check out my sidebar for the Beautiful Beta Search Engine, that searches both the Blog and the Wiki for your hottest hacks and templates!

Embed Powerpoint in Your Blog

And now for something completely different. How about embedding Powerpoint presentations into your Blog?Visit SlideAware, and create a free account. Download the Powerpoint Plug-In, and install it to Powerpoint.After creating your Powerpoint Presentation, you can save it to SlideAware. And it is very easy to embed it into your blog using:

<iframe src="http://personal.slideaware.com/yourmailadress/presentationid" width="480" height="380" style="border:none"></iframe>

Get the New BlogToc Hack!

It is new. It is working with the speed of light. It is AJAX-based. It is BlogTOC.
BlogTOC is my new Blogger Table Of Contents Hack. Its extremely easy to install. It shows a Table of Contents with Post Titles, Post Dates and Labels. Hovering your mouse over the Post Title triggers a Pop Up with a summary of your post.
If you click the column headers, the TOC will be sorted any way you like: by Title (ascending or descending), and by Date (oldest first or newest first).

In my right sidebar, you will see a "Show TOC" -link. Click it to display the TOC. Click it again, and the TOC disappears in cyberspace! If that isn't magic!

It is now on this Blog in beta version, so please test it here and give your feedback. Planned developments are:

• Filtering of labels
• Adding custom CSS classes
• A Beautiful Beta Installer

So check back the next few weeks!

Visit the Knowledge Base!

Beautiful Beta Wiki is now growing steadily (just the way a snail moves ... steadily). Today I added an in-depth tutorial about the inner workings of the Posts Widget. That's the thingy that puts your blog's posts on the screen. This tutorial can help you understand how it works, so that you can design your own modifications.
But of what use is knowledge if there is no practical application for it? (Well, the sheer BEAUTY of knowledge!). Okay, so that's why I added several simple hacks to the Wiki (more to follow).

Enjoy!

Member Fonts and Colors on Team Blogs

In this tutorial I will show you how you can have different fonts and colors for team members on a teamblog.
It is a simple hack, easy to install to your blog, and much asked for!

In this tutorial we will assume that you have a teamblog with 2 team members (Barbie and Ken). We will change the font color of the post body. Barbie's posts will be in red, Ken's will be in blue.

Edit your Blog's template in HTML-mode, and expand all widget teamplates.

Inside the skin of your blog (that is between the <b:skin> and </b:skin>-tags), add the following styling definitions:

.post-body-barbie { color:#ff0000; }
.post-body-ken { color:#0000ff; }

Now scroll down to the widgets-part of the template, and find the post-includable. Look for the following lines of code:

<b:includable id='post' var='post'>
....
....
   <div class='post-header-line-1'/>
   <div class='post-body'>
      <p><data:post.body/></p>
         <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
   <div class='post-footer'>
....
....
</b:includable>

What you see here is a post-header line (which is empty), the post-body, and the first line of code for the post-footer. Now we will change this code, so that Barbie and Ken each have their own color:

<b:includable id='post' var='post'>
....
....
   <div class='post-header-line-1'/>

   <b:if cond='data:post.author == "Barbie"'>
      <div class='post-body-barbie'><p><data:post.body/></p>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
   <b:else/>
      <div class='post-body-ken'>
         <p><data:post.body/></p>
         <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
   </b:if>

   <div class='post-footer'>
....
....
</b:includable>

Now save the template.

If you have more than 2 team members, the principle is the same: you just have to add some extra if-else statements, that are nested.

Recent Posts Widgets In Many Languages

Many of you are very excited about the Recent Posts Widget and the Recent Comments Widget, but you would like to have it in your own language.

So on my new Beautiful Beta Wiki I started a new project to assemble as many language versions of these widgets as possible. Take a look here to find the language versions that are available so far: English, French, Spanish and Dutch (Portugese will follow soon I hope).

So here is my challenge to you: translate the widget in as many languages as possible!

Recent Posts Widget Improved

One of the most annoying things of the Blogger Post Feed was that it is sorted by date of post-update. As a consequence, old posts that were updated appeared on the feed as if they were new. Very annoying if the alteration is just a minor one, for example repairing a broken link, or correcting a small mistake.

Well, this problem (if we may call it a problem) has been solved now by Blogger. You can have your post feed sorted by Published date, or by Updated date.

If you have the Recent Posts Widget installed to your Blog, there is a slight modification in the code you have to make. Edit the Page Element, and change the code like this:

<script src="http://beautifulbeta.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Notice the orderby-parameter: there are 2 possible values: published and updated. Omitting the parameter is the same as updated.

The Recent Posts Widget Installer has been improved, and now supports the orderby-parameter.

Beautiful Beta Wiki Launched Today

Today I can proudly announce the release of the Beautiful Beta Wiki!
Anyone who is interested to contribute to building a strong Blogger community, and wants to share knowledge and ideas, is welcome to apply for membership of the Wiki.

The Wiki has a Knowledge Base (that will be filled the coming weeks with Beautiful Beta stuff and - hopefully - your contributions as well) and a Forum. On the Forum you can post your questions, and that will be much more easy for me to answer than the per-post comments, that are not really easy to follow and to answer.
And on the Forum, you all can help eachother to improve your Blogs.

And ofcourse, I hope that the Wiki will be just as clear and nice and helpfull to you as this Blog has been so far!

What's Up Here

It has been very quiet on this Blog for the last month. I have been very busy with my daytime job, and besides that, lots of activities in the family life.
On the Web-front, my activities have been focused on Google Maps, and I built a great application to map my families travels to and through the United States next summer.

And ofcourse my curiousity has wandered around the web, where I discovered the great power of Wiki's. And I noticed the great potential of Wiki's in supporting you, my readers, in finding usefull tips and tricks, and sharing knowledge about Blogger. You see, more than 400 people are now subscribed to the feeds of this Blog. Isn't that what we call a Webcommunity?

So I started to build a Beautiful Beta Wiki, that will contain a Knowledge Base that is ripped from the Weblog, and a Forum where you can post questions, and help other people to improve their Blogs. And this Wiki will be open to you all, so that you can make contributions to the Knowledge Base and the Forum.

So let me know if you like to participate in this Beautiful Beta Wiki, and I will give you notice as soon as it is released.

Post Update Trick

My Recent Posts Widget now and then leads to discussions with other Bloggers about the order in which recent posts appear. Updated posts appear at the top of the recent posts list, even if their publishdate is somewhere far in the past. From a technical point of view, this is quite logic: people subscribe to a feed to be informed about changes in the blog, so if an old post is updated, it should appear in the feed immediately. But many times changes are just cosmetic: correcting a typo, repairing a dead link, or assigning a new label. In that case, appearance of the post in the feed is a little bit annoying or confusing.

Some readers suggested that I should change the coding of the widget, and leave out updated posts. I think that is not a very good idea, because an updated post could contain relevant new information. So I came up with an interesting trick.

Add the following styling definition to your blog's template:

.updateinfo { display:none; }

Now, whenever you update a post, at the beginning of the post insert update-information, using the following html:

<span class="updateinfo">UPDATE: Repaired some dead links. Content has not be changed.</span>

If you publish your post, the update info will not be displayed on your blogpage, but the feed, and therefor also the Recent Posts Widget, will show the update-text.

Recent Comments Widget Updated

Following up on a bug report from Molly I updated the Recent Comments Widget. It now supports both Full and Short feed settings.
If you have installed the widget, you don't have to do anything, it will just keep working. Thanks Molly!

New Blogger Template - The Hobbit

Last week I discovered a very beautiful webdesign, and I decided to port it to a Blogger Template.

Get it now!
If you want to discuss this template, please visit the Beautiful Beta Forum.

Playing with the Feed Links

Now and then one of your questions triggers my own curiousity. Shrish asked how to hide the Feed Link at the bottom of the frontpage, while keeping the Feed Link at each postpage. And how to change the text of the link. Well, here is how it is done. A new hack.

Step 1: Backup your template.
Better be safe than sorry.

Step 2: Edit you template
Open your template in HTML-mode, and search for the includable with the id feedLinksBody. You have to add some lines of code to it to make the hack work. Below, you will find the code of the includable, the new lines are marked in red.

<b:includable id='feedLinksBody' var='links'>
  <b:if cond='data:blog.pageType == "item"'>
    <div class='feed-links'>
    <data:feedLinksMsg/>
    <b:loop values='data:links' var='f'>
       <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
    </b:loop>
    </div>
  </b:if>
</b:includable>

Adding these 2 lines of code makes the Feed Link only show up on an Item Page, and not on the Main Page or an Archive Page.

If you want to change the text of the Feed Link from "Subscribe to:" into something else, you have to replace <data:feedLinksMsg/> with your own text.
The same can be done with the "Post Comments" text, and with the "(Atom)" text.
Just replace <data:f.name/> and <data:f.feedType/> respectively with your own text (or remove them completely).

Adding a favicon to your blog

Old stuff, and explained by many excellent bloggers and hackers, but usefull all the same. How to add a small icon to your weblog, that shows up in your browsers favorites?
Well, that little thingy is called a favicon in webspeak. And this is how you add it to your blog.

First, create a icon using a program such as the freeware version of IconArt. Upload this file to the web.

Then, edit your blog template in html-mode, and add the following lines of code to the head of your template, just below the <head>-tag for example.

<link href='youriconfile.ico' rel='shortcut icon'/>
<link href='youriconfile.ico' rel='icon'/>

If you have already a link in your favorites-bar to your blog, in IE you will probably NOT see the icon right after adding it to your blog. You will have to delete the link from your favorites, empty your browser's cache, close your browser, start it again and add the link again to make it show up in IE.

Displaying code inside a post

In my posts I have put some code-snippets. I got some questions on how I did this. Well, to be honest, it is very easy.

I am using the <pre>-tag inside my post. Anything that is put between a <pre> and a </pre>-tag is handled by your browser as pre-formatted, and your browser leaves it as it is. You can add some styling to it inline, such as <pre style="font-size:90%;color:#009000;">, or you can add a class definition to your template skin.
If you want to display html-code inside your post, be aware that you have to replace every < by &lt;, and every > by &gt;.