14 Agt 2011

Cara membuat menu tab view




 Mau punya menu tab view ky diatas??
selain indah dipandang mata juga menghemat ruangan kosong di blog sobat,,dengan istilah lain ''one in banyak'' hahahahhaha,,,maksud saya satu menu tapi dengan isi yang banyak,,oke cukup sekian dan terima kasih,,loh????
kembali lagi ke masalah kwkwkwkwk langsung aja deh....

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini
]]></b:skin>
3. Kemudian masukkan kode dibawah ini sebelum atau diatas kode
]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* 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;
}


4. text-text yang berwarna merah itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode2 warna silahkan lihat disini
5. Langkah selanjutnya  pasang kode dibawah ini sebelum kode
</head>

 <script src='http://kendhin.890m.com/blog/tabview.js' type='text/javascript'/>

6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan sobat letakkan Manu Tab View ini.
9. Inilah script yg harus sobat pasang :



<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>

</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />

</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />

</div>
</div>

<div class="Page">
<div class="Pad">
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>

Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.


oke cukup sekian dan selamat mencoba,,,

1 komentar:

  1. Yuups, navigasi yg keren-simple-n ga' bikin penuh blog ya sob.. keren nih

    BalasHapus

Silakan ketik sepatah dua patah kata jika anda menyukai tulisan ini, semoga bermanfaat

saya akan menerima apapun kritik dan saran dari anda demi kemajuan blog ini.