Home » » Cara Membuat Menu Tab View pada Blog

Cara Membuat Menu Tab View pada Blog

# Pertama-pertama tentu saja anda harus terlebih dahulu login ke id blog anda.
# Untuk selanjutnya anda ke menu template
# Anda pilih edit HTML
# Anda Ceklist Expand Widget Template
# Anda cari kode ]]></b:skin>
# Anda salin kode di bawah ini tepat di atas kode ]]></b:skin>



/* 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 huruf 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 huruf kotak utama */
}


tulisan yang berwarna merah silahkan anda ganti dengan tulisan yang anda inginkan.

# Kemudian letakkan lagi kode berikut ini tepat DIBAWAH kode  ]]></b:skin>

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

# Untuk selanjutnya,silahkan anda menuju tata letak (layout)
# Selanjutnya klik ADD GADGET dan pilih edit HTML
# Salin 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://kibagus-homedesign.blogspot.com/" target="_blank" title="Tabview Widget">HDesign-comm</a></div>



# Tahap terakhir yang musti anda lakukan adalah menyimpan hasil editan anda.
Share this article :

0 komentar:

Posting Komentar

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. indrathelazyman2 - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger