-->

Tips Membuat Menu Tab View

Tips Membuat Menu Tab ViewMembuat menu tab view selain menambah kesan beda juga menjadi solusi bagi blog yang mempunyai ruang yang sempit. Karena dengan menambah menu tab view walaupun ruangan blog sobat sempit tapi tetap bisa memasukkan menu yang dianggap sobat penting, misalnya daftar isi, tukar link dll. Dan itu bisa disesuaikan dengan kemauan sobat.

Untuk membuat menu tab view sobat bisa mengikuti langkah berikut :

1. Login ke blog sobat dan cari menu Tata Letak --> Edit HTML
2. Cari kode ]]></b:skin>
3. Letakkan kode berikut di atas kode ]]></b:skin>

Ini kodenya

/* 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: 85px; /* ukuran lebar menu */
text-align: center;
height: 24px; /* ukuran tinggi menu */
padding-top: 3px;
margin-right:5px; /* jarak antarmenu */
vertical-align: middle;
border: 0px solid #CCC; /* warna border menu */
border-bottom-width: 0;
font-family: &quot;Arial&quot;, Times New Roman, Serif; /* jenis hurup menu */
font-size: 14px; /* besar hurup menu */
letter-spacing: -1px;
background-color: #c3771c; /* warna latar menu */
color: #000000; /* 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: #c3771c; /* warna background menu aktif */
color: #FFFFFF;
}

div.TabView div.Tabs a:hover {
background-color: #000000; /* warna background menu hover */
color: #000000;
font-weight: bold;
}

/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 0px solid #CCC; /* warna border kotak utama */
overflow: hidden;
background:url(&quot;transparant&quot;); /* 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 */
}

4. Kalo sudah letakkan kode berikut di bawah kode ]]></b:skin>

Ini kodenya

&lt;script src='http://sites.google.com/site/ruangsc/enes/tabview.js' type='text/javascript'/&gt;

5. Simpan gawean/perbuatan sobat.
6. Buka menu Tata Letak --> Page Elemen --> Tambah Gadget --> HTML/Javascript
7. Copas kode berikut ke dalam kolom HTML/Javascript.

Ini kodenya

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="">Daftar Isi</a>
<a title="">Top Post</a>
<a title="">Seks&amp;Cinta</a>
<a title="">Tukar Link</a>
</div>
<div style="width: 99%; height: 200px;" class="Pages">

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

Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />

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

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

Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />

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

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

Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />

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

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

Tab 4.1 <br />
Tab 4.2 <br />
Tab 4.3 <br />

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

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

<script type="text/javascript">tabview_initialize('TabView');</script>
<div style="font-size: 90%; text-align: right; text-shadow: 2px 2px 2px rgb(173, 173, 173);"><a href="http://ndeso-net.blogspot.com/" target="_blank" title="Tabview Widget">Widget by Tips dan Trik UDIK</a></div>

8. Simpan lagi gawean sobat.

Keterangan :

Kalo sobat mau menyesuaikan kotak tab view dengan mengganti warna atau ukurannya perhatikan teks berwarna merah, dan ganti kode yang ada disamping teks tersebut.

Gimana sobat udah jelas kan tips bloging membuat menu tab view? kalo belum bisa tanya lewat kotak komentar di bawah. Salam sukses.




7 Obrolan seru!

http://bayulebond.blogspot.com/ 15 December 2009 at 00:58

berulang kali...aku mencoba.
tp gak berhasil, gak seperti si dora yg selalu berasil.

http://www.rahad2six.uni.cc/ 16 December 2009 at 22:45

susah banget buatnya.....
pas udah jadi,tombol tabnya gak fungsi....

bos aku bingung...sudah kupraktekan di blogku yang lain tapi masih bingung cara ngisi postingannya gimana donk kasih penjelasan

http://akhirnyakutahu.blogspot.com 31 December 2009 at 16:02

kunjungan balik bos, hidup blogger

www.fahmi-wisatakuliner.blogspot.com 1 January 2010 at 18:57

Hadir :)

http://click-cartica.blogspot.com/ 9 January 2010 at 23:55

Berkunjung friend

tengkyu bro....... seharian gua utak-atik blog gw kaga dpet2... akhirnya berkat low g w bisa.... tenks

Mohon komentar dengan sopan, SARA atau menaruh LINK Aktif di kotak komentar tidak akan muncul
Show EmoticonHide Emoticon