CARA MEMBUAT TAB VIEW

---

---

Banyak cara yang digunakan oleh para sobat blogger guna menghemat tempat, bisa saja mengunakan menu drop down, menu horisontal, menu sliding atau jenis menu-menu yang lain. Untuk kali ini saya ingin membuat suatu menu yang mungkin untuk para sobat sudah tidak asing lagi, tapi untuk sobat yang masih baru terjun ke dunianya blogger mungkin masih ada yang belum tahu mengenai menu ini. Biasanya para sobat blogger menyebut menu ini dengan nama tab view. Jika sobat ingin tahu cara membuat tab view

bisa ikuti langkah-langkah di bawah ini.
Ini adalah gambar tab view yang akan kita buat.

Di bawah ini adalah kode yang kita gunakan untuk membuat tab view.

<style type="text/css">
div.TabView div.Tabs {
height:30px; overflow: hidden;
}
div.TabView div.Tabs a {
float: left;
display: block;
width:100px;
text-align:center;
height:30px;
padding-top:5px;
vertical-align: middle;
border:2px solid #FF0000;
border-bottom:0;
text-decoration: none;
font-family:"Arial",Times New Roman, Serif;
font-weight:900;
color:#003300;
background-color: #FF33CC;
}
div.TabView div.Tabs a:hover {
background-color: #000000;
text-decoration:none;
color: #FF3300;
border:2px solid #FF0000;
}
div.TabView div.Tabs a.Active {
background-color: #00FF00;
}
div.TabView div.Pages {
clear: both;
background-color: #FF6600;
border: 2px solid #000000;
padding: 10px; overflow: hidden;
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.pad {
padding: 3px 5px;
}
</style>

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 312px;">
<a>GAMBAR</a>
<a>LINK</a>
<a>ARTIKEL</a>
</div>

<div class="Pages" style="width: 288px; height: 250px;">
<div class="Page">
<div class="Pad">
<center>
<img src="http://i761.photobucket.com/albums/xx252/darma_bucket/th_garudajpn.png" width="200" height="200">
</center></div>
</div>

<div class="Page">
<div class="Pad">
<a href="http://activekita.blogspot.com">ACTIVEKITA</a><br><br>
<a href="http://activekita.blogspot.com/2009/11/cara-membuat-link.html">Cara membuat link</a><br><br>
<a href="http://activekita.blogspot.com/2009/12/cara-membuat-spoiler-di-blog.html">Membuat spoiler di blog</a><br><br>
</div>
</div>

<div class="Page">
<div class="Pad">
Banyak cara yang digunakan oleh para sobat blogger guna menghemat tempat, bisa saja mengunakan menu drop down, menu horisontal, menu sliding atau jenis menu-menu yang lain. Untuk kali ini saya ingin membuat suatu menu yang mungkin untuk para sobat sudah tidak asing lagi, tapi untuk sobat yang masih baru terjun ke dunianya blogger mungkin masih ada yang belum tahu mengenai menu ini. Biasanya para sobat blogger menyebut menu ini dengan nama tab view.....................................................................................................</div>
</div>

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

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

Sobat bisa mengedit kode-kode di atas dan mengganti sesui keinginan.
Yang berwarna hijau ganti dengan milik sobat.
250px adalah nilai tinggi dari halaman tab.

Width= 100px adalah lebar dari tombol kotak navigasi. Kotak ini mempunyai border 2px dikalikan (x) kanan-kiri menjadi 4px. Jadi nilai sebenarnya dari masing-masing kotak navigasi ini setelah di jumlahkan adalah 104px dikali (x) 3 kotak = 312px (lihat <div class="Tabs" style="width: 312px;"> )

Width: 288px ini adalah lebar dari halaman tab, yang lebarnya mengikuti dari lebar di atas yaitu 312px. Kenapa lebarnya di sini 288 karena lebar halaman ini mempunyai border dengan nilai 2px, jika di jumlah kanan-kiri nilainya 4px selain itu juga mempunyai nilai padding 10px dikali (x) 2 = 20px ( 312px di kurangi (-) (4px + 20px) = 288px )


Jika sudah selesai mengedit dan mengotak-atik sekarang tinggal memasukkan ke blog sobat.
Caranya seperti biasa.

• Login ke blog sobat.
• Pilih tata letak.
• Klik edit html
• Cari kode ]] ></b:skin>
  
• Letak kode ini di bawahnya hingga posisinya seperti ini.
  ]] ></b:skin>
  <script src='http://sites.google.com/site/darmasites/my-forms/TabView.js'/>
• Setelah itu klik simpan.
  
• Kemudian kembali klik tata letak
• Tambahkan gadget.
• Pilih HTML/Javascipt.
  
• Masukkan semua kode yang telah sobat edit di atas.
• Kemudian klik simpan.
• Lihat hasilnya.

KEMBALI KE ATAS

Posted by Yeye

Tweet