Tips Membuat Menu Tab View

Membuat 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.

Direkomendasikan