INFO SMF|Smart Multi Finance|Makassar
Butuh Dana Dengan Hanya Menjaminkan BPKB Anda Uang Langsung Cair!!! Call : 085 399 064 915

06/06/11

Cara Membuat Menu Tab View

Bagaimana carana'  membuat Tab View Di' (Biasanya nanyanya gini: "Daeng cara membuat menu yg kayak punyanu ? Tabview itu sangat berguna sekali, karena dengan ukuran kotak yang relatif kecil tapi bisa memuat isi yang buanyak buaanget. Sebenarnya dah dari dulu pingin posting tentang itu, tp karena yg dulu cara pasanganya agak rumit gitu jadi belum bisa aku Postingkan. Trus akhirnya aku menemukan metode baru yang lebih mudah dalam pembuatanna. Cara yang ini mungkin mirip dengan punyanya o-om, tp scriptna/kodena anjo agak beda. Dan nakke dapat script ini juga bukan dari o-om lho :D

Tab view itu contohnya seperti ini :




Beginilah cara untuk membuat menu tab view tersebut

  1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
  2. Kemudian cari kode ini ]]></b:skin>
  3. Kemudian COPAST dan masukkan kode berikut di bawah ini sebelum kode ]]></b:skin> atau kedalam tag CSS.

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. Perhatikan 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 yaitu pasang kode berikut 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 km letakkan Manu Tab
          View ini.
      9. Inilah script yg harus daeng 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.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut
   dibawahnya.