Cara Membuat Menu Tab View

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='http://www.geocities.com/almansuqie08/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
Previous
Next Post »

5 komentar

Click here for komentar
Anonymous
admin
12 December 2010 at 14:43 ×

Salam Admin,

macam mana nak buat Menu Tab View pada blog wordpress?

dah puas tanya pak google, tp tak jumpa.
harap admin boleh bantu.

Reply
avatar
Doni
admin
14 December 2010 at 21:46 ×

hai.....kang fatur
saya ini juga seorang bloging saya hampir tiap hari lho ke blog kang fatur
tolong....dong bagi ilmunya

cara membuat kotak tab view dengan animasi
seperti punya kang fatur
yang berada di disidenar kanan itu lho......
please.........

Reply
avatar
Kang Fatur
admin
1 February 2011 at 02:55 ×

@Doni Itu gampang sob tinggal merubah background-color: #FFFF66 menjadi begini background : url(disini alamat gambar animasi sobat) no-repeat center center; OK. selamat mencoba

Reply
avatar
20 April 2011 at 21:00 ×

alhamdulillah saya sudah berhasil membuat menu tab di WordPress untuk halaman post atau page. informasi lengkapnya di http://mahir-tik.com/2011/04/21/cara-membuat-tab-menu-di-wordpress-dengan-mudah/

Reply
avatar
BUKAL
admin
15 May 2011 at 08:51 ×

blognya mantep....

mampir ke blog ane bank,,,ane newbie minta saran!!

http://www.smarmendem.co.cc/
http://www.smarmendem.com/

Reply
avatar
Thanks for your comment