Kali ini saya akan menjelaskan cara membuat Tab Menu. Tab Menu sangat bermanfaat sekali karena kita bisa menghemat ruang yang ada di blog kita dan kita juga bisa meletakan beberapa gadget ataupun beberapa banner ataupun teks didalam halaman yang sama tetapi dipisahkan oleh kolom tersendiri dan kolom inipun hanya bisa dibuka bergantian.

Sebenarnya memang agak rumit dalam pembuatan Tab Menu ini dikarenakan banyaknya script yang harus kita copy dan paste ke template maupun gadget, tapi bagi anda yang suka ngutak-ngatik script, saya pikir bukan hal baru bagi anda. Andapun bisa meedit script tersebut untuk menyesuaikan dengan halaman blog anda. Untuk itu silahkan ikuti langkah-langkah berikut ini :

Langkah Pertama :

1. Login ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari di dalam template anda kode </head>
6. Persis sebelum kode tersebut, pastekan script di bawah ini

<script src='http://h1.ripway.com/pinginbelajar/campuran/menu_tab.js' type='text/javascript'/>

7. Cari lagi di dalam template anda kode ]]></b:skin>
8. Persis sebelum kode tersebut, pastekan script di bawah ini

div.TabView div.Tabs { width: 100%; overflow: hidden; border-bottom: 0px solid #000000; font: bold 13px Arial; list-style-type: none; }
div.TabView div.Tabs a { float: left; display: block; text-decoration: none; margin-right: 2px; margin-bottom: 2px; padding: 3px 3px 3px 3px; color: #FFFFFF; background: #0B615E; }
div.TabView div.Tabs a:hover { color: #000000; background:#DF0101; }
div.TabView div.Tabs a.Active { color: #000000; background:#2E2EFE; }
div.TabView div.Pages { width: 100%; overflow: hidden; clear: both; border: 0px solid #E6E6E6; margin: 25px 0px 5px 5px; padding: 0px 0px 0px 0px; }
div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow: hidden; }
div.TabView div.Pages div.Page div.Pad { padding: 0px 0px; }

9. Klik Simpan Template

Langkah Kedua :

1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilihan HTML/JavaScript
6. Pastekan ke dalam kolom Konten script di bawah ini

<div style="overflow:auto; width:100%px; height:100%px; padding:5px 5px 5px 5px; border:1px solid #999999;">

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
<a>Judul 4</a>
<a>Judul 5</a>
</div>
<div style="width: 100%; height: 250px;" class="Pages">

<div class="Page">
<div class="Pad">

Entri data anda di sini yang akan tampil di kolom "Judul 1"

</div>
</div>


<div class="Page">
<div class="Pad">

Entri data anda di sini yang akan tampil di kolom "Judul 2"

</div>
</div>


<div class="Page">
<div class="Pad">

Entri data anda di sini yang akan tampil di kolom "Judul 3"

</div>
</div>


<div class="Page">
<div class="Pad">

Entri data anda di sini yang akan tampil di kolom "Judul 4"

</div>
</div>


<div class="Page">
<div class="Pad">

Entri data anda di sini yang akan tampil di kolom "Judul 5"

</div>
</div>


</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
</div>

7. Klik Simpan

Kode script di atas yang di awali dengan tanda # menyatakan warna, seperti #000000 #FFFFFF #999999 #2E2EFE #E6E6E6 #0B516E #DF0101, silahkan anda ganti dengan warna pilihan anda, untuk mendapatkan variasi kode warna silahkan anda surfing di sini [ html-color-codes ]

Jika pada saat ini anda tidak mendapatkan hasilnya sebagaimana yang telah saya tulis di atas, berarti file JavaScript tersebut sudah OverLoad. Silahkan surfing [ di sini ] untuk mendapatkan file JavaScript terbarunya.

Selamat mencoba, semoga bermanfaat

Artikel Terkait di Bawah posting