Hoctro's Place - Góc Học Trò

It's been ten years already! 9.11.2001-9.11.2011

2011-09-09T03:19:00.000-07:00

My friend,

It's been almost ten years since 9.11! I remember vividly seeing the Twin Towers on fire on TV. After taking my oldest child (2-year-old at the time) to the babysitter, I heard over the radio that no plane is allowed to take off from the US ground. When I arrived at work, one of the Towers collapsed :-(

10 years later, Bin Laden is dead! At the zero ground, a new Freedom Towers is rising. It will be 1776 feet tall, symbolizing the year the United States declared its Independence.

http://www.telegraph.co.uk/news/worldnews/september-11-attacks/8737101/September-11-Freedom-Tower-continues-to-rise-and-alter-New-Yorks-skyline.html

According to the article, "from the very top you'll be able to see the curvature of the earth." When the construction is done, Freedom Tower will be the tallest one in the western hemisphere.

So it's been ten years already! The then two-year-old little girl now becomes a teenager. She attended her first day as a seventh grader at an intermediate school yesterday. She signed up and was assigned to attend the "Orchestra Band" class. I hope it's gonna be fun for her, being able to communicate and play alongside others. Up to now, she's been studing piano mostly all alone, without any interaction and synergy from peers.

***

For the last two years, I'm retiring from my English blog to devote more time for my Vietnamese one, http://hoctroviet.blogspot.com. That blog is now sadly also being slowly retiring from the scene, since I've been so swamped with work.

Looking back at my little time devoting for writing "hacks" for bloggers (2006-2007), I realize it was very productive, and the results are helpful for others. Just the other day, I was visiting a blog, seeing that they have a remarkable "Related articles" section, but a closer look at the code, it was from one of my earlier "Related articles" hacks :-))))

Even now, I am using one of my hack - the "TabView Widget" in the Vietnamese blog - to showcase the prominent articles there:

I find out that it's very useful :-) So if you ever want to plug a hack into your blog, please try it out. It's here, in my Archived Hacks blog:

http://hoctrointro.blogspot.com/2008/09/archived-post-tab-view.html

The only thing that it's not working is the CSS, which I used from Yahoo's website. These files are gone, just like its CEO Carol Bartz just being fired via phone. Can you imagine that! CEO fired by phone!!! How coward is that from Yahoo's Board of Directors???

http://www.dailymail.co.uk/news/article-2035281/Fired-Yahoo-CEO-Carol-Bartz-lashes-doofus-board.html?ito=feeds-newsxml

Until next time,

YouTube is now integrated into Blogger!!! (But I still like my own method, enven though it's all hand coding ... :)

2011-01-17T00:27:00.000-08:00

Friend,

It's coming a long way for me, from hacking "labels" to getting interesting videos from YouTube. I have to say this: kudos to the Blogger team, they make writing additional Javascript stuff to create a webpage so easy, since they already handle lots of stuff like the "Template Designer" from the server. You just have to drag and drop stuff ...

So, forget PHP development or create your own webpage from scratch, just have a blog, "and the rest will follow" ...

Forget Wordpress as well ...

Follow this link to see how to add a video to Blogger:

Blogger in Draft: Search and Insert YouTube Videos

Happy New Year 2011 & Introducing my new blog

2010-12-31T05:54:00.000-08:00

Hi,

I would like to wish you a Happy and Prosperous New Year 2011!!!

I am now more avtively creating and adding contents to my music blog, please take a look.

http://hoctroyoutube2010.blogspot.com/

Listening and discovering music is somewhat less time-consming activity on the new blog. All you need is to select a label or post, then sit back and enjoy the music. Available videos are randomly selected and continuously played while you can spend time surfing other web sites.

Below is a sample of the music, as I will add more contents coming 2011. Enjoy.

Hoctro
12/31/2010

***

Dissecting the New Related Articles Widget - Part 1

2010-08-22T02:25:00.000-07:00

Hi friend,

This post's purpose is for dissecting my new Related Articles, so that other people can make the best use of it.

As with anything else in life, when one starts to do something, there must be at least a reason behind, otherwise, why bother? This is especially true in the case of the existing Related Articles, I mean to redesign it, for many shortcoming reasons below:

1. The tool doesn't allow the user to apply CSS if he or she wants to,

2. The returning related posts are only the latest posts of certain labels,

3. There is no paging system,

4. The most relevant returning posts are not always bubbling up to the top, since there is no system to rank which label is more important than the other.

5. The widget is designed as a "blog widget", so there are lots of unwanted code in the tool.

My goal is to create a new widget which:

1. Blogger, Wordpress, and any other web blogging systems, or even HTML sites can be make used of, as long as they have an organized way to identify labels, such as wrapping them around divs with class as "label" or similar names,

2. Utilize the latest and greatest JavaScipt APIs such as the AJAX Search API, the AJAX Feed API, and most of all, the JQuery API. This is, thus, a chance for me to learn new programming idioms.

3. A chance to revisit the search algorithm to see if I can improve the existing JSON callback system.

Then one day, on my way to work, I had an "EUREKA" moment! Why not using Google for their search engine, using the AJAX Search API to query the list of labels as search keywords, then get the resulting list and massage them the way I want.

To my amazement, not only the AJAX Search API can perform the search pretty fast, it also offers a GUI system so I can hide, display, change colors on my result list! It also has an indexing system, so I can navigate the results from one page to another.

After a week or so, I finish this initial widget. I will dissect the code line by line, so you can have an idea of what it does.

Below is the first version of the widget.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">//<![CDATA[

//var website = "hoctro.blogspot.com";
var website = getBaseURL();
var hoctroRelated = "site:" + website + " ";
var labelArray = new Array();

function getParams() {
$('div.post-footer-line span.post-labels a').each(function(idx, el) {
    var test = 0;
    var textLabel = $(el).html();
    for (var i = 0; i != labelArray.length; i++) {
      if (labelArray[i] == textLabel.toString()) test = 1;
    }
    if (test == 0) {
      labelArray.push(textLabel.toString());
      hoctroRelated = hoctroRelated + '"' + textLabel.toString() + '" OR ';
    }
}); // each
}
// Callback main function
$(document).ready(function() {
getParams() ;
}); // function

function OnLoadRelated() {
// create a search control
var searchControl = new google.search.SearchControl();

// create a draw options object so that we
// can position the search form root

var options = new google.search.DrawOptions();
options.setSearchFormRoot(document.getElementById("searchHoctroRelatedForm"));

// populate with searcher
var blogSearch = new google.search.WebSearch();
blogSearch.setUserDefinedLabel("Related Articles");
var options2 = new google.search.SearcherOptions();
options2.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);

searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
searchControl.addSearcher(blogSearch, options2);
searchControl.draw(document.getElementById("searchHoctroRelatedResults"), options);
getParams();
searchControl.execute(hoctroRelated);
}

// Copied from http://www.gotknowhow.com/articles/how-to-get-the-base-url-with-javascript
function getBaseURL() {
var url = location.href; // entire url including querystring - also: window.location.href;
var baseURL = url.substring(0, url.indexOf('/', 14));
if (baseURL.indexOf('http://localhost') != -1) {
// Base Url for localhost
    var url = location.href; // window.location.href;
    var pathname = location.pathname; // window.location.pathname;
    var index1 = url.indexOf(pathname);
    var index2 = url.indexOf("/", index1 + 1);
    var baseLocalUrl = url.substr(0, index2);
    return baseLocalUrl + "/";
}
else {
// Root Url for domain name
return baseURL + "/";
}
}

// Important, this has to be called here, otherwise main var is not yet created
google.load('search', '1.0');
google.setOnLoadCallback(OnLoadRelated, true);

//]]>
</script>

<style>
//#searchHoctroRelatedResults a.gs-title, a.gs-title * { color : brown; }
//#searchHoctroRelatedResults .gs-webResult .gs-snippet { display : none; }
//#searchHoctroRelatedResults .gs-webResult .gs-visibleUrl { display : none; }
//#searchHoctroRelatedForm { display : none; }
</style>

<div id="searchHoctroRelatedResults">Loading...</div>
<div id="searchHoctroRelatedForm">Loading...</div>
<h6>Related Articles Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a></u></h6>

Let's start with the first few lines:

01 : 
02: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
03: <script src="http://www.google.com/jsapi" type="text/javascript"></script>
04: <script language="Javascript" type="text/javascript">//<![CDATA[

05: //var website = "hoctro.blogspot.com";
06: var website = getBaseURL();
07: var hoctroRelated = "site:" + website + " ";
08: var labelArray = new Array();

Line 2: I'm telling the page to load JQuery, version 1.3. This is such an exciting JavaScript API to learn, I'm just a novice learner of this system, but I like it so much already, I will explain some of the code using JQuery later.

Line 3: I'm telling the page to load the Google's loading utility, so at a later time I can load the AJAX Search API.

Line 5: I can use the variable website to directly as "hoctro.blogspot.com", or I can use a function in line 6 (var website = getBaseURL();) I copied from the web, which will detect the page URL, then strip the page and only contains the root. This is important because at a later time in my search, I use this blog name to restrict Google to give back results only within my blog.

Line 6: since I comment out line 5, line 6 will hold the text containing my root (http://hoctro.blogspot.com/)

If you want to save room by key in your web root in line 5, then you can uncomment line 5, get rid of line 6 and the function getBaseURL() altogether.

My goal was to let the novice user to just cut and paste the code to the HTML widget, without any JavaSript knowledge, hence line 6.

Line7: var hoctroRelated = "site:" + website + " "; This variable will hold the searching text to send to Google. Right now it is "site:http://hoctro.blogspot.com/ "

One modification to this hack is available already! If you want Google to search the entire WWW, then you need to modify the line to become:

var hoctroRelated = " ";

Line 8: stores the array of currently found labels.

Next, we will inspect the function getParams(). This is the function I use to extract labels out of the page to form the query text.

09: function getParams() {
10: $('div.post-footer-line span.post-labels a').each(function(idx, el) {
11:    var test = 0;
12:    var textLabel = $(el).html();
13:    for (var i = 0; i != labelArray.length; i++) {
14:     if (labelArray[i] == textLabel.toString()) test = 1;
15:    }
16:    if (test == 0) {
17:      labelArray.push(textLabel.toString());
18:      hoctroRelated = hoctroRelated + '"' + textLabel.toString() + '" OR ';
19:    }
20: }); // each
21: }

Line 9: Originally, I let the function to stay inside the $(document).ready(function() JQuery get-ready function, but I found out that I need to sub it out to call it twice, since the AJAX callback and the JQuery ready are not always in synch. As a result, my search text sometimes has nothing in it, which is kind of an embarassment. Now I think the problem is solved by calling the function getParams() one more time, right before sending the search.

Line 10: This is JQuery in action! There is so much to explain in this one line. Basically, I tell JQuery to search for all the divs with the class post-footer-line, then all the span tags inside them with the class post-labels, then finally grab all the a tags! For each of the resulting a tag it finds, do the things inside the unnamed function inside line 11 to 19.

This line is so important, for it allows any other blogging system or regular web pages to look for the labels/ categories unique to their naming convention, and to grab them.

In other words, I use JQuery to stay away from using the blogger's b:loop for collecting labels. Now the widget is no longer depending on Blogger template code.

It is so important then, that you must show the labels in your post(s). Do not hide them in the footer area.

Line 11: this var is to detect if a label is already on the array. If it's equal 1, then the label is already stored in the labelArray.

Line 12: the textLabel stores the content of the a tag, in this case the label.

Line 13 to 15: This is a test to see if the label text (I used toString() function to be 100% sure to get text) is already existed in the array. If so, test = 1

Line 16: if the variable is still zero, with is the default assignment value, then it means this is a new label, I need to add to the search.

Line 17: but before that, I need to add the label to the list of found ones, so the next "each" round it can be used to compared against the next found label.

Line 18: hoctroRelated = hoctroRelated + '"' + textLabel.toString() + '" OR '; after many trials and errors, I find out that the label need to be in double quote, and I need to use the OR operator to make sure the result can search on all the keywords/labels. Then, if not found, Google can also use each label as a search term.

You can play with this line to get different results from google based on your need, if you want to.

An example of the search would be like the pic below:

site:http://hoctro.blogspot.com/ "Related Articles" OR "Widgets" OR "Blogger Tools" OR "Miscellaneous" OR "Template Designer" OR

I could easily use a string concatenation function to remove the last OR, but there's no need to, the search understands it ...

The last three lines are just for closing the if, the unnamed each function, and the getParams() function, respectively.

To be continued in part 2 ...

The new comment managing system from Blogger

2010-08-21T16:18:00.000-07:00

Just thought to send a kudo to the Blogger team, once again. I like this new commenting system just made available today - Ithink. so cool. So now I can delete all of those unwanted comments, all in one place.

Hoctro 8/21/2010

Pages-Related Articles-Your Own Photo: A Blogger's Utopia!

2010-08-21T07:34:00.000-07:00

According to Blogger in Draft, you can now add your own pic as a background.

Blogger in Draft: Use Your Own Photo for Your Blog’s Background

This is cool, I'm thinking about moving Hoctro's Place layout up to speed with the new Template Designer as well. Not to mention the Pages feature - which, as being one of the erliest "hacker" trying to work with the Beta Blogger template code (circa Sep 2006) to write a "label as horiz or vert menu" for that very purpose - this is Blogger's heaven time. Along with my latest version of "Related Articles", my blog will definitely have the new "look and feel" of Blogger.

Sometimes I wish to travel back in time to be around Sept 2006->Sept 2007 to be engaged in creating new hacks alongside with Ramani, Singpolyma, Hans, Purple Moggy, Phydeaux, BlogU, and last but not least, by "promoter" Avatar of Bloggeratto whom reported to the blogging world every new hack of mine and of others:

http://www.bloggeratto.com/2006/09/introducing-hoctro.html

You can see his posts around September 2006 to see how it was excited to be engaging in figuring out all the nuances of the new Blogger template, and later in using JSON + Ajax to write exciting hacks. Just look at Ramani's Neo template. 4 years and many moons later, nothing can come even close to that hack. To me, Hackosphere's one-page-fits-all-purposes is a testament to the creativity of earlier 2.0 Blogger hackers. The Neo paging system is the best hack i've ever seen on Blogger. (Somehow at the moment August 2010 it's no longer a 3-column format like it used to be, but the JSON functionality still amazingly works.)

http://hackosphere.blogspot.com/2009/07/wondering-why-peekaboo-post-hack-doesnt.html

Now there's a lot of those JSON hacks are not required any longer, for we have every Google API possible to deal with AJAX. Now, unlike in late 2006, we don't have the engaging spirit among hackers anymore. Everyone is sort of quit, or doing it on their own, myself as one example as well. Since I am now back to the blogger scene, but mostly concenterated on my vietnamese blog, I kinda using Blogger + YouTube APIs to create widgets. The new widgets are for I - and others - can search for music without spending much time. That's how recently I came up with the latest Related Article, first used as a tool to turn labels in to search input for showing up YouTube results:

http://hoctroviet.blogspot.com/

If you like to have that widget for yor blog, let me know here and I'll post it up.

Cheers,

hoctro

Introducing The New Related Articles Widget

2010-08-19T00:23:00.000-07:00

Hi friend,

This is my first take on the new Related Articles Widget.

Please cut and paste the code below to a new HTML Widget from your Page Elements to see if it is working.

I cut and paste the same code to create a new widget, located at the end of this post.

You don't have to get rid of the existing Related Articles widget on your blog. This new one is a totally independent, self-contained widget!

As you can see, the widget forms a query of all the "keyword" (in this case "labels") in this post, queries, and gets a resulting list for the most relevant posts from your blog. It's just like you query a list of terms and get results from the google search at http://www.google.com/ .

The result is, in my humble opinion, a truly "most related articles" relevant set of links, unlike my previous attempts - where only the newest posts from each label showed up. This time, we employ Google's famous ranking algorithm to do the "related" part for us.

I will explain the motivations, excecution and nuances of this "beta" widget in a follow-up post. There are ways to modify the look of the results, such as showing the snippet text or not, or use CSS to alter the look of the widget.

Update: See my explanations here:

Part 1: http://hoctro.blogspot.com/2010/08/dissecting-new-related-articles-part-1.html

Part 2: in progress.

Regards,

Calling for New Ideas for an Advanced Related Posts

2010-08-11T06:34:00.000-07:00

Hi,

I'm thinking of updating my "Related Posts" widget in lieu of the advancement in JavaScript libraries such as AJAX Feed, AJAX Search, JQuery, etc.

The new widget will certainly not a new main "Blog Widget" but acting like any other widget (you can move it around). I think I can now trying to use JQuery to look for all the posts' labels without doing the b:loop twice. I'm also thinking about using advance containers in JavaScript, if it has, such as map, set, etc. to store unique url values instead of doing the n-order check.

Let me know your idea.

I don't have lots of extra time, but will try to make room to rewrite this mashup.

Cheers,

Hoctro.

How to quickly upload your pictures to a new or existing post?

2010-03-07T06:43:00.000-08:00

Dear friends,

All the pictures in this post were uploaded at the same time, instead of the tedious one by one technique that bloggers have all been doing so far.

Here's how.

This new feature is still in testing, so if you log in thru here:

or from your blog, using the Sign in link, it would not show up for you to use.

To use it, you need to log in via draft.blogger.com Here is how it looks like:

Once looged in, you'll see the Dashboard with a blue theme. Make sure to check the box entitled Make Blogger In Draft my default dashboard.

Method #1: Upload up to 5 pics to your post

Create a new post, and make sure tab Compose is the editing mode. Select the picture icon from the editing tools:

You will see a different interface, it's because you are testing Blogger In Draft. Select the first choice on the left pane. For each blog you have with your account, Blogger creates an associate entry in the pulldown list as shown:

You can also keep clicking on Add another image to be able to upload more pics at once:

After selecting Browse, you can choose Thumbnails option to help you in choosing the right picture

After choosing the right ones, select Upload.

... and you're done!

But wait, there's more. How about uploading more than five pics at the same time? To do that, you need the help of a Picasa plug-in.

Method #2. Use Picasa plug-in.

First, log in Picasa by switching to Dashboard, then go the the end of page. In Tools and Resources, click Picasa Web Albums.

After succesfully logged in, you'll see the Picasa interface. Since Picasa is now an integrated part of your Google account, it has knowledge about your blogs. Next, select Upload. You will have to install ActiveX control, follow the directions.

Once completed, try Add Photos again:

Now use the standard Ctrl-click method to chose the pics:

Once done, you have a chance to remove unwanted pics. Finally, select Upload

now go to the end of the folder page to see the uploaded pics.

Now, go back to Blogger In Draft. Create a new post, then click the picture icon. Choose the second option: From Picasa Web Albums. The window shows all the available folders.

Navigate to the desired folder and click on it:

Use Ctrl-click to insert one or more pics:

it's done!!!!

You are allowing to upload up to 1 GB!!!! So there's plenty of room there.

Good luck and see you next time.

Hoctro

3/7/2010

Embedding Youtube music links in your blog (without leaving the page)

2010-02-05T06:38:00.000-08:00

Hi,

It's been a long time since I post a new hack. Recently I'm very interested in featuring music in my Vietnamese blog.

I devise a way to hear the music by just clicking on the "a" tag, and the music will play from the static bar at the lower right hand corner of your blog.

I found some interesting music from Youtube, then employ this new hack there. Please take a look.

http://hoctroviet.blogspot.com/p/paul-mauriat.html#65vol1

Here's how to do it:

1. Change CSS in the header section, (before the tag ]]>). The third CSS statement is very important, it'll make the youtube to stay static as you scroll the entire page down.

#videoDiv {
margin-right: 3px;
}

#videoInfo {
margin-left: 3px;
}

#content-links {

RIGHT: 55px; WIDTH: 230px; height: 8px; POSITION: fixed; BOTTOM: 20px
}

2. Next, add this Javascript code, right after ]]>, but before the header tag:

<div id='content-links'>
<div id='videoDiv'>Loading... </div>
</div>

4. Finally, add this code to your post, every time you want the user to hear some music, for example, I add two songs here:

<li><a href="javascript:void(0);" onclick="loadVideo('lOMhkGZdujY');">VOUS LES FEMMES</a></li>

<li><a href="javascript:void(0);" onclick="loadVideo('-JutiwteRj8');">N'AVOUE JAMAIS</a></li>

This way, you can refer to many Youtube music links without ever exiting the current page.

The syntax then, is

<a href="javascript:void(0);" onclick="loadVideo('YoutubeID');">Song name</a>

Example:

<a href="javascript:void(0);" onclick="loadVideo('5eoDjKcZamM');">Our Last Summer</a>

For this reason, you have to enter the link from the Edit HTML box, not from the Compose box.

Here is a test of the code:

"In 1985, a team of superstars gathered together to record the song"We Are the World". The song itself was a collaboration between Michael Jackson (Billie Jean, Beat It) and Lionel Richie (Hello, Dancing on the ceiling, etc.)"

Notice, you can also start from somewhere after the beginning of the song, such as 20 seconds after:

<a href="javascript:void(0);" onclick="loadVideo('5eoDjKcZamM', 20)">Our Last Summer</a>

Our Last Summer

(Note: if the embed tag on the original Youtube page is shown as "Embedding disabled by request", you will not be able to embed here either. I already added a new function called loadVideoWindow to pop-up a new window for that purpose.)

<a href="javascript:void(0);" onclick="loadVideo('5eoDjKcZamM')">Our Last Summer</a>

Our Last Summer

One of Us

Cheers,

Hoctro

Feb. 2010

Improved "Table of Contents" Widget

2009-12-31T16:30:00.000-08:00

Dear Friend,

"Today I will share with you a simple hack that allows you to have a listing of all of your posts! 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.

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

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

2009-12-31T16:29:00.001-08:00

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.

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='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' style='padding:15px;'/><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.

Update:

08 Jan 09: Happy New Year to my readers! Hajunik.com puts together a tutorial on how to add more formatting to the hack. It does look inpressive and seamlessly integrated into his blog theme. Please take a look at the tutorial at Ajax Related Posts widget for Blogger

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

2009-12-31T16:29:00.000-08:00

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

Season's Greetings

2009-12-03T23:17:00.000-08:00

Happy Holidays to my dear readers!!! Wishing you a Merry Christmas and a Happy New Year 2010.

Best Regards,

Hoctro

Lenka

2009-10-10T05:02:00.000-07:00

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

2008-10-14T06:02:00.000-07:00

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

"Blog List" Widget

2008-10-07T05:34:00.000-07:00

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.

<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");

"Latest Headlines" Widget

2008-09-23T06:29:00.001-07:00

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.

(Superseded) "Related Articles" Widget

2008-09-21T15:20:00.000-07:00

This post is now superseded by a newer "Related Articles" Widget, using Goggle's new Ajax Feed API.

Please click on the link to install this new widget.

Gadget

2008-09-11T22:57:00.000-07:00

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.

Adding a front page to your blog

2007-09-28T19:40:00.000-07:00

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

Andreas02 Template

2007-05-28T17:37:00.000-07:00

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.

Yet another TabView Application: Latest Posts of Favorite Blogs

2007-05-21T23:56:00.000-07:00

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

TabView Application: A Blogger Hack Directory

2007-05-20T10:37:00.000-07:00

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

Introducing TabView Widget - Part 2

2007-05-19T15:53:00.000-07:00

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

TabView Widget

2007-05-17T16:57:00.000-07:00

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

Overcoming the "25 Latest Posts" Limitation

2007-05-16T14:08:00.000-07:00

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

Here is the playground test blog, showing the all posts (by setting the value described in the tutorial to -1):

http://hoctro-playground.blogspot.com/.

Overcoming the "25 Recent Comments" Limitation

2007-05-15T13:29:00.000-07:00

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

Here is the playground test blog, showing the lastest 100 comments:

http://hoctro-playground.blogspot.com/.

What is a widget, after all? (continued.)

2007-02-03T13:38:00.000-08:00

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

What is a widget, after all?

2007-01-25T14:00:00.000-08:00

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

Showing Related Articles to your Post

2007-01-14T12:57:00.000-08:00

Please click on the title to go to the newly updated Widget (as of 9/21/2008).

Showing Headlines by Labels

2006-12-13T22:41:00.001-08:00

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

Adding Google Text Search Utility with Custom Tab Results

2006-12-10T18:39:00.000-08:00

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

"Listing of Contents" Widget

2006-11-21T10:00:00.000-08:00

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

How To Modify the Blogger Template - The Core Javacript Library for JSON Widgets

2006-11-20T20:48:00.000-08:00

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

Showing Link List or Label Widgets as Tabs

2006-10-31T09:41:00.000-08:00

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

It's a boy!

2006-10-19T18:26:00.000-07:00

Dear Friend,

I'm happy to report to you that I'm a father again, this time it's a boY, and possibly a new software engineer in the making:-)! Yay!!!!! Along with that there will be lots of responsibilities, and nursing time, and this, and that. So there will probably no new hacks in sight :-) But i'll try to check in and approve comments, just to see what's going on, but don't be upset if I could not get back to you. I'll have new hacks in the long run of course, but probably not with the same rate I've been doing :-)

Cheers,

Hoctro.
(10/19/2006)

Understanding the New Blogger Template (3)

2006-10-06T09:36:00.000-07:00

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

Understanding the New Blogger Template (2)

2006-09-28T21:18:00.002-07:00

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

My Blog Has Just Made It to "Blogs Of Note"!

2006-09-27T20:29:00.000-07:00

Dear Friend,

I'm happy to tell you that I have just made it to the Blogs of Note. This is quite an honor and unexpected. I feel like I just have got my own star on Hollywood Boulevard!

I would like to take this opportunity to thank my friends (Ramani, Vivek, Hans, Avatar, John (Freshblog), and others) who have been helping one way or another in shaping the contents of my site. You can check out their sites from my "interesting links" on the sidebar.

Ramani is right. My simple, free counter I set up from "Sitemeter" jumped drastically from 100 a day, which is not a small number by any means, to 2400 (!) in just one day! This is incredible!

For my new readers, welcome!!!! Feel free to check out what's on my site, and leave your comments here on what other topics you would like me to write about: more hacks, hack suggestions, more Blogger Beta how-to tutorials, etc. I'm planning to write an in-depth series on the internal working of the new beta template. This will take 4, 5 articles or more. So stay tuned.

Have a wonderful day and check back often at my site and my friends', as we have quite a few interesting Beta hacks to offer.

Hoctro (9/2006)
Blog: http://hoctro.blogspot.com/

Understanding the New Blogger Template (1)

2006-09-26T20:45:00.000-07:00

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

Showing your Blogger Labels as Vertical Tabs

2006-09-19T11:04:00.000-07:00

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

Adding a Breadcrumb Trail to your Blogger Post

2006-09-11T21:45:00.000-07:00

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

Showing your Blogger Labels as Tabs

2006-09-09T12:56:00.000-07:00

Dear Friend,

Below are the instructions on how to turn "Labels into Horizontal Tabs," my third hacking attempt. Many thanks for the Exploding Boy website for making it free for everyone to use

Step 0: Label your posts.

Make sure your blog has some posts with label assigned, otherwise nothing will get created.

Step 1: Downloading and unzipping the file from the Exploding Boy website

Here are the downloading and sample links:

http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/

http://exploding-boy.com/images/cssmenus/menus.html

Then, have a googlepages account and upload the pics there. Or you could upload the pictures of the tabs to a post of your blog, then you can get the url like this:

Step 2: Changing the Header to become appendable.

Modify this line:

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">

to become

<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">

Step 3: Prepare the CSS portion of the hack.

Copy the CSS code of the tab you like, then changing the picture urls to point to the address of your uploaded pics

For example, if the picture you uploaded to your Blogger post is: <img src="http://1.bp.blogspot.com/_hO0v-S1ryQ8/SNo2UYSv_rI/AAAAAAAAAkA/L_qsJpbksCs/s400/tableft.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5249568039400111794" />

then the tab would look like this:

#tabs a {
float:left;
background:url("http://1.bp.blogspot.com/_hO0v-S1ryQ8/SNo2UYSv_rI/AAAAAAAAAkA/L_qsJpbksCs/s400/tableft.jpg") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}

Step 4: Adding Label Widget

Follow the instructions from this article, especially step B.4. After you've done with inserting the code & save it, go to Page Element option and drag the newly added widget to stay under the Header area (that we fixed so that it would accomodate this new widget.)

<b:widget id='Label10' locked='false' title='' type='Label'>
  <b:includable id='main'>
    <div id='tabsF'>
    <ul>
    <li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>
      <b:loop values='data:labels' var='label'>
        <li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
      </b:loop>
    </ul>
    
    </div>
  </b:includable>
</b:widget>

If you use a style other than F, than make sure id='tabsF' reflects the correct tab, such as id='tabsE' for style E. Later, if you like a different design, just cut-and-paste the style's CSS code, then change this id again to reflect the change.

There you have it! Well-designed tabs from professionals (The Exploding Boy website) being integrated into the new Blogger Beta.

I would like to thank Ramani from Hackosphere for his contructive comments to make this tutorial more readable.

Have a nice day and see you next time,

Cheers,

Hoctro (9/2006)

Blogger Hack: Creating Thumbnail Pictures

2006-09-08T04:38:00.000-07:00

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

My First Blogger Template Attempt

2006-09-06T19:26:00.000-07:00

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

Welcome to my Blog

2006-09-02T08:04:00.002-07:00

Dear friend,

This blog started as a place for me to analyze musically the songs of the Vietnamese composer Phạm Duy, whom - during the last sixty-plus years - wrote at least more than a thousand songs, four tomes of Memoirs, many research and educational books, published many of his song books, and the list goes on. This (analyzing his songs) is still fun and meaningful as I will write some more articles about his music as time permits.

Then, as the new Blogger Beta was introduced in mid August 2006, I was mesmerized by its ease of use, its powerful templating design, and its lightning fast updating process. As a result, I wrote a series of eight articles in Vietnamese showing a newbie how to join the blogging experience with Blogger Beta.

Eventually, with my background in computing, I started to look into tweaking Beta's default template design. After just two years, and most of it I was in hiatus( Jun 2007 - Sept 2008), my blog becomes a good resource for tweaking Blogger widgets into even more meaningful ones. I am the author of the "Related Articles" widget, the "Tab View" widget, the "Label as Tabs" widget, the list goes on.

You are welcome to use any of my "hack" free of charge. Just remember to include the credit line at the end of the widget, to spread out my works even more.

Please leave your comments under the latest posts, since I disable the comments on most of my archived posts already. I'll try to address them if I could.

Thanks for stopping by and have a nice day,

Hoctro.