Sesuai janji saya dengan sobat pujangga-adhitya yang meminta kode script untuk membuat menu TabView, saya coba buka arsip saya yang telah tertimbun dengan berita-berita sekitar PilPres 2009.
Langsung saja saya share caranya, moga saja tidak lupa dan membingungkan, sebab script yang tak pakai ini saya copy paste dari blog lama saya Link N Shopping yang sekarang sedang dirombak menjadi Online Shopping.
Langkah pertama :
Login ke blog anda, pilih Layout --> Edit Html , jangan lupa Contreng Expand Widget Templates. trus backup template anda terlebih dahulu kemudian cari code ]]></b:skin> paste kode ini dibawahnya :
catatan: ganti [ dengan <
Copy kode dibawah ini :
Letakkan (paste) kode, diatas ]]></b:skin>
Langkah pertama edit html telah selesai jangan lupa save.
Langkah Kedua :
Buka Layout --> page element --> add a gadget pilih html/javascript
paste kode dibawah ini :
Selesai dan save.. semoga postingan saya ini bisa bermanfaat buat rekan2 blogger semua.
Langsung saja saya share caranya, moga saja tidak lupa dan membingungkan, sebab script yang tak pakai ini saya copy paste dari blog lama saya Link N Shopping yang sekarang sedang dirombak menjadi Online Shopping.
Langkah pertama :
Login ke blog anda, pilih Layout --> Edit Html , jangan lupa Contreng Expand Widget Templates. trus backup template anda terlebih dahulu kemudian cari code ]]></b:skin> paste kode ini dibawahnya :
[script src='http://kendhin.googlepages.com/tabview.js' type='text/javascript'/>
catatan: ganti [ dengan <
Copy kode dibawah ini :
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 100px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px; /* jumlah Menu Utama Atas */
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;
}
Letakkan (paste) kode, diatas ]]></b:skin>
Langkah pertama edit html telah selesai jangan lupa save.
Langkah Kedua :
Buka Layout --> page element --> add a gadget pilih html/javascript
paste kode dibawah ini :
Untuk yang tercetak warna biru adalah ukuran dari menu TabView<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 336px;" class="Tabs">
<a>tabel1</a>
<a>tabel2</a>
<a>tabel3</a>
</div>
<div style="width: 336px; height: 250px;" class="Pages">
<div class="Page">
<div class="Pad">
isi dari tabel1
</div>
</div>
<div class="Page">
<div class="Pad">
isi dari tabel2
</div>
</div>
<div class="Page">
<div class="Pad">
isi dari tabel3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Selesai dan save.. semoga postingan saya ini bisa bermanfaat buat rekan2 blogger semua.
Baca Juga Artikel menarik di bawah ini :
3 comments to "Membuat Menu TabView"
Anonymous says:
Thanks yah kawan untuk postingan yang saya tunggu dari kawan.Untuk ukunrannya widthnya masih bisa dirunagkan ?
narti says:
wah keduluan Pujangga nih....
makasih ya...
nophie says:
makasih sob, dah di copy