Cara Membuat Menu Tab View

Published by Kang Fathur Sunday, October 31, 2010

Pada kesempatan malam ini saya akan curat coret di postingan walaupun hanya sekedera memberi Tips Trik sederhana pada sahabat Blogger semuanya. Kali ini saya memberikan sebuah trik "Cara Membuat Menu Tab View" Apa dan Seperpti apa sii mahluk yang bernama Menu Tab View ini?? Jawabannya cuukup tengok ke sebelah kanan blog ini. Saya isikan dengan Tips-tips dan Artike-artikel di dalamnya. Kotak menu ini sangat berguna bagi kita karena Menu ini dapat membuat ngirit tempat pada blog kita dan sekaligus memudahkan pembaca/pengunjung mencarinya.

Ini adalah gambar yang akan kita hasilkan melalui tutorial ini. kok gak sama ya ma yang di blog ini?? karena yang punya saya dah banyak diutak atik dan di gunta ganti jenis warnanya. Tadinya sama saja punya saya juga seperti itu, tinggal nanti sobat atur sendiri warna warninya sesua dengan keinginan dan selera sobat semua.

OK, saya tidak akan panjang lebar lagli kita langsung aja ke TKP.

1. Seperti biasa Loggin ke Blogger => Layout => Edit HTML dan cari kode ni ]]></b:skin> kalau nak cepat jumpa klik je Ctrl+F dan cari.

2. Masukkan kode dibawah sebelum kode ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Kotak Tajuk */ text-align: center;
height: 24px; /* Tinggi Kotak Tajuk */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna Border Kotak Tajuk */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Tulisan Kotak Tajuk */
font-weight: 900;
color: #000; /* Warna Tulisan Kotak Tajuk */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFF66; /* Warna Background Kotak Tajuk */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna Border Kotak Isi */
overflow: hidden;
background-color: #FFFF66; /* Warna Background Kotak Isi */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

3. Lihat keterangan pada tulisan berwarna merah. Just tukar tulisan yang berwarna biru. Untuk kode warna boleh dapatkan DiSINI

4. Seterusnya tambahkan kode berikut sebelum kode </head>

<script src='https://sites.google.com/site/efekefek/file-js/tabview.js' type='text/javascript'/>

5. Cukup untuk bahagian ini. Klik Save Template.

6. Seterusnya pergi ke Page Elements => Add Gadget => HTML/Javascript dan tambahkan script dibawah.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tajuk 1</a>
<a>Tajuk 2</a>
<a>Tajuk 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
<li><a href="Url Isi 1.1">Tajuk Isi 1.1</a></li>
<li><a href="Url Isi 1.2">Tajuk Isi 1.2</a></li>
<li><a href="Url Isi 1.3">Tajuk Isi 1.3</a></li>
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="Url Isi 2.1">Tajuk Isi 2.1</a></li>
<li><a href="Url Isi 2.2">Tajuk Isi 2.2</a></li>
<li><a href="Url Isi 2.3">Tajuk Isi 2.3</a></li>
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="Url Isi 3.1">Tajuk Isi 3.1</a></li>
<li><a href="Url Isi 3.2">Tajuk Isi 3.2</a></li>
<li><a href="Url Isi 3.3">Tajuk Isi 3.3</a></li>
</div>
</div>

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

<script type="text/javascript">
tabview_initialize('TabView');
</script>

7. Lihat kode2 diatas.
#Text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
#Text yang berwarna Merah Adalah text bagi kotak tajuk.
#Text yang berwarna Ungu adalah isi menu ini. Sobat boleh isikannya dengan link, gambar, banner, script dll.

PENTING
Menu Tab View pada tutorial ini hanya terbagi tiga kolom jika sobat ingin menambahkannya copy kode yang berkedip dan paste di bawahnya.

Selamat Mencoba Semoga Berhasil dan Bermanfaat. Jangan lupa comentnya

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI