Membuat Menu Tab

Tutorial untuk merapikan dan menghemat tempat yaitu dengan menu tab view. Ukuran yang relatif kecil tapi bisa memuat banyak space.
Membuat menu dengan tab view memerlukan kode HTML yang lumayan panjang dan agak ribet. Tapi sebenarnya mudah jika serius mau mencobanya. Simak baik – baik tutorial ini dan yang paling penting jangan lupa untuk backup template terlebih dahulu.


   1.  Login blog Anda
   2.  Tuju Tata Letak.
   3.  Klik Edit HTML.
   4.  Jangan lupa backup template terlebih dahulu dengan mengklik Download Template Lengkap.
   5.  Kemudian letakkan kode javascript berikut sebelum kode </head>

<script src='http://www.geocities.com/sehatserasi72/tabview.js' type='text/javascript'/> 

   6.  Setelah itu letakkan kode berikut di atas kode ]]></b:skin>

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Utama Atas */

text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: “Verdana”, Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
} 


   7.  Kemudian Simpan Template.
   8.  Langkah selanjutnya, silakan klik Tata Letak.
   9.  Klik Elemen Halaman dan tambahkan Gadget.
  10. Pilih yang HTML / Javascript, dan tambahkan kode berikut kedalamnya.

<form action=”tabview.html” method=”get”>
<div id=”TabView”>
<div style=”width: 300px;”>
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div style=”width: 300px; height: 250px;”>

<div>
<div>
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div>
<div>
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div>
<div>
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type=”text/javascript”>
tabview_initialize(‘TabView’);
</script>

    11.  Dan yang terakhir simpan

Keterangan :

• Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan sobat sesuaikan dengan isi.
• Kode yang berwarna ungu silahkan Anda isi dengan judul – judul dari menu.
• Dan yang berwarna hijau, adalah isi dari menu. Anda bisa menambahkan link, gambar, banner, dll.

Selamat Mencoba

GOOD LUCK!

Untuk download file gunakan IDM yang bisa sobat cari di sini.. Segera lakukan download sebelum file terhapus.. Klik link download dan SKIP AD pojok kanan atas untuk melanjutkan proses..

.:::::::::: Artikel Terkait :::::::::::.

------------------------------------------------------------------------------------------------- Silahkan tinggalkan komentar dengan baik dan sopan Silahkan masukan komentar jika punya pertanyaan Silahkan laporkan jika menjumpai link yang error Silahkan sobat copy / paste jika bermanfaat -------------------------------------------------------------------------------------------------