Cara Membuat Menu Tab View Di Blog

Jumpa Lagi Dengan Saya "Last Ari Stevand"

Kali Ini Saya Akan Membahas Tentang Membuat Menu Tab View Di Blog

Okey Langsung Saja Ya Ini Tips Nya:

1. Masuk ke Dashboard , Pilih Layout , lalu klik Edit HTML
2. Backup template dulu dengan  Download Full Template
3. Kemudian cari kode ini ]]></b:skin>
4. Untuk memudahkan pencarian , pakai saja Ctrl +F , terus ketik kata yang dicari dikotak yang disediakan, lalu klik next. 
5. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin>

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {widht:100%;
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 110px; /* ukuran lebar menu */
text-align: center;
height: 30px; /* ukuran tinggi menu */
padding-top: 7px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #ccc; /* warna border menu */
border-bottom-width: 0;
margin:0px;
padding: 5px 0;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;; /* besar hurup menu */
background-color: #4c4c4c; /* warna latar menu */
color: #FFFFFF; /* warna hurup menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
div.TabView div.Tabs a.Active {
background-color: #FFFFFF; /* warna background menu aktif */
color: #000000;
}
div.TabView div.Tabs a:hover {
background-color: #999999; /* warna background menu hover */
color: #FFFFCC;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /* warna border kotak utama */
overflow: hidden;
background:#FFFFFF; /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 7px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 5px 0px;
font-size: 12px; /* besar hurup kotak utama */
}
/* tabview css end */

1. Perhatikan text-text yang berwarna Biru Mudah, silahkan disesuaikan ya.
2. Selanjutnya pasang kode berikut ini sebelum kode </head>

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js' type="text/javascript"/>

Jika sudah tinggal Save Templates

Selesai …  untuk langkah pertama,

Langkah ke dua Silahkan masuk kemenu "Page Elements"

Klik  "Add a Gadget" ,  pilih "HTML/Javascript"  ,

Kemudian copy paste kode dibawah ini :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 260px;">
<a>Menu 1</a>
<a>Menu 2</a>
<a>Menu 3</a>
</div>
<div class="Pages" style="width: 256px; height: 270px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div></div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div></div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div></div>
</div></div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Catatan :

• Angka warna pink adalah tinggi dan lebar tab view, silahkan disesuaikan
• Kode yang berwarna Biru Adalah text  Menu utama
• Kode yang berwarna merah adalah isi dari tab view tsb.
• Saya juga pernah posting Membuat Dropdown Navigation Menu atau Tutorial Blog lainnya . 

Bagaimana Menurut Anda Para Pecinta Blog?
Cukup Gampang Khan?

"Commentar Anda Sangat Penting Demi Kemajuan Blog Ini"