Bikin Menu Tab View

Tab view itu contohnya seperti ini :

Beginilah cara untuk membuat menu tab view tersebut

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"

2. Kemudian cari kode 

 ]]></b:skin>

3. Kemudian masukkan kode berikut ini sebelum kode 

]]></b:skin>

 atau kedalam tag CSS.

{

  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;

  }

4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. 

5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode 

</head>

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

6. Kemudian "Di save"

7. Lalu pergi ke menu "Page Elements"

8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.

9. Inilah script yg harus kamu pasang :

 <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&gt;

  </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>

Keterangan :

- Angka2 atau text yang berwarna biru (300px) adalah ukuran tinggi dan lebar tabview.

- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).

- Kode yang berwarna merah adalah isi dari tabview tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.