Tab Slider dg jQuery

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 :

+ lihat kode copy code print ?

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;
}

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 :

+ lihat kode copy code print ?

$(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>

$(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

+ lihat kode copy code print ?

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

<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..

3 Comments:

----------------- Ratasoe Say.. On April 25, 2010

Wah sobatku niy..tdk hnti2x sll kreatif..salut dh..semangat y sob..sukses sll ya..

[ X ]

To Reply to this comment

Please CoPas of the following lines : Example:

@1125989795316480595.0
My first line Comments

@1125989795316480595.0

is the first line of your comment.

----------- ----------- Girant_31 Said :
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.

----------------- Ratasoe Say.. On April 26, 2010

Brkunjung lg sob, wah info ap lg niy sob?

Please CoPas of the following lines : Example:

@8195366013965729529.0
My first line Comments

@8195366013965729529.0

----------------- Girant_31 Say.. On April 26, 2010

@Ratasoe Apa ya mas??? ane lg mw UTS mas.. pusing hehe..

Maaf ya mas blm bs berkunjung balik..
Insya Allah nanti ane sempetin..

Maaf ya mas..

Please CoPas of the following lines : Example:

@6564713486028105116.0
My first line Comments

@6564713486028105116.0

Komentar Yuuuk..

Silahkan berkomentar di postingan ini. (Gratis)
Jika Sobat ingin membalas komentar seseorang,
Sobat bisa menggunakan fasilitas reply dengan cara mengawali komentar Sobat pada baris pertama dengan:
@Kode Angka Komentar

Contohnya Penulisan Komentar:
@7203927038009495854.0
My first line Comments