Cara Membuat Menu Tab View

Cara Membuat Menu Tab View

gambar : 1

Untuk anda yang ingin membuat Menu Tab View seperti gambar di atas untuk halaman blog anda, caranya adalah sebagai berikut :

01. Save template anda terlebih dulu yaitu dengan mendownload full template anda. kemudian Buka menu edit template atau Layout, terus buka edit HTML. jangan lupa kasih tanda centang pada Expand widget template. setelah itu cari kode ]]></b:skin> pada halaman HTML dengan menekan ctrl+F dan paste kan ]]></b:skin> tersebut pada kotak find dan tekan enter  contoh nya seperti pada gambar

berikut ini :

gambar : 2

2. Langkah berikutnya adalah copy semua kode dibawah ini terus paste kan tepat di atas ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;

border-top: 1px solid #d9e3ff;
border-left: 1px solid #d9e3ff;
border-right: 1px solid #d9e3ff;
border-bottom: 1px solid #d9e3ff;
font-family: "verdana", Serif;
font-weight: 900;
color: #ffffff;                   /* Warna text menu tab */
background-color: #ca0a0a;  /* Warna background menu tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #1200ff;  /* Warna background menu tab yang active */
}
div.TabView div.Pages
{
clear: both;
border-left: 1px solid #d9e3ff;
border-right: 1px solid #d9e3ff;
border-bottom: 1px solid #d9e3ff;
overflow: hidden;
background-color: #ffffff;  /* Warna background menu  halaman */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Catatan : semua kode warna yang saya tandai pada kode diatas bisa anda rubah sesuai keinginan anda. contoh anda ganti dengan kode #ffffff untuk warna putih ataupun dengan kode warna lainnya.

3. Setelah anda mamasukan semua kode di atas kemudian anda cari kode </head> setelah itu copy kode berikut ini dan paste tepat di atas kode </head>.

<script src='http://www.geocities.com/damn_lunchix/tabview.js' type='text/javascript'/>

4. Klik simpan atau save template anda.

5. Setelah anda selesai mengcopy dan mempastekan semua kode-kode diatas pada halaman HTML template anda. langkah selanjutnya anda buka menu elemen halaman dan klik add a Gadget dan pilih seperti pada gambar berikut ini :

gambar : 3

gambar : 4

gambar :5

6. Kemudian Copy dan paste semua code berikut ini pada gadget HTML tersebut seperti contoh pada gambar 5 diatas.

<form action="tabview.html" method="get">

<div id="TabView" class="TabView">

<div style="width: 300px;" class="Tabs">

<a class="Active" href="javascript:tabview_switch('TabView',%201);">Recent Post</a>

<a class="" href="javascript:tabview_switch('TabView',%202);">Most Popular</a>

<a class="" href="javascript:tabview_switch('TabView',%203);">Wallpaper</a>

</div>

<div style="width: 298px; height: 150px;" class="Pages">

<div style="overflow: auto; height: 150px; display: block;" class="Page">

<div class="Pad">

</ol>

<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>

</ol>

</div>

</div>

<div style="overflow: auto; height: 150px; display: none;" class="Page">

<div class="Pad">

<ol>

<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
</ol>

</div>

</div>

<div style="overflow: auto; height: 150px; display: none;" class="Page">

<div class="Pad">

<ol>

<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<ol>

</div>

</div>

</div>

</div></form>

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

Catatan : Untuk kode yang diberi warna kuning diatas bisa anda rubah sesuai keinginan anda contoh,

<div style="width: 298px; height: 150px;" class="Pages"> . 298px adalah ukuran lebar gadget tersebut

sedangkan 150px adalah ukuran tinggi gadget tersebut.contoh berikutnya adalah tentang

<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li> ini juga anda rubah sesuai dengan yang anda iningkan. Masukan Link yang di tuju disini yaitu masukan link yang anda tuju misalnya link untuk alamat posting anda ataupun link alamat yang lain. judul posting disini myaitu untuk judul postingan anda ataupun yang lainnya. Bila anda ingin memperbanyak tampilan daftar judul posting ataupun yang lainnya. anda cukup mengcopy dan memperbanyak kode :

<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>

seperti contoh yang saya berikan pada kode diatas  yaitu untuk 3 judul content untuk tiap halaman.

7. Selesai dan anda lihat blog anda untuk melihat hasilnya.

Ok saya rasa cukup sampai disini postingan saya tentang bagaiman caranya membuat menu tab view.
Semoga bermanfaat dan salam blogger mania.