Cara Membuat Menu Tab View

Minggu, 14 Agustus 2011

Nih sobat blogger Miftah mau sharing ilmu baru tentang Cara Membuat Menu Tab View.Ngomong-ngomong menu tab view itu apa ya?.Pasti beberapa dari kalian ada yang nggak ngerti menu tab view,menu tab view itu bentuknya seperti gambar disamping,menu tab view memiliki kelebihan yaitu hemat tempat,yaudah biar gak kelamaan langsung aja
kita mulai tapi sebelum itu usahakan follow blog saya dulu kalo udah follow baru kita mulai:

1.Login ke akun blogger anda
2.Pilih tab rancangan
3.Pilih Edit html
4.Back up dulu templatenya biar kalo salah bisa dikembaliin backup dengan cara klik "Download template lengkap"
5.Kemudian cari kode ]]></b:skin> (agar lebih mudah mencarinya gunakan f3)
6.Masukkan kode dibawah ini sebelum kode  ]]></b:skin>


/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {widht:100%;
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 110px; /* ukuran lebar menu */
text-align: center;
height: 30px; /* ukuran tinggi menu */
padding-top: 7px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #ccc; /* warna border menu */
border-bottom-width: 0;
margin:0px;
padding: 5px 0;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;; /* besar hurup menu */
background-color: #4c4c4c; /* warna latar menu */
color: #FFFFFF; /* warna hurup menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
div.TabView div.Tabs a.Active {
background-color: #FFFFFF; /* warna background menu aktif */
color: #000000;
}
div.TabView div.Tabs a:hover {
background-color: #999999; /* warna background menu hover */
color: #FFFFCC;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /* warna border kotak utama */
overflow: hidden;
background:#FFFFFF; /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 7px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 5px 0px;
font-size: 12px; /* besar hurup kotak utama */
}
/* tabview css end */
7.Pasang kode dibawah ini sebelum kode </head>

<script src='https://sites.google.com/site/webmiftah/js/tabview.js' type="text/javascript"/>

8.Kalo udah tinggal disimpan
LANGKAH DIATAS BELUM SELESAI SEKARANG KITA MULAI MEMBUAT KODE UNTUK MEMANGGIL TAB VIEW NYA

1.Login ke akun blogger anda
2. Pilih tab rancangan
3.Klik tab elemen laman
4.Klik tambah gadget
5.Kemudian pilih yang HTML Java/Script
6.Masukkan kode dibawah ini di kotak yang telah disediakan:



<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs"> 
Disini letakkan kode untuk menu tab 1 
</div>
<div style="width: 99%; height: 200px;" class="Pages">
<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 2 </div></div>
<!--Akhir Menu 1-->
<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 3 </div></div>
<!--Akhir Menu 2-->
<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 4 </div></div>
<!--Akhir Menu 3-->
</div></div></form>
<script type="text/javascript">tabview_initialize('TabView');</script>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"></div>
 


7.Kalo udah tinggal disimpan
NB:Kode yang ditulis tebal bisa diedit sendiri
Semoga bermanfaat
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di webmiftah.blogspot.com

18 komentar:

  1. dulu ketika masih make sidebar aku ngidam banget punya tab menu tapi ga kesampaian. sekarang karena make 1 kolom, jadi belum perlu. nanti deh siapa tahu saya perlu lagi, saya akan kemari nyolong trik :)

    BalasHapus
  2. wah, perlu dicoba yang satu ini,
    nice info

    BalasHapus
  3. Gak biusa brow..... gimana nih...

    BalasHapus
  4. agan miftah ngejelasin nya kurang jelas sih,,,!

    gan coba kunjungi ini !!
    lumayan jelas info nya !
    http://trik-tips.blogspot.com/2008/07/cara-membuat-menu-tab-view_31.html

    BalasHapus
  5. @anjarxmon:kemarin aku praktekin kok bisa ya???

    BalasHapus
  6. @anjarxmon:jangan buat SPAM disini dong X( lagian yang punya nya 'TIPS TRIK' itu bentuknya kurang bagus cuma bentuk warna doang kalo kayak gitu aku juga bIsa malah gak usah pake edit html langsung masukin javascript

    BalasHapus
  7. Sulit se Mas.....?
    gak cocok di blog gmn ?

    BalasHapus
  8. @Miftakhul F.(Mimif):iya kekurangannya beberapa template gak bisa dipasang script tersebut

    BalasHapus
  9. gan @Miftah,,,, aye minta maaf soal spam yg kmaren ye ?!?!?!? di maafin g ni ?!?!?!?
    gan @Miftah Bleh minta javascript yg kaya contoh gambar di atas tuh bleh g ?!?!?!?

    BalasHapus
  10. @anjarxmon:ya ane maafin ya gak papa kok boleh diambil

    BalasHapus

Posting Komentar