Tab View

Berikut adalah cara membuat Tab View Di Blogger :

1. Silahkan sobat Masuk ke Akun Blogger
2. Setelah masuk ke akun blogger, sobat langsung menuju ke tab Rancangan -> Edit HTML
3. Di bagian Edit HTML ada tulisan Expand Template Widget, silahkan centang kotak kecil yang ada disamping kiri
4. Setelah selesai langkah kedua, sobat cari kode berikut ]]></b:skin> untuk mempermudah pencarian silahkan pijit tombol Ctrl+F atau F3 di keyboard anda
5. Setelah ketemu dengan kode ]]></b:skin> silahkan sobat kopi kode di bawah ini dan di letakkan di atas kode ]]></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;
   }
   

6. Berikutnya sobaat cari kode </head> kopi kode dibawah ini dan letakkan di atas kode </head>
   

   <script src='http://idienjava.googlecode.com/files/tabview.js' type='text/javascript'/>
   

7. Setelah langkah diatas sudah selesai, Save perkejaan anda,
8. Ini langkah yang terakhir, silahkan sobat masuk kemenu Page Elemen di tab rancangan dan pilih Add a Gadget" --> "HTML/Javascript untuk menempatkan kode berikut :
   

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

Untuk mengedit lebar dan panjangnya silahkan sobat atur sesuai dengan keinginan sobat, misalnya lebar tinggal sobat ganti bagian width:350px dan ganti dengan lebar yang sobat inginkan.

Semoga tutorial ini bermanfaat bagi sobat, dan tentunya semoga berhasil, jika masih ada kesalahan ataupun kurang mengerti silahkan tinggalkan komentar.