Home » , , » Membuat Menu Tab View Sederhana

Membuat Menu Tab View Sederhana

Redi Apri Handoko | 08.41 | 0 comments
Sobat ingin membuat tab view yang sederhana. Tab view memiliki fungsi dan manfaat yang sangat penting. Tab view dapat menampilkan komentar, link, postingan dan lain sebagainya dalam sebuah kotak kecil. Tab view juga dapat menghemat space atau ruang dari blog sobat. Ingin tau bagaimana cara membuatnya ikuti langkah berikut:

1. Login ke blogger
2. Pilih Rancangan dan klik pada Edit HTML
3. Cari kode ]]></b:skin>
4. Kopi kode dibawah ini, letakkan diatas 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: 80px; /*ukuran lebar tabmenu*/
text-align: center;
height: 24px; /*ukuran tinggi tabmenu*/
padding-top: 3px;
margin-right:4px; /*jarak antartabmenu*/
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;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius: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://sites.google.com/site/ruangsc/image/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*/
}

Keterangan:
- Sobat dapat merubah kode diatas yang pada keterangan berwarna merah
- Sobat dapat juga mengganti background tab view berwarna ungu.

5. Kopi kode dibawah ini, letakkan dibawah kode
]]></b:skin>
<script src="http://blogtrikdantips-blogspot.googlecode.com/files/tabview.js" type="text/javascript"/>
6. Kemudian simpan template tersebut
7. Masuk ke Rancangan -- Elemen Laman, tambah gadjet kemudian pilih HTML/JavaScript
8. Masukan kode dibawah ini:

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

<!--Awal Menu 1-->
<div class="Page"><div class="Pad">

Isi keterangan atau widget anda disini untuk Menu 1

</div></div>
<!--Akhir Menu 1-->

<!--Awal Menu 2-->
<div class="Page"><div class="Pad">

Isi keterangan atau widget anda disini untuk Menu 2

</div></div>
<!--Akhir Menu 2-->

<!--Awal Menu 3-->
<div class="Page"><div class="Pad">

Isi keterangan atau widget anda disini untuk Menu 3

</div></div>
<!--Akhir Menu 3-->

<!--Awal Menu 4-->
<div class="Page"><div class="Pad">

Isi keterangan atau widget anda disini untuk Menu 4

</div></div>
<!--Akhir Menu 4-->

</div></div></form>

<script src='http://blogtrikdantips-blogspot.googlecode.com/files/linkblog.js' type='text/javascript'/>

9. Edit Tabview (isi judul dan keterangan serta widget yang ingin ditambahkan)
10. Simpan gadjet lalu lihat hasilnya!!
Berbagi Dengan Teman:

Posted by : Redi A.H ~ / Tutorial windows, SEO , Info gadget, Download game

Artikel Membuat Menu Tab View Sederhana Di posting oleh Redi A.H pada 2 Jul 2009. Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kontak atau komentar. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, hanya mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini. Terimakasih. Happy blogging!!!

0 comments:

Posting Komentar

Terimakasih atas kunjungan anda semua, sebelumnya mohon maaf kami tidak menerima komentar yang berbau tentang pornografi.
TERIMAKASIH atas partisipasinya.

 
Site Meter :
Copyright © 2011. Tutorial Windows 7 - All Rights Reserved
Proudly powered by Blogger
Thank You For Google