The Tutorial Blogger: Cara membuat menu tab view

cara membuat menu tab view atau justru tab view slide? Baiklah anaa coba posting satu persatu, yang pertama bagaimana cara membuat menu tab view;

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

kemudian letakkan kode berikut diatas 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 */
}

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

* Save, kemudian save lagi. Liat blog untuk melihat hasilnya! Demikian tutorial cara membuat menu tab view sederhana. Semoga bermanfaat Ingin membuat yang lebih mudah dan menarik

The Tutorial Blogger

Rabu, 13 Februari 2013

Cara membuat menu tab view

Tidak ada komentar:

Posting Komentar