Cara Membuat Tab View Multitab di Blog

Cara Membuat Tab View Multitab di Blog

Written By Belajar Internet on Sabtu, 18 Agustus 2012 | 07:16

Setelah ganti template blog Belajar Internet, dan hasilnya seperti Anda lihat sendiri (sudah bagus ngga?) dan ada yang baru di blog admin, yaitu Tab View Multitab. Jujur, tab view multitab ini sudah pernah saya coba untuk template lama, tapi ternyata selalu gagal, karena tutorial yang saya pakai adalah super simple (bukan mr. simple). Tapi, untung saja setelah berjelajah ke google, akhirnya saya temukan caranya di blog http://catatanku-yd.blogspot.com, memang tidak simple tapi hasilnya Berhasil!!!. Lansung saja, artikel yang admin akan posting pada malam takbiran ini di bulan Ramadhan adalah membahas tentang Cara Membuat Tab View Multitab di Blog. Sudah tahu kan, apa itu tab view multitab? Jika Anda belum tahu, silahkan Anda perhatikan di bagian sidebar kanan blog ini atau lansung saja perhatikan gambar di bawah ini.

Tab View Multitab ini sangat berguna untuk memberikan ruang yang lebih untuk widget-widget yang ada di blog Anda. Tentunya, dengan hal ini tampilan blog Anda akan lebih rapi. Tanpa basa basi lagi, ayo kita TKP.

1. Silahkan masuk ke akun blogger Anda
2. Masuk pada bagian template dan klik Edit HTML
3. Setelah itu silahkan Anda cari kode ]]></b:skin>, untuk memudahkan pencarian, silahkan Anda tekan CTRL+F
4. Silahkan salin kode di bawah ini dan letakkan tepat di atas kode ]]></b:skin> tadi.

/* 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: #6666FF; /* 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 */

5. Selanjutnya cari kode </head> dan silahkan salin kode di bawah ini tepat di atas kode </head>

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

6. Simpan template, kemudian kembali ke Tata Letak, klik Tambah Gadget
7. Pilih HTML/Javascript
8. Selanjutnya salin kode di bawah ini dan letakkan disana, judul tidak perlu diisi.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 950px;">

<a>Judul 1</a>

<a>Judul ke 2</a>

<a>Judul ke 3</a>

<a>Judul ke 4</a>

</div> 
<div class="Pages" style="width: 950px; height: 270px;"> 
<div class="Page"> 
<div class="Pad">

Isi tab view pertama


</div></div>


<div class="Page"> 
<div class="Pad">

Isi tab view ke 2

</div></div> 

<div class="Page"> 
<div class="Pad">

Isi tab View ke 3

</div></div> 


<div class="Page"> 
<div class="Pad">

Isi Tab view ke 4

</div></div> 

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

9.  Simpan dan lihat hasilnya