Lazada Indonesia

Membuat banyak tab dalam satu widget

Langkah Pertama :
Copy kode di bawah ini :

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}

/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 90px; /* ukuran lebar menu */
text-align: center;
height: 24px; /* ukuran tinggi menu */
padding-top: 3px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #CCC; /* warna border menu */
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /* jenis hurup menu */
font-size: 12px; /* besar hurup menu */
letter-spacing: -1px;
background-color: #A4A4A4; /* warna latar menu */
color: #FFFFFF; /* warna hurup menu */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}

div.TabView div.Tabs a.Active {
background-color: #888888; /* warna background menu aktif */
color: #FFFFFF;
}

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:url("http://i864.photobucket.com/albums/ab206/kibagus/th_bgtabview.gif"); /* 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;
font-size: 12px; /* besar hurup kotak utama */
}


Kemudian Login ke akun Blogger kamu.
Pilih Tata letak >>> Edit HTML >>> Tekan Control F atau F3 kemudian ketik ]]></b:skin>
Setelah ketemu Paste kan kode yg dicopy tadi di atas kode ]]></b:skin>

Jangan beranjak dulu....Copy lagi kode di bawah ini :

<script src="http://sites.google.com/site/kibagusnet/kibagusblog/tabview.js" type="text/javascript"/>

Dan letakkan di bawah kode ]]></b:skin>

Kemudian Save atau simpan.

Langkah kedua :

Copy kode di bawah ini :

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Keterangan Menu 1">Menu 1</a>
<a title="Keterangan Menu 2">Menu 2</a>
<a title="Keterangan Menu 3">Menu 3</a>
</div>
<div style="width: 99%; height: 200px;" class="Pages">

<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Isi Menu 1.1<br/>
Isi Menu 1.2<br/>
Isi Menu 1.dst<br/>
</div></div>
<!--Akhir Menu 1-->

<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Isi Menu 2.1<br/>
Isi Menu 2.2<br/>
Isi Menu 2.dst<br/>
</div></div>
<!--Akhir Menu 2-->

<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Isi Menu 3.1<br/>
Isi Menu 3.2<br/>
Isi Menu 3.dst<br/>
</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://adidolok.blogspot.com/" target="_blank" title="Tabview Widget">.</a></div>


Masuk ke Tata letak >>> Tambah halaman >>> dan pilih HTML/JavaScript >>> Paste kan kode yg dicopy tadi.
Simpan dan lihat hasilnya.

1 comments:

weh pertamaaaa xxxx. posting bermanfaat. thanks kawan

Reply

Silahkan anda berkomentar. Komentar Anda akan langsung muncul. Anda bisa memasukkan link kedalam tulisan di komentar anda. Bukan hanya "link", anda juga bisa memasukkan Batu, Bata, Perhiasan, Balok, Pesawat, Mobil...dll ke dalam kotak komentar.