Cara Membuat Tab View

Trik kali ini biasanya banyak diminati oleh para Blogger (walaupun saya tidak memakai). Trik ini sangat berguna jika kalian sudah memiliki banyak posting di blog Anda, ini akan memper-simple dalam mencari postingan tersebut. Ok langsung saja caranya :


Cara :

• Log in ke Blogger Anda
• Pilih Tata Letak --> Edit HTML
  
• kemudian cari code ]]></b:skin>
• letakkan code berikut sebelum code ]]></b:skin>

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 #000; /* 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: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* 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;
}

• Text-text yang berwarna Merah, dapat anda ganti dengan pengaturan yang kalian inginkan, ada warna, ukuran, dll. Kalian dapat mencari Code warna Disini.
• Kemudian cari kode </head>
  
• Letakkan kode berikut sebelum kode </head>

<script src='http://kendhin.890m.com/blog/tabview.js' type='text/javascript'/>

• Lalu Save Template
• kemudian pilih Page Element --> Add Gadget --> HTML/JavaScript
• letakkan kode berikut pada Gadget baru tadi (HTML/JavaScript)

<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 type="text/javascript">
tabview_initialize('TabView');
</script>

• Lalu Save
  

Ket :

• angka-angka yang berwarna hijau ada lebar dan tinggi TabView, Anda dapat menggantinya sesuka Anda.
• Text yang berwarna biru adalah nama Menu Utama (Menu atas)
• kalian dapat menambah jumlah Menu pada TabView dengan menambahkan kata-kata yang berkedip-kedip, dibawahnya.

Selamat Mencoba





Sumber : trik tips blog