Tabview widget ternyata sarana yang bagus buat para blogger yang pengen mengirit tempat buat pasang widget-widget lain.Kenapa begitu!!!Dengan Tabview widget ini blog kita terlihat lebih simple dan terkesan enak kalo dilihat....Sebelumnya aku ga tau apa itu tabview!!!Liat widget itu kayaknya terasa susah untuk membuatnya,,hehehe....Maklum masih NewBie BLogger???Tapi setelah dipikir-pikir, harus coba juga nie...Meskipun awalnya susah banget...Liat scriptnya aja bikin puyen wkekekkeke...
Well usut punya usut akhirnya jadi juga.Oh iya tabview widget ini aku dapat dari blog trik-tips.blogspot.com dan Bapak Blogger kita alias O-om hihihi...
Nah,,ga usah basa basi!!!Langsung aja cara buatnya
Untuk membuat menu tab view seperti gambar, ikuti langkah berikut :
1. Login ke blogger trus pilih menu "Tata Letak --> Tambah Gadget"
2. Kemudia pilih HTML/JavaScript
3. Kemudian masukkan kode berikut ini :
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #FFCC00; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #222; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFE16C; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #FFCC00; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FFFFB7; /* Warna 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;
}<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a><a>Tab 2</a><a>Tab 3</a></div>
<div class="Pages" style="width: 350px; height: 250px;">
<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 src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Penjelasan kode diatas:
- Angka-angka atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview. Kamu bisa sesuaikan dengan lebar kolom tempat kamu menaruh menu tab view ini.
- Kode yang berwarna Orange adalah text yang akan mucul di Menu utama (Menu Atas/tab view). Ganti tulisan tab 1 , tab 2, dan tab 3 dengan judul tab yang kamu inginkan.
- Kode yang berwarna merah adalah isi dari tab view tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berwarna orange stabilo. tambahkan menu tersebut dibawahnya dan tambahkan kode di dibawah yang berwarna merah
<a>Tab 1</a>
<div class="Page"><div class="Pad">Tab 3.1 <br />Tab 3.2 <br />Tab 3.3 <br /></div></div>
Semoga Bermanfaat...Happy Blogging
Posted by: Andi Setyoko
Berita Harian, Updated at: 2:25 AM
