English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

.::Daftar Isi::.

.::You Follow I Follback::.

Rabu, 23 Februari 2011

Cara membuat menu tab View


Bagaimana cara membuat menu tab view seperti diatas:

Seperti biasa dalam keadaan loggin, klik tata letak=> edit HTML

masukkan kode berikut pada bagian header, antara <head> dan </head> , kalau bingung letakkan saja dibawah kode <head>

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js' type="text/javascript"/>

/* 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 */

}

Jangan lupa simpan template. kemudian klik pada elemen halaman=> tambah gadget=> HTML/JavaSript=> copi dan paste code berikut dalam content:

<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;"><a href="http://amatullah83.blogspot.com/2009/11/cara-membuat-menu-tab-view.html" target="_blank" title="Tabview Widget">Widget by Indahnya Berbagi</a></div>

Save, kemudian save lagi. Liat blog untuk melihat hasilnya!


tertanda

0 komentar:

Posting Komentar