Cara Membuat Menu Tab View

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