Multi Tab Widget For Blogger/Blogspot Blogs(easiest way)

Multi tab Widget(tab view widget)  is a must widget for every blog beCoz of it's unbeaten features.It is by far most easy way of getting tab view there are hundreds available on the net just use google which include editing CSS at 2 or more places and playing with javascrpts but this one is sure for simple and surely working.

Instructions-

1.Copy the code given below and paste it in notepad.

    <style type="text/css">
    div.TabTampil div.TTs
    {height: 24px; overflow: hidden; }
    div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
    { background-color: #0084ce; }
    div.TabTampil div.Halamans
    { clear: both; border: 1px solid #0084ce; overflow: hidden; background-color: #ffffff;}
    div.TabTampil div.Halamans div.Halaman
    { height: 100%; padding: 0px; overflow: hidden; }
    div.TabTampil div.Halamans div.Halaman div.Alas
    { padding: 3px 5px; }
    div.TabTampil div.TTs a
    { border-left:1px solid #0084ce; border-right:1px solid #0084ce; border-top:1px solid #0084ce; border-bottom:0px solid#0084ce; float: left;
    display: block; width: 79px; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;
    font-size: 11px; font-weight: 900; color: #000000}
    </style>

    <form action="tabtampil.html" method="get">
    <div id="TabTampil" class="TabTampil">
    <div style="width: 300px;" class="TTs"> <a>Tab 1</a> <a>Tab 2</a>

    <a>Tab 3</a></div>
    <div style="width: 300px; height: 310px;" class="Halamans">

    <div class="Halaman">
    <div class="Alas">

  Tab 1 content goes here

    </div>
    </div>

    <div class="Halaman">
    <div class="Alas">

   Tab 2 content goes here

    </div>
    </div>

    <div class="Halaman">
    <div class="Alas">

    Tab 3 content goes here
   

    </div>

    </div>
    </div>

    </div></form>

    <script style="text/javascript" src="http://sites.google.com/site/tntbystc/Home/tabwidget-smart.txt?attredirects=0"></script>
    <script type="text/javascript">tabtampil_inisial('TabTampil');</script>

2.Customize according to your need.

#0084ce : This is the background colour of the Tabs. The Default one is blue. If you want to change it to a different colour of your choice then use this colour chart

#0084ce :  This is the colour of the outline/frame of your multi tab widget. The default one is blue you can customize it to a colour of your choice using the same colour chart mentioned above.

#ffffff : This is the background colour of the main body of your widget. This is where you will add content in place of the texts Tab x content goes here The default one is white. Use again the colour chart to modify the colour. If you want a black background use #000000

#0084ce : This is the colour of the borders around those rectangular tabs. The default one is blue.

#000000 : This is the colour of the text/font that you will write to name your tabs. In other words, it’s the colour of your tab titles. The default one is black. If you want to choose a Black background colour for your tabs then choose a white coloured font/text i.e #ffffff

Tab 1 , Tab 2 , Tab 3 : Replace these with your tab titles

Tab 1 content goes here :

Tab 2 content goes here :

Tab 3 content goes here : Here goes the codes of your content/widgets, which can be your recent comments widget, recent posts widget, any written text, a picture etc. For example, to add a recent comments widget to the first tab, name Tab 1 as Comments and replace Tab 1 content goes here with the HTML code of your recent comments widget.

3.Adding it to sidebar.

• 
  
  Log into your blogger account
  
  
  
  
• 
  
  Go to Layout > Page Elements
  
  
   
  
  
  
  
  

• Click on Add a Gadget

• Then Choose HTML/JavaScript Widget from the widget list that blogger provides.

Now paste your customized code into this widget by leaving the title empty. Hit Save and You are Done!