Kali ini saya akan membagikan salah satu ilmu terbaru yang saya dapatkan dari blog sebelah. Cara yang saya tawarkan mungkin relativ simpel dan mudah dimengerti. Nah berikut review dari
Cara Membuat Menu Tab View.
- Seperti biasa dalam keadaan loggin, klik
Template=> edit HTML
- Masukkan kode berikut dibawah kode
<head>
| KODE |
| <script
src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js'
type="text/javascript"/> |
- kemudian letakkan kode berikut diatas kode
]]></b:skin>
| KODE |
| /* 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 */ |
| } |
- Kemudian simpan. Setelah itu klik Tata Letak => tambah gadged => HTML /JavaSript
- Copy dan pastekan code berikut didalamnya :
| KODE |
| <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://www.tipstrikblogging.com/2009/11/cara-membuat-menu-tab-view.html"
target="_blank" title="Tabview Widget">Get This
Widget</a></div> |
- Silahkan anda ganti dan edit kode diatas,
judul tab dan untuk warna bisa lihat kodenya Disini.
- Kemudian Save.
Jika anda menyukai artikel diblog ini, silahkan Klik
Join This Site or Berlangganan
gratis via email, dengan begitu anda
akan mendapatkan kiriman artikel setiap ada artikel yang terbit di Dunia
Herni Chand.
Tidak ada komentar:
Posting Komentar