Cara Membuat Black Tab Navigasi

By Unknown

Sabtu, 17 Desember 2011

Mungkin tab widget ini kurang lebih sama cara kerjanya dengan yang lain, namun saya yakin kalau bentuk tampilannya mempunyai daya tarik tersendiri dan pembuatannya cukup mudah. Sekarang mari kita bahas cara membuat black tab navigasi, ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan
Masukkan kode berikut di atas kode </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
</script>
<script>
    $(document).ready(function() {
        $("#tabs").tabs();
    });
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/vader/jquery-ui.css" type="text/css" />

Selanjutnya klik Simpan Template
Klik lagi Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<div id="tabs">
<ul><li><a href="#tabs-1">Tab1</a></li><li><a href="#tabs-2">Tab2</a></li><li><a href="#tabs-3">Tab3</a></li></ul>
<div id="tabs-1">MASUKKAN SCRIPT ATAU TULISAN DI SINI</div>
<div id="tabs-2">MASUKKAN SCRIPT ATAU TULISAN DI SINI</div>
<div id="tabs-3">MASUKKAN SCRIPT ATAU TULISAN DI SINI</div>
</div>

Klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"

Share :

Facebook Twitter Google+