Wednesday, March 25, 2009

Tabview for Space Efficiency

When I roam the internet searching for a good template, I found a blogger template converted from Wordpress themes by Falcon Hive. Template that is given the title Zinmag Remedy have a very stunning look for me. One part that made me very interested in is the tabber at the bottom of the posting area, and I think with the tabber then this blog could use space more efficiently, just imagine if the three widgets that usually must be in a blog (ie: Recent Post, Category/Labels and Blog Archive) are displayed in the form of tabber then you can save your blog space for another valuable widgets or banners. In addition, another advantage of Tabber is make blog have more dynamic look.

Tabber widget was first introduce by Hactro in Blogger, adopted Tabview Yahoo Widget. But this widget is too complicated to install on my blog because of my limited knowledge of Javascript. Then I download the Zinmag Remedy template from Falcon Hive to learn how to make this tabber view, this lead me to sites that provide tutorials of making tabber view at barelyfitz.com. Create the tab view is not too difficult, just download the javascript file, add the style in the head section and add the HTML code on the body section where you want the tab view is visible.

Here is how to install it.

STEP 1: Save your current template.
Go to the tab Layout | Edit HTML in your Blogger Dashboard and download the template in XML format to the hard disk. If the modification is not appropriate that you want to upload your template again.

STEP 2: Download the Javascript.

Copy the Javascript file below, paste in notepad and save with .js extension than upload to your blog hosting.



or just download at http://www.barelyfitz.com/projects/tabber/tabber.js

STEP 3: Copy and Paste Tabber Style.
Copy the style below paste on your template, make sure you paste this style in the head section, make some modification do match your template style.



STEP 4: Copy and Paste HTML code.
Copy the HTML code below paste on your template's body section.



You can change the tab Id in accordance with your wishes, and add the widgets you want to by change the tag <p> above.
Don't forget to add
<script type="text/javascript" src="link to your tabber.js file">
</script>
above tabber-div.

Now your blog have a tabber, have a nice try.
Read more...

2 comments:

  1. Seems like there was missing link in this post, but I already fixed it.

    ReplyDelete
  2. That is excellant! I like the tabs you have in the right side bar, very sleek.

    ReplyDelete