Cara Membuat Menu Tab View

Berikut Tutorialnya:

1. Login ke blog sobat, lalu pilih menu "Rancangan" - "Edit HTML".
2. Untuk menghindari hal yang tak diinginkan, backup lah terlebih dahulu template sobat dengan menekan tombol "Download Template Full".
3. Kemudian carilah kode ]]></b:skin>. Jika sudah ketemu, pastekan kode dibawah ini sebelum kode ]]></b:skin>.
   

   /* Menu Tab View
   ----------------------------------------------- */
   div.TabView div.Tabs {widht:100%;
   padding-top: 0px;
   height: 24px;
   overflow: hidden;
   }
   /* Menu Utama */
   div.TabView div.Tabs a {
   float: left;
   display: block;
   width: 110px; /* ukuran lebar menu */
   text-align: center;
   height: 30px; /* ukuran tinggi menu */
   padding-top: 7px;
   margin-right:4px; /* jarak antarmenu */
   vertical-align: middle;
   border: 1px solid #ccc; /* warna border menu */
   border-bottom-width: 0;
   margin:0px;
   padding: 5px 0;
   font-family:Arial,Helvetica,sans-serif;
   font-size:12px;
   font-weight:bold;; /* besar hurup menu */
   background-color: #4c4c4c; /* warna latar menu */
   color: #FFFFFF; /* warna hurup menu */
   -moz-border-radius-topleft:15px;
   -moz-border-radius-topright:15px;
   -webkit-border-top-left-radius:15px;
   -webkit-border-top-right-radius:15px;
   }
   div.TabView div.Tabs a.Active {
   background-color: #FFFFFF; /* warna background menu aktif */
   color: #000000;
   }
   div.TabView div.Tabs a:hover {
   background-color: #999999; /* warna background menu hover */
   color: #FFFFCC;
   font-weight: bold;
   }
   /* Kotak Utama */
   div.TabView div.Pages {
   clear: both;
   border: 1px solid #CCC; /* warna border kotak utama */
   overflow: hidden;
   background:#FFFFFF; /* background kotak utama */
   }
   div.TabView div.Pages div.Page {
   height: 100%;
   padding: 7px;
   overflow: hidden;
   }
   div.TabView div.Pages div.Page div.Pad {
   padding: 5px 0px;
   font-size: 12px; /* besar hurup kotak utama */
   }
   
   /* tabview css end */
   

   
   

   Keterangan : Anda bisa mengubah teks berwarna biru sesuai dengan keinginan sobat.
   

4. Kemudian, cari kode </head> dan pastekan kode dibawah ini sebelum kode </head>.
   

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

5. Simpanlah template sobat.
6. Selanjutnya, silahkan menuju ke menu "Elemen Halaman". Lalu klik "Tambah Gadget" - "Tambah HTML/Javascript" dan pastekan kode dibawah ini pada kotak HTML/Javascript.
   

   <form action="tabview.html" method="get">
   <div class="TabView" id="TabView">
   <div class="Tabs" style="width: 260px;">
   
   <a>Menu 1</a>
   <a>Menu 2</a>
   <a>Menu 3</a>
   
   </div>
   <div class="Pages" style="width: 256px; height: 270px;">
   <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

• Kode berwarna ungu adalah tinggi dan lebarnya tab view yang bisa sobat sesuaikan menurut selera.
• Kode berwarna orange dapat sobat ganti dengan judul tab yang sobat inginkan.
• Kode berwarna merah dapat sobat masukan link postingan, gambar dan video.