Cara membuat menu tabview

Agar kita bisa menghemat tempat untuk pada blog, kita bisa menambahkan menu tabview ini. Kadang kita ingin menambahkan banyak widget sedangkan blog kita sudah penuh dengan berbagai macam widget, nah cara lain untuk menghemat tempat pada blog kita selain menambah 3 kolom sibawah header atau menambah 3 kolom diatas footer kita bisa menambahkan tabview menu ini.

Langkanya :
 1. Login ke blogger >> Rancangan >> Edit HTML
 2. Jangan lupa backup dulu template kamu untuk mengantisipasi hal-hal yang tidak diinginkan!
 3. Letakkan kode dibawah ini sebelum kode </head>

<script src='http://u-sup.googlecode.com/files/tabview.js' type="text/javascript"/>

 4. Selanjutnya letakkan kode dibawah ini sebelum kode ]]></b:skin> 

 div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Utama Atas */

text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* 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;
}

 5. Klik simpan perubahan!
 6. Selanjutnya silahkan klik Element laman
 7. Klik Tambah gadget dan pilih HTML/JavaScript dan masukkan kode berikut didalamnya!

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 300px; 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 type="text/javascript">
tabview_initialize('TabView');
</script>

 8. Klik simpan!

Keterangan:

• Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan ganti sesuai dengan isi.
  
• Kode yang berwarna kuning silahkan isi dengan judul - judul dari menu.
  
• Dan yang berwarna ungu, adalah isi dari menu. Bisa menambahkan link, gambar, banner, dll.

Selamat mencoba, happy blogging!!

from: http://u-sup.blogspot.com/2010/11/cara-membuat-menu-tabview.html

Do you Like this story..?

Get Free Email Updates Daily!	Follow us!

Posted in: Tips Blogging