How to make Tab View Pake clear icon tabs view of this very useful in the web world due to not wear a lot of space or space saving
Among the various tabber tabs one of which we will study how to make it now, is tabber tab with the menu structure using the icons.
Okay directly to the tutorial making tabber tab or the tab view menu with JQuery:

Step One:
1. After the sig in on your blogger account>>> on the dashboard>>> Click Layout>>> Edit HTML

2. Add the following jQuery script or code before the tag </ head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
note: For the friend who never added or already exist in your template JQuery script ignore it then the second step,
3. Then add the following script under the same JQuery script above:

<script type='text/javascript'>

$(document).ready(function() {  

  //Get all the LI from the #tabMenu UL

  $(&#39;#tabMenu &gt; li&#39;).click(function(){

    //perform the actions when it&#39;s not selected

    if (!$(this).hasClass(&#39;selected&#39;)) {  

    //remove the selected class from all LI  

    $(&#39;#tabMenu &gt; li&#39;).removeClass(&#39;selected&#39;);

    //Reassign the LI

    $(this).addClass(&#39;selected&#39;);

    //Hide all the DIV in .boxBody

    $(&#39;.boxBody div&#39;).slideUp(&#39;1500&#39;);

    //Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.

    $(&#39;.boxBody div:eq(&#39; + $(&#39;#tabMenu &gt; li&#39;).index(this) + &#39;)&#39;).slideDown(&#39;1500&#39;);

  }

  }).mouseover(function() {

    //Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest  

    $(this).addClass(&#39;mouseover&#39;);

    $(this).removeClass(&#39;mouseout&#39;); 

  }).mouseout(function() {

    //Add and remove class

    $(this).addClass(&#39;mouseout&#39;);

    $(this).removeClass(&#39;mouseover&#39;);  

  });

    //Mouseover with animate Effect for Category menu list

  $(&#39;.boxBody #category li&#39;).click(function(){

    //Get the Anchor tag href under the LI

    window.location = $(this).children().attr(&#39;href&#39;);

  }).mouseover(function() {

    //Change background color and animate the padding

    $(this).css(&#39;backgroundColor&#39;,&#39;#888&#39;);

    $(this).children().animate({paddingLeft:&quot;20px&quot;}, {queue:false, duration:300});

  }).mouseout(function() {

    //Change background color and animate the padding

    $(this).css(&#39;backgroundColor&#39;,&#39;&#39;);

    $(this).children().animate({paddingLeft:&quot;0&quot;}, {queue:false, duration:300});

  });

    //Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.

  $(&#39;#.boxBody li&#39;).click(function(){

    window.location = $(this).children().attr(&#39;href&#39;);

  }).mouseover(function() {

    $(this).css(&#39;backgroundColor&#39;,&#39;#888&#39;);

  }).mouseout(function() {

    $(this).css(&#39;backgroundColor&#39;,&#39;&#39;);

  });    

});

</script>

4. Next add the following CSS code on the tag or code ]]></ b: skin>

#tabMenu {margin:0;    padding:0 0 0 15px;list-style:none;}

#tabMenu li {float:left;height:32px;width:39px;cursor:pointer;cursor:hand}

/* this is the button images http://amatullah83.blogspot.com*/

li.comments {background:url(http://sites.google.com/site/amatullah83/bg/tabComment.png) no-repeat 0 -32px;}

li.posts {background:url(http://sites.google.com/site/amatullah83/bg/tabstar.png) no-repeat 0 -32px;}

li.category {background:url(http://sites.google.com/site/amatullah83/bg/tabFolder.png) no-repeat 0 -32px;}

li.famous {background:url(http://sites.google.com/site/amatullah83/bg/tabHeart.png) no-repeat 0 -32px;}

li.random {background:url(http://sites.google.com/site/amatullah83/bg/tabRandom.png) no-repeat 0 -32px;}

li.mouseover {background-position:0 0;}

li.mouseout {background-position:0 -32px;}

li.selected {background-position:0 0;}

.box {width:227px}

.boxTop {background:url(http://sites.google.com/site/amatullah83/bg/boxTop.png)no-repeat;height:11px;clear:both}

.boxBody {background-color:#282828;}

.boxBottom {background:url(http://sites.google.com/site/amatullah83/bg/boxBottom.png) no-repeat;

    height:11px;}

.boxBody div {display:none;}

.boxBody div.show {display:block;}

.boxBody #category a {display:block}

/* styling for the content*/

.boxBody div ul {    margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(http://sites.google.com/site/amatullah83/bg/arrow.gif)}

.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer;font-size:10px; color:#DDDDDD;text-decoration: none;}

.boxBody div ul li.last {border-bottom:none}

.boxBody div li a{font-size:10px; color:#DDDDDD;text-decoration: none;}

.boxBody div li span {    font-size:8px;color:#9F9F9F;}

/* IE Hacks */

*html .boxTop {margin-bottom:-2px;}

*html .boxBody div ul {margin-left:10px;padding-left:15px;}

Note the CSS code above still you can modify to suit your template to help identify the CSS property above see the following screenshot:

Another image icons that can be friend use:
For his body background, wrote his own search
5. Save Template
Step two:
Still on the menu layout>>> click on a page element>>> add gadget>>> Select the HTML / JavaScript

<div class="box">

  <ul id="tabMenu">

    <li class="posts selected"></li> <!-- default button-->

    <li class="comments"></li>

    <li class="category"></li>

    <li class="famous"></li>

    <li class="random"></li>

  </ul>

  <div class="boxTop"></div>

  <div class="boxBody">

      <!-- default page-->

    <div id="posts" class="show">

      <ul>

        <li>Post 1</li>

        <li>Post 2</li>

        <li class="last">Post 3</li>

      </ul> 

    </div> 

    <div id="comments">

      <ul>

        <li>Comment 1</li>

        <li>Comment 2</li>

        <li class="last">Comment 3</li>

      </ul>

    </div>

     <div id="category">

         <ul>

           <li>Category 1</li>

           <li>Category 2</li>

        <li class="last">Category 3</li>

         </ul> 

       </div>

      <div id="famous">

      <ul>

        <li>Famous post 1</li>

        <li>Famous post 2</li>

        <li class="last">Famous post 3</li>

      </ul> 

    </div>

    <div id="random">

      <ul>

        <li>Random post 1</li>

        <li>Random post 2</li>

        <li class="last">Random post 3</li>

         </ul>   

    </div>       

  </div>

  <div class="boxBottom"></div>

</div>