India Page

Google Books Widget

Wed, 03 Sep 2008 09:18:00 GMT

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.

Adding a front page to your blog

Sat, 29 Sep 2007 02:40:00 GMT

Please click on the title to go to the archived page.

"Latest Headlines" Widget

Tue, 23 Sep 2008 13:29:00 GMT

Dear Friend,

Google tools are just so amazing and innovative. Two years ago I started on my quest of having an AJAX & JSON library for myself to load feeds, now they have it as an Application Programming Interface (API), and then some.

I'm going to show you how to modify the Google Ajax Feed Widget sample to your blog, with three simple steps:

1. Get the key grom Google:

http://code.google.com/apis/ajaxfeeds/signup.html

2. Next, follow the instructions from this article Hacking Technique: How To Modify and add Widget to the Template, in particular section B.4.

Add this code to the header, right in front of the </head> tag. Remember to replace YOUR-KEY text with the new key.

3. Create a new "HTML/JavScript" widget, then add this line to the content:

<div id="feedControl">Loading...</div>

You can see the new widget on my blog at the moment, in front of the post area.

To change font, color, etc. modify the CSS styles. I override several the default CSS styles to match those of my blog.

.gfg-title {
color : #612e00;
background-color: #FFF3DB;
}
.gfg-title a {
color : #612e00;
}
.gfg-root {
border: 1px solid #956839;
font-family: "Georgia", sans-serif;

}

Good luck and have a nice day.

Hoctro
9/23/08

Update: 10/5/08

To place more than the default of 4 items, look for this line, at the end of step 2,

new GFdynamicFeedControl(feed, "feedControl",
{numResults : 4});

then modify it to become:

new GFdynamicFeedControl(feed, "feedControl",
{numResults : 25});

The maximum value you can put in is 25.

Improved "Table of Contents" Widget

Fri, 19 Sep 2008 22:07:00 GMT

Dear Friend,

"Today I will share with you a simple hack that allows you to have a listing of of your posts in chronological order. Think of it as the default "Blog Archive" widget without the hassle of opening and/or showing the arrow buttons."

This was the introductory text I used for promoting my original "Table of Contents" hack two years ago. Looking back, this was a really genuine hack - very much "Hoctro's style", since there was no JSON or JavaScript involved. (I guess my basic understanding of "recursive" style learnt from college (UC Irvine, Software Engineering, Class of 2004) paid off nicely, while examining the template code of Blogger's out-of-the-box Archived widget:-)))).

Today, while tidying up my old posts and moving them to the archived blog, I wonder if I could make this into a scroll down box to save space, if I were to have hundreds of headlines. I thought this would involved some sort of JavaScript code, but then after examining BlogU'ssimilar Table of Contents code, it is such a simple styling using CSS code. I "borrow" her code and modify my original hack, et voil?, it works! At the moment I'm installing it on my blog so you could see what it looks like.

Such is the beautiful of HTML and CSS, one line of code can change a look completely, making the widget now very usable, since you can change the height (height:200px to whatever,) and further render the look by applying styles to the div, such as style='height:200px;overflow:auto;border:1px solid brown' .

Installing this hack is very simple. First, follow the instructions from this article Hacking Technique: How To Modify Template, in particular section B.4. Then cut this code below and paste it in between any two "b:widget" tags, save the template, and you're done.

<b:widget id='TOC' locked='false' title='Contents' type='BlogArchive'>
<b:includable id='main'>


  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div id='contents'>
<b:if cond='data:style == "HIERARCHY"'>
<div id='TableOfContents' style='height:200px;overflow:auto;'><ul>
<b:include data='data' name='interval'/>
</ul></div>
    </b:if>
  </div>
  <b:include name='quickedit'/>
  </div>
</b:includable>
<b:includable id='posts' var='posts'>
  <b:loop values='data:posts' var='i'>
    <li><a expr:href='data:i.url'><data:i.title/></a></li>
  </b:loop>
</b:includable>
<b:includable id='interval' var='intervalData'>
  <b:loop values='data:intervalData' var='i'>
    <b:if cond='data:i.data'>
      <b:include data='i.data' name='interval'/>
    </b:if>
    <b:if cond='data:i.posts'>
      <b:include data='i.posts' name='posts'/>
    </b:if>
  </b:loop>
</b:includable>
</b:widget>

To reverse the chronological order so that the oldest posts will appear first on the list, go to "Page Element," select the just-created widget, and select the box "Show Older Posts First".

My special thanks to Annie for her use of expandable "Table of Contents" on her blog.

Have a wonderful day.

Hoctro
9/19/08

Another way to remove "Subscribe to: Posts (Atom)"

Sun, 14 Sep 2008 22:52:00 GMT

While working on a template, I was trying to remove the Subscribe to: from the bottom of the page. For some reason, previous methods that have worked for me in the past, didn't work on this template. I ended up adding this bit of code to the CSS style sheet:

.feed-links {
display:none;

}

That did it! Who knows why. Certainly I don't...I'm just happy it worked and thought I'd share.

post signature

Sat, 13 Sep 2008 09:41:00 GMT

Have you ever wanted a feature under your post that shows related posts from your blog? I found this way to do it from JackBook.com. It was originally designed by Hoctro with modifications by JackBook. This uses labels/categories that you already have in place to show Related Posts by Category.

There are two steps to this hack. But before you begin, be sure to save your template!

Step 1: Go to your Dashboard | Layout | Edit HTML | check Expand Widget Templates and locate this code:

<data:post.body/>

Step 2: Place this code after the code you just located:

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>





<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/><br/><br/>
<div id='hoctro'>
Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a></u> | <u><a href='http://www.jackbook.com/' title='Related Posts on Blogger Modified by JackBook.Com. Read More?'>Jack Book</a></u>
</div>
<script type='text/javascript'>

var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";

var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

Save your work and all is done.

Gadget

Fri, 12 Sep 2008 05:57:00 GMT

Hi everyone,

How are you all doing?

Looks like Google's new Gadget's API and its ease of integration of a widget into a blog revive my interest to Blogger again.

http://code.google.com/apis/gadgets/docs/dev_guide.html

I hope to learn how to write a Gadget and to integrate my JSON knowledge to re-make my hacks into new Gadgets. Stay tuned.

I'm putting my worthy previous posts into an archiving blog, for that very reason. This blog will contain all new posts, and links to the archived blog.

Thank you for reading, and have a wonderful day.

Cheers,

Hoctro.

RSS Advertising

Thu, 20 Nov 2008 09:13:18 GMT

Take a Bow ....... By Rihanna.
See more info...

Feed Gadget for Vista Sidebar

Sat, 25 Aug 2007 13:10:00 GMT

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!

Post Larger Images with Blogger

Sat, 23 Aug 2008 23:51:00 GMT

Have you ever wished that you could post larger images via the Blogger: Upload Images window? I found a neat trick from a reader, Miranda.

This requires a blogger template with extra width in the posting section so it will display the larger images.

Upload your image in the post window, Dashboard | Posting | Create | Add Image icon. After doing that, click on the Edit HTML tab and you will see this image code:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_OFh1WWXWCHM/SLClilXC1yI/AAAAAAAAB7A/Z8G8y03R2ek/s1600-h/DSC_2693.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://3.bp.blogspot.com/_OFh1WWXWCHM/SLClilXC1yI/AAAAAAAAB7A/Z8G8y03R2ek/s400/DSC_2693.JPG" alt="" id="BLOGGER_PHOTO_ID_5237868380194789154" border="0" /></a>

All you change is the s400 to s800! Then you have a nice large image on your blog.

I'm not sure how legal this is. All I know is that it works.

EDIT: Question was brought up about draft users. I didn't realize the image code was different, but it is. So, if you use Blogger in Draft, here is your instructions. Follow the directions above. You will see this image code:

<a href="http://2.bp.blogspot.com/_OFh1WWXWCHM/SLDBAvBlhrI/AAAAAAAAB7g/DYam-G0ZTNA/s1600-h/DSC_2689.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_OFh1WWXWCHM/SLDBAvBlhrI/AAAAAAAAB7g/kTUthEX2IYc/s320-R/DSC_2689.JPG" /></a></div>

Change this s320-R to this s800-R. Where there's a will, there's a way!

EDIT 09/08/08: Thanks to The A of DNA for: If you don't want it as large as s800 replace it with s576!

Blogger Error Messages

Fri, 22 Aug 2008 19:05:00 GMT

Oh. You know them. You've seen them. The nasty red font above your template edit window after you attempt to save your template or even preview your work. Jeering at you with:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: Element type "href" must be followed by either attribute specifications, ">" or "/>"

or

More than one widget was found with id: HTML3. Widget IDs should be unique.

Makes my skin crawl. But, you can battle the error message...and be victorious!!

I think the two examples above are probably the most commonly seen messages. At least for me they are. The first example can have a variety of elements in the "href" spot. Sometimes it is like fill in the blank. But, the thing to focus on is the ">" or "/>". I noticed, while working on a template yesterday for Pauls Health Blog, that I kept getting this error...with "div" as the element. It said that a "div" element wasn't closed properly. I checked and checked. Nothing looked out of place. But, the code I put in had "/>" at the end of it. And where I put the code, it already had the closing tag a bit further down. Finally I spied that little "/". That was the culprit. I removed the "/" and was finally able to save the template.

Lesson here is if you get this message, look carefully at the exact code you just put in. Does it have the "/" at the end with the ">"? If so, remove it. Or, controversially, if you get the error and it doesn't have the "/" at the end, slip it in!

The second error message comes up when adding code to your template that has already named the widget. It is easy to fix. Find the culprit in question and renumber it. It doesn't make any difference what number, just as long as it doesn't occur anywhere else in your template. It wants to be unique.

Please change URL's

Sat, 02 Aug 2008 19:55:00 GMT

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.

+/- (hide/show, expand/collapse) Labels

Wed, 13 Aug 2008 19:13:00 GMT

I'm on a label enhancement mission. Maybe my drop down menu label method didn't do it for you. Good news! Here is another option for you label makers using the infamous +/- method. This is simple, simple, simple.

Step 1 - Without expanding your widgets, find this code in your template:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

Step 2 - Replace that line with this code:

<b:widget id='Label2' locked='false' title='Labels and Feeds' type='Label'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>

<ul>
<b:loop values='data:labels' var='label'>
<li>

<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
</li>
</b:loop>
</ul>

<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

TaDa! Label those posts!

EDIT: 08/16/08 - In order for this to work, you have to have a label widget in place. And you have to have posts labeled. So, go to your dashboard | layout | page elements | add a gadget | Labels before trying this code.

Drop Down Menu for Labels

Tue, 12 Aug 2008 22:22:00 GMT

Hi Annie
I've just successfully used your instructions on adding tabs to my blog and have seriously cleaned up my sidebar, for which I sincerely thank you but, I would like to go a bit further. My Label list is pretty long and I would like to have a scroll bar or drop down menu for it. Trouble is, I can't see how I can get the scroll bar instructions on BlogU to work with the Label page element 'cos there's nowhere to enter the code given and I can't find anything about a drop-down (unless I've passed over it) on your blog.
Just thought it was worth an email to ask advice and to say thank you for the info I've already used successfully. I've recommended your site to a friend and put a link on my blog list ....

My readers are keeping me on my toes! Here is another request...this time for a drop down menu for labels. Here are the steps to accomplish this.

Step 1 - find this code in your template:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

Step 2 - replace that line with this:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br/>

<select onchange='location=this.options[this.selectedIndex].value;' style='width:200px'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

There are a few places in this code to customize it. Change this number to change the width of the box to fit in your sidebar. Change the wording that shows in the first line of your drop down box...to whatever you like.

Now you have a sweet little drop down menu to corral those labels that are getting out of hand. Go now and label with reckless abandon!!!

EDIT: 08/16/08 - In order for this to work, you have to have a label widget in place. And you have to have posts labeled. So, go to your dashboard | layout | page elements | add a gadget | Labels before trying this code.

EDIT: 08/21/08 - If you want to display the label count {trees (5) birds (9) flowers (3)} after each label use this code in Step 2:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br/>

<select onchange='location=this.options[this.selectedIndex].value;' style='width:200px'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

EDIT 09/07/08: Here is an example of the drop down box before expanded and after:

RSS Advertising

Thu, 20 Nov 2008 09:13:18 GMT

I Kissed a Girl ....... By Katy Perry.
See more info...

Dead links due to url renaming

Mon, 28 Jul 2008 13:06:00 GMT

Dear visitors,
Recently my internet provider has merged with the phone provider, after which they have changed all my url's. So temporarily, all links on this blog to home.planet.nl will not work (that is, untill I will have them repaired.
Sorry for the inconvenience.

Speeding Up BlogTOC

Wed, 11 Jun 2008 21:20:00 GMT

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>

Andreas02 Template

Tue, 29 May 2007 00:37:00 GMT

Please click on the title to go to the archived page.

Note:
The template has some pictures and CSS files that no longer exist. First you need to download the files from Andreas website and upload to your website, then download my template and point to the new locations.

Beyond the 100 posts limit

Thu, 12 Apr 2007 20:15:00 GMT

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

Wed, 11 Apr 2007 20:18:00 GMT

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://home.planet.nl/~hansoosting/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!

Google Calendar Widget

Mon, 31 Dec 2007 11:00:00 GMT

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!

"Blog List" Widget

Tue, 07 Oct 2008 12:34:00 GMT

Dear Friend,

I like the new "Blog List" widget from Blogger, where you could add interesting blogs, and see the latest headline from them. More interestingly, they have superb yet easy way to add or remove blogs from the list, namely the "Follower" feature.

While we are on the subject, let me say a warm welcome and thank you to my thirty-four "Followers" so far. I will try to remember all your names, so I could give you more priority in responding to your questions. (I actually more of a "follower", in that respect, for following to know who you are, and what other blogs you are following. I came across several of my fellow Vietnamese too, th?n ?i ch?o c?c anh ch?.)

But what if you want to see more headlines from their blogs, in a non-intrusive way? The Google feed widget that I introduced in my earlier post is a gentle answer to that need. The top window of the feed allows headlines and short descriptions to roll through, making your blog to have a sense of liveliness, why taking the least amount of possible real-estate.

I'm going to show you how to add this "Blog List as Feed Widget" to your blog, with four simple steps, assuming you have following some blogs already, by clicking the "Follow this blog" link upon visiting interesting blogs.

Before installing, All I ask for is that you must keep the credit Widget by Hoctro, and not to get rid of it. After all, I spent lots of my personal time on weekends to write these widgets. I'm not asking for money, just a little recognition, so others will know where the widget comes from. Not including my credit on your blog is also a form of plagiarism, and I don't think you want your readers to label your blog as such.

1. Get the key grom Google:

http://code.google.com/apis/ajaxfeeds/signup.html

2. Follow the instructions from this article Hacking Technique: How To Modify and add Widget to the Template, in particular section C.1, and add this CSS style code to the header, right in front of the </head> tag. Remember to replace YOUR-KEY text with the new key.

3. Add this code to the widget list, from the Layout->HTML short form, following the instructions from this article Hacking Technique: How To Modify and add Widget to the Template, in particular section B.4.

<b:widget id='BlogList2' locked='false' title='' type='BlogList'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<div id='blog-list-title'>
<h2 class='title'><data:title/></h2>
</div>
</b:if>
<div id='bl2008'>Loading ...</div><br/><br/>
<h6>Widget by <u><a href='http://hoctro.blogspot.com/2008/10/showing-your-blog-list-as-ajax-feed.html'>Hoctro</a></u></h6>
<div class='widget-content'>
<script type='text/javascript'>


var feedArray = new Array();
var feedName;
var feedUrl;

<b:loop values='data:items' var='item'>
feedName = "<data:item.blogTitle/>";
feedArray.push(feedName);

feedUrl = "<data:item.blogUrl/>";
var string_b = "blogspot.com";
var iof_b = feedUrl.indexOf( string_b );
if( iof_b != -1 )
feedUrl = "<data:item.blogUrl/>feeds/posts/default";

feedArray.push(feedUrl);
</b:loop>

// Handcode external blog feeds such as Wordpress' here, in two lines of code
// First is the name inside the quote, i.e., feedArray.push("ThemeLib");
// then the url, i.e., feedArray.push("http://feedproxy.google.com/Themelib");
//feedArray.push("ThemeLib");
//feedArray.push("http://feedproxy.google.com/Themelib");

function blogList2008() {
new GFdynamicFeedControl(feedArray, 'bl2008',
{stacked : true, numResults : 3,
title : 'My Blog List', displayTime : 7500});
}

google.load("feeds", "1");
google.setOnLoadCallback(blogList2008);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

4. Go to Layout->Page elements, and click "Edit" on the newly created widget, then click on Add to List

Select Blogs I'm following, and choose all the blogs by select "all", then exit this widget form.

You can see the new widget on my blog at the moment, at the back of the post area.

To change font, color, etc. modify the CSS styles. I override several the default CSS styles to match those of my blog.

.gfg-title {
color : #612e00;
background-color: #FFF3DB;
}
.gfg-title a {
color : #612e00;
}
.gfg-root {
border: 1px solid #956839;
font-family: "Georgia", sans-serif;

}

Have a wonderful day.

Hoctro
10/7/08

Updates

1. (10/10/08) Add feature to have links outside of blogspot. Just cut-and-paste the link at the "Add url" prompt.

2. (10/13/08) Some blogs outside of Blogspot domain are sometimes working, sometimes not. That is because we are "overloading" what the Blogger "Blog-List" designers' intention. It's just that I like the interface of Blog-List, so I choose to program with it, I could have used a LinkList widget to add links.

But there is a work around in step 3, and you have to manually add the feeds, in pairs:

// Handcode external blog feeds such as Wordpress' here, in two lines of code
// First is the name inside the quote, i.e., feedArray.push("ThemeLib");
// then the url, i.e., feedArray.push("http://feedproxy.google.com/Themelib");

feedArray.push("ThemeLib");
feedArray.push("http://feedproxy.google.com/Themelib");

Fix for Broken Favicons

Fri, 24 Oct 2008 01:34:00 GMT

I have been bombarded with emails from disgruntled bloggers that have lost their favicons. But, don't despair! There is a fix. I don't know how, or why it happened, but some of my blogs were also missing their favicon. Not all of them. But some. Once again, I don't know why. (Maybe a reader out there knows why.)

Anyway, the good news is, the fix is simple!! There are 2 steps.

Step 1 - find your favicon code in your template. It should be near the top of your template. Copy that code.

Step 2 - Paste that code here:

]]></b:skin>
PASTE ICON CODE HERE
</head>

If I have learned anything from this...we bloggers LOVE our favicons!!

RSS Advertising

Thu, 20 Nov 2008 09:13:18 GMT

Listen .......(from Dreamgirls). By Beyonce.
See more info...

Lenka

Mon, 20 Oct 2008 13:14:00 GMT

Here's Lenka, she is my family's latest favorite singer! You should see my son's dancing with the song while my daughter's singing, and my wife's cheering along. I first saw Lenka on the Tonight Show with Jay Leno last week. The music reminds me of the earlier songs of ABBA, my all-time favorite music band.

Visit her website and hear the latest song "The Show" at http://www.lenkamusic.com/ and vote for her as the "Who's next Artist of the month" at Yahoo! http://music.yahoo.com/promo-29644410. Hurry, there's only 3 days left!!!

New Translation Widget

Tue, 14 Oct 2008 13:02:00 GMT

Dear Friend,

Today I'm going to share with you yet another useful tool, the Translation Widget. This widget is very up-to-date with the number of available languages, according to the Google Translate Frequently Asked Questions (FAQ)

This tool follows the list and code from the Google's translation page. Since we bloggers know what language we are in, there is no need for the source language. The neat thing about this widget is that it does not use any JavaScript code, yet it translates any post (not just your homepage) you are viewing to the target language, using the powerful expression syntax expr:value='data:blog.url'.

You can see it being installed on my blog. I am very hopeful that my blog will be even more popular to new non-english speaking visitors. I hope your blog will have some more traffic too, after installing this widget.

Again, to install this widget, all I ask from you is to keep the "Widget by Hoctro" text, so others can go to the source and install this widget on their blogs.

Add the code below to the widget list, from the Layout->HTML short form, following the instructions from this article Hacking Technique: How To Modify and add Widget to the Template, in particular section B.4.

<b:widget id='HTML200' locked='false' title='Translate to your Language' type='HTML'>
<b:includable id='main'>


<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<form action='http://translate.google.com/translate_c?'>
<table id='webtb'>
<tr><td> <select name='tl' style='width: 8em;'>
<option value='ar'>Arabic</option>
<option value='bg'>Bulgarian</option>
<option value='ca'>Catalan</option>
<option value='zh-cn'>Chinese (Simplified)</option>
<option value='zh-tw'>Chinese (Traditional)</option>
<option value='hr'>Croatian</option>
<option value='cs'>Czech</option>
<option value='da'>Danish</option>
<option value='nl'>Dutch</option>
<option value='en'>English</option>
<option value='tl'>Filipino</option>
<option value='fi'>Finnish</option>
<option value='fr'>French</option>
<option value='de'>German</option>
<option value='el'>Greek</option>
<option value='iw'>Hebrew</option>
<option value='hi'>Hindi</option>
<option value='id'>Indonesian</option>
<option value='it'>Italian</option>
<option value='ja'>Japanese</option>
<option value='ko'>Korean</option>
<option value='lv'>Latvian</option>
<option value='lt'>Lithuanian</option>
<option value='no'>Norwegian</option>
<option value='pl'>Polish</option>
<option value='pt'>Portuguese</option>
<option value='ro'>Romanian</option>
<option value='ru'>Russian</option>
<option value='sr'>Serbian</option>
<option value='sk'>Slovak</option>
<option value='sl'>Slovenian</option>
<option value='es'>Spanish</option>
<option value='sv'>Swedish</option>
<option value='uk'>Ukrainian</option>
<option selected='vi' value='vi'>Vietnamese</option>
</select>
<input expr:value='data:blog.url' id='url' name='u' type='hidden'/>
<input name='sl' type='hidden' value='en'/>
<input name='hl' type='hidden' value='en'/>
<input name='ie' type='hidden' value='UTF-8'/>
<input style='width: auto;' type='submit' value='Go'/>
</td></tr></table></form>
<h6>Widget by <u><a href='http://hoctro.blogspot.com/2008/10/new-translation-widget.html'>Hoctro</a></u></h6>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

This line below contains the source language. Since I'm writing this blog in English, my source initial is en. You must change to your source language initial from the the widget code above.

This line below contains the preferred target language. Since I am a "constructive" lazy kind of guy, my preferred target language is Vietnamese vi. You must change this to your preferred target language, such as French ('fr').

<option selected='vi' value='vi'>Vietnamese</option>

Also, change the word "Go" to your language:

One last thing. If you don't want part of your text to be translated, add the class='notranslate' to the tag around it, such as this example below:

<span class='notranslate'>This text won't be translated.</span>

Until next time.

Hoctro

10/14/08

Translation Widget: Translating your current post right inside your blog!

Sat, 11 Oct 2008 20:28:00 GMT

Dear Friend,

I come across a tutorial on one of the many Google API documentations showing how to add translated text to the same web page. Google also announces very recently that they support more languages for pair translation, Vietnamese included. I'm really glad this is happenning, because I've been jealous with some other languages which enjoy free language translation services for years.

In this post, I will show you how I make the translation available on my blog.

I hope you will be inspired to do the same thing on your blog. If you come up with any other ideas on how to use the Translation API, please post them here as well.

Here are two simple steps to install the widget:

1. Follow the instructions from this article Hacking Technique: How To Modify and add Widget to the Template, in particular section B.4. Make sure the variable var toLang="vi"; shows your target language (in my case "vi" for Vietnamese, you can see all the available languages here: Languages Enum ):

<b:widget id='HTML10' locked='false' title='' type='HTML'>
<b:includable id='main'>
  
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
    <div id='translation' style='font-style:italic;color:navy'/>
<h6>Widget by <u><a href='http://hoctro.blogspot.com/2008/10/transtation-widget-translating-your.html'>Hoctro</a></u></h6>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>

var fromLang="en";
var toLang="vi";

    function transInit() {
      var text = document.getElementById("bodytext").innerHTML;
      google.language.translate(text, fromLang, toLang, function(result) {
      if (!result.error) {
          var container = document.getElementById("translation");
          container.innerHTML = result.translation;  }});
    }

   google.load("language", "1");
   google.setOnLoadCallback(transInit);

    </script>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

2. On your new post, place this pair <div='bodytext'> and </div> around the text you want to tranlate into your favorite language.

If you are going to use this a lot, I suggest making it part of the template so you could have them at the start of a new post. In Settings->Formatting, add this code

Post something new and see if this works. I admit that even though my tutorial is not translating well into Vietnamese, it's much more than I ever wanted. I read the recently published book "Planet Google", the author Randall Stross states that Google uses the statitical machine translation method, using trillions of references to come up with the results. This explains why in certain languages such as French or Spanish, the quality of the translation is much higher than the less frequenly used languages on the net, since Google acquired and indexed far more statistical data for "the Algorithm" to draw from.

Until next time,

Hoctro
10/11/08

New and Improved "Related Articles" Widget using the new Google's Ajax Feed API

Sat, 11 Oct 2008 06:52:00 GMT

Dear Friend,

As far as I could tell, "Related Articles" Widget is my most successful hack I've done so far for the last two years on the internet. I have seen countless blogs employing this hack. Somebody even said that the hack leverages Blogger users to have the same capability as Wordpress users in that regards.

For this new and improved version, I use the more reliable Ajax Feed API from Google rather than using my own library code. Also, I have added code to eliminate redundant headlines so what you will see is a set of unique "related articles" headlines. I would like to thank Jackbook.com again to help improving the original hack. I've incorporated both fixes from him as well.

I'm going to show you how to add this "Related Articles Widget" to your blog, with just three simple steps!. If you're already installed either one or both of the earlier "Blog List" or the "Latest Posts" Ajax Feed widgets, you can skip step 1 and 2, and just simply cut-and-paste the code from step 3 to your template!

Before installing, All I ask for is that you must keep the credit Widget by Hoctro, and not to get rid of it. After all, I spent lots of my personal time on weekends to write these widgets. I'm not asking for money, just a little recognition, so others will know where the widget comes from, and could install it too by following the link. Not including my credit on your blog is also a form of plagiarism, and I don't think you want your readers to label your blog as such.

1. Get the key from Google:

http://code.google.com/apis/ajaxfeeds/signup.html

2. Follow the instructions from this article Hacking Technique: How To Modify and add Widget to the Template, in particular section C.1, and add this CSS style code to the header, right in front of the </head> tag. Remember to replace YOUR-KEY text with the new key.

<b:widget id='Blog3' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='nextprev'>
</b:includable>
<b:includable id='backlinks' var='post'>
</b:includable>
<b:includable id='post' var='post'>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
</b:includable>
<b:includable id='status-message'>
</b:includable>
<b:includable id='feedLinks'>
</b:includable>
<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <h4 id='comment-post-message'><data:postCommentMsg/></h4>
    <p><data:blogCommentMessage/></p>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' style='display: none'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='100%'/>
    <data:post.iframeColorizer/>
  </div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
</b:includable>
<b:includable id='comments' var='post'>
</b:includable>
<b:includable id='main'>



<div class='widget-content'>

<h5>Related Articles</h5>
<div id='data2007'/><br/><br/>
<h6>Related Article Widget by <u><a href='http://hoctro.blogspot.com/2008/10/new-and-improved-related-articles.html'>Hoctro</a></u></h6>

<script type='text/javascript'>

// Incorporating modified by Jackbook to the next line, thank you very much.
var homeUrl = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 8;
var maxNumberOfLabels = 10;
var urlArray = new Array();
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfPostsPerLabel = 15;
</b:if>
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfLabels = 4;
</b:if>
var titleArray = new Array();
var titleTest = 0;

function relInitialize() {
var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";

var test = 0;
// Do not add identical labels from posts
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;

if (numLabel < maxLabels) {
      var url = homeUrl + 'feeds/posts/default/-/'
+ encodeURIComponent(textLabel);
      var feed = new google.feeds.Feed(url);
      feed.setNumEntries(maxNumberOfPostsPerLabel);
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("data2007");
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            titleTest = 0;
            for (var i = 0; i < titleArray.length; i++)
              if ( titleArray[i] == entry["title"] ) titleTest = 1;
            if (titleTest == 0 ) {
              titleArray.push(entry["title"]);
              var div = document.createElement('div');
              var a = document.createElement('a');
              a.href = entry["link"];
              // Adding an if statement to exclude current post.
              // Addition from Jackbook.com. Thank you
              if( a.href!=location.href ) {
                var txt = document.createTextNode(entry["title"]);
                a.appendChild(txt);
                div.appendChild(a);
                container.appendChild(div);
              } // if not home page
            }// if titleTest
          } // for
        }// if result is not error
      }); // feed.load

      numLabel++;
     }
    }
    </b:loop>
    </b:loop>
   }
   google.load("feeds", "1");
   google.setOnLoadCallback(relInitialize);
</script>
</div>

</b:includable>
</b:widget>

We're done! I have installed the new widget on my blog already for you to see.

Important features & notes:

1. To set the maximum of headlines per label, change the number on this line (right now it's 4.)

var maxNumberOfPostsPerLabel = 4;

2. To set the maximum of labels, change the number on this line (right now it's 10.)

var maxNumberOfLabels = 10;

My experience using Labels is that you should try to minimize down each post to just two labels only, then in conjunction with the maxNumberOfPostsPerLabel you will get your list to look more effective.

Until next time,

Hoctro.