Beautiful Beta

Post Summary And Read More

noreply@blogger.com (Hans) — Fri, 20 Feb 2009 20:51:00 +0000

My old friends here are very well aware of the Peek-A-Boo-Posts hack that Ramani and I came up with several years ago. It required quite some template hacking and javascript too.

In this tutorial you will learn how to tweak your blog without any javascript to get a similar effect. On our homepage, all posts will show a short summary, followed by a "Read More" link. Clicking the "Read More"-link will bring up the post page with the full post text.

Step 1: Back up your template
Open the Layout|Edit HTML-tab on your Dashboard, and download the template as an XML-file to your harddisk. If anything goes wrong, upload it again and there will be no problem at all.

Step 2: Modify the template code
Scroll down and look for the following piece of code:

<div class='post-body entry-content'>
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

This is the piece of template code that displays the post-body on the screen. We have to add a few lines of code here:

<div class='post-body entry-content'>
  <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <style type='text/css'>.restofpost {display:none;}</style>
  </b:if>
  <data:post.body/>
  <b:if cond='data:post.link'>
    <a expr:href='data:post.link'>Read more...</a>
  <b:else/>
    <b:if cond='data:post.url'>
      <a expr:href='data:post.url'>Read more...</a>
    </b:if>
  </b:if>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Now save your template.

Step 3: Modify your post template
In your Blog Settings you can modify the post template. Change it to:

<div class="summary">Type summary here</div>
<div class="restofpost">Type rest of post here</div>

And save your settings.
This will take care of all new posts. Type the summary text in between the summary-div-tags. Type the rest of the post between the other div-tags, and publish!

Step 4: Modify old posts
If you want older posts to have summaries as well, change every post and add a summary-div and restofpost-div.

And furthermore...
The summary-div is not really necessary, as the code only hides the restofpost-div if we are on the homepage. If you want some other styling for the summary, add CSS-tags to the skin-part of your blog.

More If Then Ideas

noreply@blogger.com (Hans) — Sun, 15 Feb 2009 17:37:00 +0000

Now that my train of thought has started on how to use the <b:if> - <b:else/> constructions to enhance the Bloggger experience, I got some new ideas that really need some investigation.

Idea 1: Table of Contents
We can tweak the Blogpost Widget, so that it displays only posttitles when we are on the Blog Homepage, and full posts when we are on an Item Page. In the Blog Settings we can set that our Blog should display 365 days on 1 page, allowing for a maximum of 500 posts to be displayed.

Idea 2: Post Summaries on front page
By default, we have 1 Blogpost Widget on our Blog. But we can easily add a second Blogpost Widget to our Blog. We can modify Blogpost Widget #1 to be displayed only on the Homepage, and #2 to be displayed on Itempages.
In our posts we could use 2 span-tags, one for a summary and one for a full post text. In Blogpost Widget #1 we only display the summary-span, in Blogpost Widget #2 we only display the full text span. It can be done with javascript. The challenge is to see if it can be done without!

Idea 3: Featured Posts on front page
If we can have 2 Blogpost Widgets, we can have 3 as well.
Widget #1 shows on item pages, just as we are used to. Widget #2 and #3 are shown only on the Homepage, where #2 filters for 'Tutorial' and #3 filters for 'Template'. And #2 and #3 are side by side.

Well, I have to do some experimenting to get this to work. Please feel free to create your own solutions, and throw in your own ideas as well!

Admin Widget

noreply@blogger.com (Hans) — Sun, 15 Feb 2009 10:12:00 +0000

In my last post I taught you how to remove the ugly Blogger navbar from the screen. One minor setback is that now you don't have access to your dashboard, settings, layout and posts, because the navbar is gone.

In this post you will learn how to add an Admin Widget to your sidebar.

Step 1: Backup your template
Although this is not a very risky modification, it is always good practice to backup your template before modifying it.
Go to the Layout|Edit HTML-tab, and download your template as an XML-file and save it to your harddisk.

Step 2: Create an new Link Widget in your sidebar
From the Layout|Page Elements tab Add a Widget to your sidebar. Select the link-widget from th list. Set the title for example to Admin, and add 4 links to the list.

Dashboard       : http://www.blogger.com/home
Change Settings : http://www.blogger.com/blog-options-basic.g?blogID=####
Change Layout   : http://www.blogger.com/rearrange?blogID=####
Edit Posts      : http://www.blogger.com/post.g?blogID=####
New Post        : http://www.blogger.com/post-create.g?blogID=####

In this links you have to change the ####### to the ID of your Blog. The easiest way to do this is to go to your dashboard, and view the list of your blogs. Hover your mouse over the links (Layout, Settings, etc) and watch the status-bar of your browser. You will see the link there. The easiest way is to right-click each link, copy the hyperlink, and paste it into the link widget.

Step 3: Save
Save the Widget and display your Blog. If you are viewing your Blog, clicking one of the Admin links will bring you to the appropriate screen. Visitors of your Blog will not be able to modify it, because they are not logged in to your blog. If you are not logged in, clicking an admin-link will bring up the Blogger login screen.

Removing the Blogger Navbar

noreply@blogger.com (Hans) — Sun, 15 Feb 2009 09:52:00 +0000

It is an oldie, but worth mentioning.
You can remove the blue Blogger navigation bar that is at the top of each page by adding a single line of CSS to the skin of your blog.
From your dashboard go to the Layout | Edit HTML screen and scroll down to the skin part of the blog.
Feel free to save your current template first by downloading it, but it is not really necessary as this is not a very risky modification.

<b:skin><![CDATA[/*
 ...
 ...
#navbar {display:none;}
 ...
 ...
]]></b:skin>

Save and display, and finally you will be rid of the navigation bar.

Selective display of widgets

noreply@blogger.com (Hans) — Sat, 14 Feb 2009 18:56:00 +0000

Here is a small tutorial on how to display your blog's widgets selectively on your pages.

Let's suppose you only want to show your Profile Widget on your blog's Homepage, but not on the other pages. This is how it is done.

Step 1: Back up your template
Go to your blog's Layout Page, and enter HTML-edit mode. Download your template as an XML-file and store it in a safe place. In case template-hacking takes a wrong turn somewhere, you can upload your template-file again and you are back to normal.

Step 2: Find the Profile Widget
Expand the widget-code by checking the checkbox on the HTML-edit page. Now scroll down and look for the Profile Widget, that looks like this:

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
  <b:includable id='main'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    ...
    ...
    </div>
  </b:includable>
</b:widget>

Step 3: Modify the widget code
Now we only want to display this widget if the page that we are looking at is our blog's Homepage. We will use a <b:if>-statement to check for this situation.
Insert the following (red) lines of code into the widget code:

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
  <b:includable id='main'>
  <b:if cond='data:blog.homepageUrl == data:blog.url'> 
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    ...
    ...
    </div>
  </b:if>
  </b:includable>
</b:widget>

The datafield data:blog.homepageUrl contains the url of your blog's homepage. The datafield data:blog.url holds the url of the current page. If they are the same (==) we are on the homepage and the widget should be displayed. If they are not the same, the widgetcode is skipped.

Step 4: Save your template
Save your template and display your blog.

Breadcrumbs for Blogger

noreply@blogger.com (Hans) — Tue, 10 Feb 2009 23:01:00 +0000

With my new Blog Skin I also introduced a "Breadcrumb Trail" to my Blog. If this doesn't ring a bell, don't worry. Remember the Hansl & Gretchen fairy-tale?

Hansl and Gretchen were 2 kids from a very poor family. The parents were so poor that they had nothing to feed their children, and between them decided to take the kids into the forest and leave them to the wild animals. Hansl and Gretchen discovered these terrible plans, and decided to take pre-emtive measures. They took with them a piece of bread, and dropped breadcrumbs along the trail in order to find their way home. As might be expected, they didn't find home and they were captured by an evil witch (the breadcrumbs were eaten by birds, I guess). But the general idea got a strong foothold in the internet world, and nowadays you can find a breadcrumb trail on many a website to find your way back to the Home Page.

On the main page of my Blog there is no breadcrumb, because that is .... Home!

But as soon as you click on a specific post title, or on a label, or on an archive entry, you will see how the breadcrumb magically appears on top of the page:

Browse » Home » Tutorials » Breadcrumbs for Blogger

Now, here is an easy piece of code to put into your template, and breadcrumbs will be yours!

Step 1: Save your template
Go to the Layout tab, and click Edit HTML.
Download your template as an XML-file and save it onto your harddisk. If anything goes wrong, upload it again and not much harm will be done.

Step 2: Expand the widget code
Now check the checkbox to display your template's XML-code. Ready to hack? Here we go!

Step 3: Add a new Includable
We are going to modify the code of the Blog-widget. The default-widget uses a so-called "includable" (a chunk of code) to display a status-message above your posts when you have selected all posts with a certain label. We will turn off this default status message, and replace it with our breadcrumbs.

Scroll down through your expanded widget code and look for the following piece of code:

<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>

    <b:include data='top' name='status-message'/>

    <data:adStart/>

Now we will switch off the default status-message, by putting comments-brackets around it. (You can also delete the line, but I think leaving it there and commenting it out is more elegant in case you want to track back and debug).

<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>
  <!-- disable default status message
    <b:include data='top' name='status-message'/>
  default status message disabled -->
    <data:adStart/>

Now add the following line, that will call our breadcrumb includable:

<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>
  <!-- disable default status message
    <b:include data='top' name='status-message'/>
  default status message disabled -->
    <b:include data='posts' name='breadcrumb'/>
    <data:adStart/>

Immediately above this 'main' includable, insert our new breadcrumb includable:

<b:includable id='breadcrumb' var='posts'>
  <b:if cond='data:blog.homepageUrl == data:blog.url'> 
  <!-- No breadcrumb on front page -->
  <b:else/> 
    <b:if cond='data:blog.pageType == &quot;item&quot;'> 
       <div class='breadcrumbs'> 
         Browse &#187;  <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> 
         <b:loop values='data:posts' var='post'>
           <b:if cond='data:post.labels'> 
             <b:loop values='data:post.labels' var='label'> 
               <b:if cond='data:label.isLast == &quot;true&quot;'> &#187; 
                 <a expr:href='data:label.url' rel='tag'><data:label.name/></a> 
               </b:if> 
             </b:loop> 
             &#187; <span><data:post.title/></span> 
           </b:if> 
         </b:loop>
       </div> 
    <b:else/> 
      <b:if cond='data:blog.pageType == &quot;archive&quot;'> 
        <div class='breadcrumbs'> 
          Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/> 
        </div> 
      <b:else/> 
        <b:if cond='data:blog.pageType == &quot;index&quot;'> 
          <div class='breadcrumbs'>
          <b:if cond='data:blog.pageName == &quot;&quot;'>
            Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts
          <b:else/>
            Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Posts filed under <data:blog.pageName/> 
          </b:if>
          </div> 
        </b:if> 
      </b:if>
    </b:if>
  </b:if>
</b:includable>
<b:includable id='main' var='top'>

You can also download the xml-code for the includable here:
Breadcrumb includable
Right-click the link, and select "Save as..." to save the XML-file on your harddisk. You can open it with Notepad, and copy-paste the code into your template.

Step 4: Add some CSS to the skin
The basic code of your breadcrumb is now in place. You can change its looks by adding a CSS-class .breadcrumbs to the skin of your Blog.
This is just an example:

<b:skin><![CDATA[/*

....

.breadcrumbs {
  float: left;
  width: 590px;
  font-size: 11px;
  margin: 5px 10px 20px 10px;
  padding: 0px 0px 3px 0px;
  border-bottom: double #EAEAEA;
}

....

]]></b:skin>

Step 5: Save your template
Save your template and view the results. Enjoy!

Troubleshooting
The code above was copy-pasted directly from my template into this post, so it should be error-free if your copy-paste it into your template.

Be sure to have the latest widget-versions in your template. As you maybe know (or then again, maybe not) the widgets code (such as your Blog Posts) is updated regularly by Blogger, providing you with new functionalities. But if you have hacked into the code of the widget, Blogger will NOT update to the newest version of the code.
If you want to be sure that the most recent version of a widget is present on your blog, you can click the "Return to default widgets"-link in the Layout-HTML editor.

If you do not feel comfortible about modifying the code of your blog, create a new testblog for testing purposes. Add some Lorem ipsum posts (filled with nonsense text and fake labels), and see if the breadcrumbs work. If everything works fine, port it to your real blog.

A New Skin

noreply@blogger.com (Hans) — Mon, 09 Feb 2009 20:53:00 +0000

I finally got completely BORED with the old look-and-feel of Beautiful Beta. It was so totally not 2009.

And besides that, pageloading had slowed down tremendously because of all the javascript-widgets and other stuff that was hanging in my sidebars.

Furthermore, now that everybody has a 3-column template, it seemed time to turn back to an old-fashioned, well-designed, crisp and clear two column design. With lots of space for the post content, and a minimum of sidebar widgets.

The coming weeks I will clean up the posts, so Beautiful Beta will be up-to-date again.

Google Books Widget

noreply@blogger.com (Hans) — Wed, 03 Sep 2008 09:18:00 +0000

Want to share your library with friends, family and even the rest of the world? If that's the case, you can use my new Google Books Library Widget. Please take a look and experiment with this new widget, and let me know what you think about it.

Google Books

In Google Books you can create your own Library. Take a look here to see my small test library. As you can see, there are 2 books in this library, and I have written a small review for each of them. Creating your own Google Books Library is very easy. First of all, you need to have a Google account. As a Blogger user, you probably have one. After signing in on your Google account, select "more" from the menubar on the Google main page. This opens a small pop-up menu, where you can select "Books". This brings you to the Books-page, where you start creating your Library by "Importing Books". You can easily add books to your Library by entering a list of ISBN-numbers. Google will look up all bookdata. After importing some books, return to the Library page (click on "My Library" in the menubar), to see your Library Listing. Now you can add comments, reviews, and a ranking (0-5 stars) to your books. After setting up your Library, it is time to move on to creating the Google Books Library Widget.

Creating the Widget
Creating the Widget is done in a few easy steps:

Get the URL of your Google Books Library;
Create a Widget with Yahoo Pipes;
Add the Widget to your Blog.

It will take less than a minute to set it up.

1. Get your Google Books Library URL
Go to your Google Books Library page. Select the contents from your browser's address bar by right-clicking on it and selecting "copy" from the popup menu.

2. Create the Widget with Yahoo Pipes
Go to my Google Books Library Pipe by clinking on the link. In the entry-field, enter the URL by right-clicking and pasting the URL you just copied. Click the "Run Pipe" button. Your Library data are retrieved, and displayed as a list of titles and descriptions.
If the output is as you expected, go on to the next step.

3. Add the Widget to your Blog
Now click on "Get as a Badge". Badge is the Yahoo-word for Widgets. This will bring up the Badge Configuration Window. In this window, click on "Customize the size, type and settings of your Badge". In the entry-field again paste your Google Books URL and click "Next". Now select "Blogger" as the destination for your Badge. This brings you to the familiar Blogger-screen, where you can select the Blog, and enter the heading for the new Page Element. Click on "Add Widget", and afterwards view your Blog.

Please change URL's

noreply@blogger.com (Hans) — Sat, 02 Aug 2008 19:55:00 +0000

In my last post I have informed you of my ISP changing my homepage URL. I hve repaired most of the links in this blog, but if you have installed my widgets (such as Recent Posts and Recent Comments, you will have to change the link in your own blog as well.

Please change all referrals to "http://home.planet.nl/~hansoosting/......." to "http://home.kpn.nl/oosti468/......" to get your widgets working again.

Good luck and sorry for the inconvenience.

Tip: download my javascript-files, and upload them at your own web-space.

Speeding Up BlogTOC

noreply@blogger.com (Hans) — Wed, 11 Jun 2008 21:20:00 +0000

Some of you who are using my (much appreciated) BlogTOC widget have mentioned the long load times of their blog as a result of the BlogTOC widget. Also, some of you want to display the Table of Contents automatically, without the visitor having to click on the Show TOC link.

Well, I will share some ideas with you regarding this subject.

Speeding up stuff
If you implement the BlogTOC widget in the standard way, the entire code of the widget is placed in a Blogger Page Element, usually somewhere at the top of you blog.
Now, while your Blog is loading, all code is processed from top to bottom. The piece of code that is the most time-consuming is the code that retrieves the Blogger Feed, parses it, and puts the data in a set of javascript arrays. This slows down loading, but once the data has loaded displaying it is done lightning-fast.
A good solution is, to move the retrieval-code to a page element that is completely at the bottom of your blog page.
I have moved the code to the bottom of the footer, and that has sped up loading a lot.
The code you have to move is this:

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

Automatic display of TOC
If you want the TOC to auto-display, add a simple line of javascript code at the end:

<script type="text/javascript">showToc();</script>

Aorta Widget

noreply@blogger.com (Hans) — Fri, 11 Jan 2008 14:05:00 +0000

If you like mashups, you probably will like my new Aorta Widget as well. It displays your life's bloddstream, your Aorta, in the sidebar of your Blog. What is in your Aorta? Your Blogger Blog feed, to begin with. But also your Flickr Photo's, your Picasa Webalbums, and your YouTube Channel.

Easy Installation
Go to the Widget Installation & Downlaods Page, and click the Install Widget to Blog button. This will bring up the Widget Installer, where you can customize the widget before installation.
Enter the full url of your Blogger blog. If you have a Picasa Webalbums account, enter the Picasa username here. If you don't have a Picasa account, leave this field blank. If you have a Flickr account, enter your FlickrID here. Again, if you have no account, leave the field blank. Finally, enter your YouTube username, or leave blank if you have no YouTube presence.
Click Customize, and then Add to my Blog.

Easy Styling
Add custom CSS-classes to your skin. You need .bbaortabox, .bbaortaitem and .bbwidgetfooter.

Pipe Your Plaxo Pulse Into Blogger

noreply@blogger.com (Hans) — Wed, 02 Jan 2008 20:18:00 +0000

Well, I suppose that you know at least one word from this title: Blogger. Then it is time to get acquainted with Plaxo and Yahoo! Pipes. Again, as in many other Widgets I have created, the Widget might be of little practical use. But it has an educational purpose as well: it shows how to mash up datafeeds from different websites, transform them into JSON, so that you can easily pump the data into your Blogger sidebar. So here we go!

Plaxo
Plaxo is a social network service, that you can use to maintain your personal and business networks. Plaxo has been out there for several years now, but the new idea of Plaxo Pulse has given new dimensions to the use of Plaxo. The Pulse lets you share all kind of information with your network. You can add blogfeeds, links, photo's, messages or polls to your Pulse, and share them with your friends, your family, business relations, or with all of them.

Yahoo! Pipes
With Yahoo! Pipes you can convert any feed from any webpage into something else. You can mash up data from different sources, and create your own feed with it.

Piping your Pulse into Blogger
For this new widget I enabled my Personal Pulse Feed in Plaxo. This means that there is a feed containing all 'events' that took place, for example changes in personal information (phonenumber, address, etc.), or links that I added to my Pulse. This feed is a standard RSS-feed, and that is of little use because the widget needs a JSON-formatted feed (I have explained the JSON-concept in another post).
So that is where Yahoo! Pipes come in handy. I created a simple pipe, that picks up the Plaxo Feed Url. The output of this pipe can be retrieved in JSON-format. And my new widget takes that JSON-output as its input.
Relax, it sounds more complicated than it is.

Setting Up Your Plaxo Feed
Assuming you have a Plaxo account, sign in on Plaxo, and select your Pulse.
Scroll down to the bottom of the page, and click on RSS Feeds. This brings you to the Pulse Stream RSS Feeds page. Here you can see the 5 possible feeds: Everyone, Business Network, Family, Friends, and Me.
Select one of them and click on Enable. The feed will be enabled, and you can copy the Feed Url from the textbox. Copy it to Notepad for now.
This was step 1. Easy, wasn't it?

Creating the Pipe
Assuming you have a Yahoo! account, go to http://pipes.yahoo.com and sign in.
At the top of the page, click on Create a pipe to bring up the Pipe Editor. You will see the empty canvas with the text drag modules here, and several modules to the left side of the canvas. Drag the Fetch Feed-module onto the canvas. Now copy the Plaxo Feed Url from Notepad, and paste it into the url-input box in the Fetch Feed Module. Now connect the Fetch Feed Module to the Pipe Output box. A blue line will appear. Guess what - you have just created your Pipe!
Click on the Pipe Output box to select it. In the Debugger window at the bottom of the screen you will see your Pipe's Output.
Now click the Save-button, and click Back to my pipes.
From this list of pipes, click on your newly created Plaxo Pipe to run it and view its output. At the top-right you will see a small Feed-icon, with the text More options. Click this link to open a small pop-up menu. Right-click on the menu option called Get as JSON and copy the link and save it in Notepad. You will need this JSON-Feed-Url in the next step.
You have now completed step 2.

Installing the Widget
Now it is time to install the widget to your Blog. Go to the Widgets and Downloads Page, and click the Add Plaxo Pulse Widget to my Blog button. This will start the Click-n-Go Installer. In the install-screen, enter the JSON-Feed-Url from your Yahoo Pipe, and set the maximum number of items to display. Click Customize to create the Widget code, and then Add to my Blog to add the Widget to one of your Blogs.

Add some CSS
For your convenience I have added 3 custom CSS classes:

.bbplaxobox: a wrapper containing the widget

.bbplaxoitem: the item itself

.bbwidgetfooter: the widget footer

Add style definitions for these classes to your template's skin.

Your Privacy
As far as I know, sharing the feed only shares the fact that you have added or changed information. The feed will NOT contain the new information. Clicking on a Pulse Item brings the user to the Plaxo Pages. Information is only visible after sign-in, for users who are connected to you.

I hope this has some use, or that it inspires you to delve further into Piping and JSON.

Google Calendar Widget

noreply@blogger.com (Hans) — Mon, 31 Dec 2007 11:00:00 +0000

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

noreply@blogger.com (Hans) — Sat, 25 Aug 2007 13:10:00 +0000

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

noreply@blogger.com (Hans) — Thu, 12 Apr 2007 20:15:00 +0000

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

noreply@blogger.com (Hans) — Wed, 11 Apr 2007 20:18:00 +0000

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

noreply@blogger.com (Hans) — Mon, 09 Apr 2007 20:07:00 +0000

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

noreply@blogger.com (Hans) — Sat, 07 Apr 2007 21:11:00 +0000

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

noreply@blogger.com (Hans) — Sat, 07 Apr 2007 19:07:00 +0000

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>

Take look at the presentation below:

Get the New BlogToc Hack!

noreply@blogger.com (Hans) — Wed, 04 Apr 2007 21:23:00 +0000

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!

noreply@blogger.com (Hans) — Sun, 01 Apr 2007 20:50:00 +0000

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

noreply@blogger.com (Hans) — Sat, 31 Mar 2007 21:53:00 +0000

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.

Beautiful Beta Wiki Launched Today

noreply@blogger.com (Hans) — Sun, 25 Mar 2007 20:17:00 +0000

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!