BLOGGER WiDGETS

Welcome to Blog Tutorial... I hope it will HELP ! :)

TEMPLATES     WIDGETS     DOWNLOADS

Google Books Widget

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:

1. Get the URL of your Google Books Library;
2. Create a Widget with Yahoo Pipes;
3. 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

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

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>

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 ofAnnie, 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!

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

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.

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.

Post Update Trick







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!