Cara Membuat Menu Tab View Tiga Kolom

Kali ini Saya akan membahas cara membuat menu kotak tab view yang ada tiga kotaknya maaf kata-kata Saya untuk memperjelas para newbie.

Ya sudah tanpa berlama-lama lihat cara membuatnya di bawah ini ↓

Screenshoot Tab View Menu

Cara Membuat Tab Menu View :

• Login ke blogger.com, jika sudah,
• Pilih Tata Letak → Tambah Gadget → pilih HTML / JavaScript
• Masukkan script di bawah ini ke dalam kolom ↓

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a><span style="color: #fff">Tab 1</span></a>
<a><span style="color: #fff">Tab 2</span></a>
<a><span style="color: #fff">Tab 3</span></a>
</div>
<div style="width: 300px; height: 200px;" class="Pages">

<div class="Page">
<div class="Pad">
Konten 1
</div>
</div>

<div class="Page">
<div class="Pad">
Konten 2
</div>
</div>

<div class="Page">
<div class="Pad">
Konten 3
</div>
</div>
</div></div></form>

<script src="http://septiamujizat.googlecode.com/files/tab_view.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div>

Keterangan :

• Tulisan yang berwarna merah adalah keterangan untuk pengaturan menu tab view.
• Tulisan yang berwarna putih adalah warna tulisan judul Tab.
• Tulisan yang berwarna hijau adalah judul Tab
• Angka 300 pada 'Width' adalah lebar kotak dan 200 pada 'height' adalah tinggi kotak
• Tulisan yang berwarna biru adalah konten yang kita isi di menu tab view.

Selamat Mencoba !