Sengaja ane review lg neg pos, coz Sulit jg untuk menerangkan tab view slider ini..
Jadi begini sobat semua.. (Khususnya sobat EGE, sebagai pemohon post ini).
Jd intinya seh, tab view slider ini sama dg tab view biasa..
Hanya saja penggunaanya tanpa sobat click cursor untuk membuka isi tab.. cukup letakan pointer sobat diatas nama tab masing2..

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


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


Nah sekarang 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 :

bodie {
        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>

Perlu di ingat, 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 waktu itu 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..


Semoga bermanfaat..