Contoh pada gambar diatas, Tab slider ini sama hal nya dengan tab view yang sering sobat liat selama ini..
Karena mereka masih sodaraan gitu loh.. hehehe..


Bedanya Tab slider ini tidak menggunakan fasilitas "Click menu tab" untuk membuka isi tab nya.. melainkan cukup dengan menggeser pointer or cursor kita ke arah tab menu tab yang akan qita tuju, maka isi dari menu tab akan terslide dg sendirinya...

Untuk lebih jelasnya sobat bisa lihat bemonya (demonya mksd ane.. hehehe..) :

Demo Tab View SliderKlik disini untuk melihat demo Tab View Slider

Gimana ???
Begitu sobat letakan pointer sobat diatas tab nya, Isi dari menu tab terslide/terbuka dg sendirinya bukan??

Langsung saja..
Langkah-langkahnya :
1. Seperti biasa login dulu ke blogger.com
2. Cari menu LAYOUT ->> Edit HTML, centang kotak kecil disamping teks Expand Template Widget
3. Cari kode ]]></b:skin>
Dan ganti dengan kode berikut :

body {
        font-family:arial;
        font-size:12px;    
    }
    
    a {
        color:#333;
        text-decoration:none;
        display:block;
    }

    a:hover {
        color:#888;
        text-decoration:none;
    }
    
    #moving_tab {
        /* hide overlength child elements*/
        overflow:hidden;
        
        /* all the child elements are refering to this width */
        width:300px;

        /* fix ie 6 overflow bug */
        position:relative
        
        /* styling */
        border:1px solid #ccc;    
        margin:0 auto;
    }
    
        #moving_tab .tabs {
            /* enable absolute position for .lava */
            position:relative;    
            height:30px;
            
            /* styling */
            padding-top:5px;
            cursor:default;
        }
    
        #moving_tab .tabs .item {
            /* enable z-index */
            position:relative;
            z-index:10;
        
            /* display in one row */
            float:left;
            display:block;

            /* width = half size of #moving_tab */
            width:150px;
            
            /* height = height of .tabs */
            text-align:center;
            font-size:14px;
            font-weight:700;    
        }

        #moving_tab .tabs .lava {
            /* Set it to absolute */
            position:absolute;
            top:0; left:0;
            
            /* display the lava in bottom most layer */
            z-index:0;        
                
            /* width = half size of #moving_tab */
            width:150px;

            /* height = height of .tabs */
            height:30px;
            
            /* styling */
            background:#abe3eb;

        }
        
        #moving_tab .content {
            /* enable absolute position for .panel */    
            position:relative;
            overflow:hidden;
            
            /* styling */
            background:#abe3eb;
            border-top:1px solid #d9fafa;
        }
        
        #moving_tab .panel {
            /* width is width of #moving_tab times 2 */
            position:relative;
            width:600px;
        }
        
        #moving_tab .panel ul {
            /* display in one row */
            float:left;
            
            /* width is the same with #moving_tab */
            width:300px;
            
            /* remove all styles */
            padding:0;
            margin:0;
            list-style:none;
            

        }
            /* styling */
            #moving_tab .panel ul li {
                padding:5px 0 5px 10px;    
                border-bottom:1px dotted #fff;
            }
    ]]></b:skin>
4. Cari kode </head>
Dan ganti dg kode berikut :
    


$(document).ready(function () {
    //set the default location (fix ie 6 issue)
    $('.lava').css({left:$('span.item:first').position()['left']});       $('.item').mouseover(function () {
        //scroll the lava to current item position
        $('.lava').stop().animate({left:$(this).position()['left']}, {duration:200});
        
        //scroll the panel to the correct content
        $('.panel').stop().animate({left:$(this).position()['left'] * (-2)}, {duration:200});
    });
    
});
</head>

Kode no 4 ini merupakan file.js dari tab slider ini.
dan kita sudah membahas bagai mana memasang file.js di template qita pada postingan saya sebelumnya DISINI.

5. Layout --> Page Elements
Pilih tempat yang kamu inginkan kemudian Add a Gadget
pilih HTML/JavaScipt dan taruh code dibawah didalamnya

<div id="moving_tab">
<div class="tabs">
<div class="lava">
</div>
<span class="item">Tab 01</span>
<span class="item">Tab 02</span>
</div>               
<div class="content">                        
<div class="panel">                        
<ul>
<li><a href='#'>Isi Tab 1</a></li>
<li><a href='#'>Isi Tab 1</a></li>
<li><a href='#'>Isi Tab 1</a></li>
<li><a href='#'>Isi Tab 1</a></li>
<li><a href='#'>Isi Tab 1</a></li>
</ul>
<ul>
<li><a href='#'>Isi Tab 2</a></li>
<li><a href='#'>Isi Tab 2</a></li>
<li><a href='#'>Isi Tab 2</a></li>
<li><a href='#'>Isi Tab 2</a></li>
<li><a href='#'>Isi Tab 2</a></li>
</ul>
</div>
</div>
</div>


Isikan link dan nama link sesuai keinginan sobat semua..
Selesai..

Source Code Tab View SliderKlik disini untuk mengambil semua source code Tab View Slider

Semoga bermanfaat..