Memasang tab menu

kali ini mau bagi2 tips nih sobat blogger. mungkin udah banyak yang share tips ini. cara memasang tab menu. Hmm, tapi berbeda lo ma kebanyakan yang share tips cara pasang tab menu lainnya..hehe.. Sebelumnya, di blog kalian udah ada page peelnya belum, klo belum bisa liat cara pasang page peel.hehe.. ok, langsung aja ke demonya, kalian bisa liat disini. berikut juga aku kasih gambar previewnya :



Nah udah pada tahukan perbedaannya?hehe. ok langsung tancep aja ke cara pasang tab menu.

1. Menu Dashboard, klik Tata Letak, klik Edit HTML.
2. Copy Paste kode berikut di atas kode ]]></b:skin>

ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--ukuran tinggi--*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 300px; /*--ukuran lebar kotak (harus sama dengan lebar content)--*/
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 31px; /*--Vertically aligns the text within the tab--*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*--Pull the list item down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
background: #fff;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}

.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 300px; /*--ukuran lebar content (harus sama dengan lebar kotak)--*/
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}





***Keterangan:
Lebar (yang berwarna biru ukurannya harus sama)

3. Copy paste kode berikut di atas kode </head>

<script src='http://code.jquery.com/jquery-latest.js'

type='text/javascript'/>
<script type='text/javascript'>

$(document).ready(function() {

//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {

$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content

var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});

});

</script>

4. Klik Simpan.

Setelah itu klik tata Letak, Tambah Gadget, Html/Javascript. Kemudian masukkan kode berikut ini :

<ul class="tabs">
<li><a href="#tab1">JUDUL MENU</a></li>
<li><a href="#tab2">JUDUL MENU</a></li>
</ul>

<div class="tab_container">


<div id="tab1" class="tab_content">

ISI KONTEN DISINI

</div>

<div id="tab2" class="tab_content">

ISI KONTEN DISINI

</div>


</div>

kalau mau nambahin menu tabnya kalian bisa lihat contoh ini:

<ul class="tabs">
<li><a href="#tab1">JUDUL MENU</a></li>
<li><a href="#tab2">JUDUL MENU</a></li>
<li><a href="#tab3">JUDUL MENU</a></li>
</ul>

<div class="tab_container">


<div id="tab1" class="tab_content">

ISI KONTEN DISINI

</div>

<div id="tab2" class="tab_content">

SI KONTEN DISINI

</div>

<div id="tab3" class="tab_content">

ISI KONTEN DISINI

</div>


</div>






***Keterangan :
Kalian tinggal nambahin kode yang warna hijau, jangan lupa perhatikan dan sesuaikan kode yang berwarna merah juga.

Gampang kan caranya?hehe..selamat mencoba kawan!