Selamat Datang
blognyaipank

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!

6 komentar:

Firmansyah Thok mengatakan...

bro maksudnya yang "ISI KONTEN DISINI" tuh apa?
dan gimana caranya masukinnya....

balas diblogku http://leaderbisnis.blogspot.com
atau http://firmantekaje1.blogspot.com

blognya ipank mengatakan...

@leader bisnis : maksudnya bisa diisi objek apa aja sob, seperti daftar isi blog, widget2, shoutmix,dll

Unknown mengatakan...

pas tambah gadget itu lhow...
kan ada ISI KONTEN DISINI...
itu gimana naruhnya?
n pakek html tha?
bales boz....

blognya ipank mengatakan...

@basket is my life: nah,tinggal copy paste aja semua kodenya sob.. trus tulisan "ISI KONTEN DISINI" diganti, kamu bisa ganti apa aja, misal script statistik blog, foto, dll..

Anonim mengatakan...

thank ya saya sudah mengikuti langkah2nya
dan ok bnget mas.....!
tapi kok waktu saya pasang Tap 3 kok turun kebawah mas ?,... bisa ngak kita tarok lurus kesamping,...

MS Ilman mengatakan...

.thx mas. buat info.a

Posting Komentar

Silahkan meninggalkan komentar Anda, apabila Anda tidak ingin diketahui identitasnya, Anda bisa memberi komentar sebagai Anonim. komentar yang mengandung SARA tidak akan ditampilkan.