masukkan kode berikut pada bagian header, antara <head> dan </head>, kalau bingung letakkan saja dibawah kode <head>
<script src='http://supernova-planing.blogspot.com/2011/02/orang-tak-bisa-berhenti-memikirkan.html' type="text/javascript"/>kemudian letakkan kode berikut diatas kode ]]></b:skin>
/* Menu Tab ViewJanganlupa simpan template. kemudian klik pada elemen halaman=> tambah gadget=> HTML/JavaSript=> copi dan paste code berikut dalam content:
----------------------------------------------- */
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 */
}
<form action="tabview.html" method="get">Silahkan sobat ganti dan edit kode diatas, judul tab dan untuk warna bisa lihat kodenya disini.
<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://supernova-planing.blogspot.com/2011/02/orang-tak-bisa-berhenti-memikirkan.html" target="_blank" title="Tabview Widget">Widget by Indahnya Berbagi</a></div>
Save, kemudian save lagi. Liat blog untuk melihat hasilnya!
Tip Trik Blog Tutorial
- Cara Menghilangkan Tulisan Diposkan Oleh: dan Label Posting pada Blogspot
- Trik Posting Blog Hanya Menampilkan Judul
- TIPS TRIK MENINGKATKAN TRAFFIC RANK ALEXA
- Memperkuat Keyword Dengan Tag Alt
- Cara Menambah Footer 3 Kolom di Blogspot
- Membuat Multi Page Footer 1-2-3 seperti Google di Blogger
- KODE WARNA
- 15 Cara Optimasi Blog Agar Tampil Lebih Cepat
- Cara Membuat Banner Berjalan
- Memasang Tombol Like Facebook Di Blog
- Membuat Menu Drop Down Menggunakan CSS
- Menampilkan Kode HTML pada postingan
- KODE WARNA
- Daftar Blog Directory Terbaik
- Cara Membuat Banner Animasi
- Cara Memasang Jam di Sidebar
- Cara Memasang Yahoo ! Messenger Emoticons
- Masalah Posting Artikel
- Membuat Refresh
- Membuat efek Marquee
- Membuat Link (2)
- Membuat Link (1)
- Upload Gambar dan Foto Profile
- Membuat Text Area
0 komentar:
Posting Komentar