But as it is a manual tabbed widget then you’ll need to put content manually inside each tab. If you want to know how to add more customized tabbed navigation widget then you can see here. But you’ll need to customize its layout manually as I see that it’s less cute than what you’ll read from this post.

So prepare your Notepad, open your template dashboard, and I’ll tell you how to rock your blog using this tabbed widget. I’ll try to keep this explanation simple and easy to use. Hope you can deploy this tabbed widget easily even for a newbie kid (but I’m sure you are an expert. Aren’t you?). But don’t forget to backup your template first.

First place these two codes right before your </head> tag (you’ll need to locate this tag first). Then save your template.

<link href="http://www.hotlinkfiles.com/files/965444_qdnvr/css-tab.css" rel="stylesheet" type="text/css" media="screen" />
<script src="http://www.hotlinkfiles.com/files/965443_xf1tr/domtab.js" language="JavaScript" type="text/JavaScript"></script>

Next grab these codes below or may be you’ll need to edit using text editor (Notepad).

<!-- mulai di sini -->
<div class="domtab">
<ul class="domtabs" id="d-nav">
<li><a href="#t1" class="default">1st Tittle</a></li>
<li><a href="#t2">2nd Title</a></li>
<li><a href="#t3">3rd Title</a></li>
</ul>
<div id="d-con">
<div>
<a id="t1" name="t1"></a>
<ul>
<!-- duplicate here -->
<li><a href="http://blogtemplate20.blogspot.com/2008/01/6-most-wanted-web-20-fonts-free.html">6 Most wanted web 2.0 free fonts</a>
</li>
<!-- end duplicate -->
<li><a href="http://blogtemplate20.blogspot.com/2008/01/web-20-3d-icons-pack-download.html">Web 2.0 3D Icons Pack download</a>
</li>
<li>
<script type="text/javascript"><!--
  google_ad_client="pub-5436252557812771";
  google_ad_host="pub-1556223355139109";
  google_ad_width=300;
  google_ad_height=250;
  google_ad_format="300x250_as";
  google_ad_type="text";
  google_color_border="FFFFFF";
  google_color_bg="FFFFFF";
  google_color_link="000000";
  google_color_url="CCCCCC";
  google_color_text="CCCCCC";
  //--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</li>
<li><a href="http://blogtemplate20.blogspot.com/2008/01/7-tools-to-create-buttons-for-blog.html">7 Tools to Create web 2.0 Bookmarker buttons</a><br />
</li>
<li><a href="http://blogtemplate20.blogspot.com/2008/01/12-socialize-icons-by-kerbero.html">12+ Socialize Icons download</a><br />
</li>
<li><a href="http://blogtemplate20.blogspot.com/2008/01/39-glossy-knob-buttons.html">39+ Glossy knob buttons download</a><br />
</li>
</ul>
</div>
<div>
<a id="t2" name="t2"></a>
<ul>
<li><a href="http://blogtemplate20.blogspot.com/2007/11/3-steps-how-to-install-new-template-at.html">Installing New Blogger template</a><br />
</li>
<li><a href="http://blogtemplate20.blogspot.com/2007/11/changing-classic-blogger-template.html">Installing Classic Blogger template</a><br />
</li>
<li><a href="http://blogtemplate20.blogspot.com/2008/01/simple-glossy-web-20-blog-logo-tutorial.html">Design web 2.0 glossy Blog Logo using Photoshop</a><br />
</li>
<li><a href="http://blogtemplate20.blogspot.com/2008/01/add-blog-rating-stars-in-blogger.html">10 Steps How to add Blog rating stars</a><br />
</li>
<li><a href="http://blogtemplate20.blogspot.com/2008/02/chat-with-your-readers-with-meebome.html">Adding MeeboMe widget to chat with readers</a>
</li>
</ul>
</div>
<div>
<a id="t3" name="t3"></a>
<ul>
<li><a href="http://blogtemplate20.blogspot.com/2008/01/get-paid-to-upload-and-share-files-from.html">Getting Paid for share from Ziddu.com</a><br /></li>
<li><a href="http://blogtemplate20.blogspot.com/2008/02/make-shopping-blog-and-be-e-store.html">Make a Shopping blog and be a e-store keeper</a><br /></li>
<li><a href="http://blogtemplate20.blogspot.com/2008/02/monetizing-blog-images-and-photos.html">Monetizing Blog images and Photos</a><br /></li>
<li><a href="http://blogtemplate20.blogspot.com/2008/02/healthy-list-to-earn-extra-blogging.html">8+ Resource to earn extra Blogging money</a><br /></li>
<li><a href="http://www.blogsvertise.com/?rid=b11489"><img src="http://www.blogsvertise.com/images/ads/advertising/150x150f.gif" alt="Advertise On This Blog" border="0"></a>
</li>
<li><a href="http://www.smorty.com/?B=7452" target="_blank"><img src="https://members.smorty.com/ReferralProgram/2007117181756.gif" alt="Blog Advertising - Get Paid to Blog" width="200" height="100" border="0"></a></li>
</ul>
</div>
</div>
</div>
<!-- habis di sini -->

Codes above are what I’m currently using in this blog. Each content starts with <li> and ends with </li> tags. Then you’ll need to duplicate that line.

After several editing now just place those codes anywhere you like inside your Blogger template. If you want to do some tweaking on its layout, just download the style sheet here then upload again to hosting server. For further explanations that you still can’t understand please drop your comments below this post. And here what I've got by using tabbed widget with some text inside a paragraph.