Klau ada yangbertanya, Apa sih gunanya kita bikin menu tab view di blog kita ?.
Pertama supaya navigasi dalam Blog kita lebih kelihatan sederhana alias tidak semraut walaupun isi di dalamnya cukup padat, kedua untuk menyiasati template yang memiliki ruang sempit dll.
Cara membuat Tab View
Langkah Pertama:
* Login Blogger Anda
* Lalu klik Layout / Tata letak dan lalu klik "Edit HTML"
* Kemudian cari kode ini ]]></b:skin>
* Lalu Copy-kan kode dibawah ini, dan letakkan sebelum atau diatas kode ]]></b:skin>
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
- Perhatikan text-text yang dicetak Kuning, itu adalah keterangan yang ada di Tab View. Ada ukuran, style border dan warna . Silahkan ganti sesuka kamu.Untuk melihat kode warna sesuai keinginan coba disini
- Selanjutnya copy kode dibawah ini, letakkan sebelum kode </head>
<script src='http://www.geocities.com/sehatserasi72/tabview.js' type='text/javascript'/>
- Kemudian Simpan
Langkah Selanjutnya :
- Pilih "Page Elements"
- Trus Pilih "Add a Gadget" --> "HTML/Javascript" untuk meletakkan Tab Menu View ini.
- Copy script dibawah ini kedalamnya:
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
* Lalu Simpan/Save
Keterangan:
* Text yang berwarna biru (350px) adalah ukuran tinggi dan lebar Tab View.
* Kode yang berwarna Ungu text yang muncul di Menu utama (Menu Atas).
* Kode yang berwarna Hijau adalah isi dari Tab View.
Selamat Berkarya
Terimakasih.
