Cara Membuat Menu Tab View

 


Langsung sja sya jelaskan langkahnya ya gan:
  • Login ke akun blogger anda

  • Pilih tab rancangan

  • Pilih Edit html

  • Back up dulu templatenya biar kalo salah bisa dikembaliin backup dengan cara klik "Download template lengkap"

  • Kemudian cari kode ]]></b:skin> (agar lebih mudah mencarinya gunakan Ctr+f3)

  • 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 */
  • Pasang kode dibawah ini sebelum kode </head>

<script src='https://sites.google.com/site/webmiftah/js/tabview.js' type="text/javascript"/>
  • Kalo udah tinggal disimpan LANGKAH DIATAS BELUM SELESAI SEKARANG KITA MULAI MEMBUAT KODE UNTUK MEMANGGIL TAB VIEW NYA

  • Login ke akun blogger anda

  •  Pilih tab rancangan

  •  Klik tab elemen laman

  • Klik tambah gadget

  •  Kemudian pilih yang HTML Java/Script

  •  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>
  • Kalo sudah tinggal disimpan

Tags: Blogger

Related Cara Membuat Menu Tab View: