Membuat Tab View pada Blogspot

Assalamu'alaikum wr. wb.
Sore,, hem,, postingan ini memang merupakan dokumentasi dunia bloging yang cukup menarik. Yakni, "Membuat Tab View pada Blogspot" . Apa itu Tab View??? Tab View itu merupakan sebuah menu tab yang mampu menampilkan area yang bisa terbuka manakala tab tersebut terbuka. Halah2... Bahasanya... Ckckckc.. Untuk mempermudahnya, silahkan liat gambar berikut:

Nah, bagaimanakah cara membuat menu Tab View tersebut???
Gampang, silahkan saja Anda untuk:

1. Log-in kedalam akun Blogger Anda.
2. Kemudian pilih "Rancangan", lalu "Tata Letak"
3. Pada kolom "Add Gadget", klik saja, kemudian pilih "HTML/Javascript".
4. Kemudian masukkan kode berikut ini:
   

   <style type="text/css">
   div.TabView div.Tabs a
   {
   float: left;
   display: block;
   width: 80px; /* Lebar Kotak Tab */
   height: 22px; /* Tinggi Menu Utama Atas */
   text-align: center; /* Posisi Teks Menu Tab */
   margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
   background-color: #222222; /* Warna background Kotak Tab */
   padding-top: 2px; /* Spasi Atas */
   border: 1px solid #ffffff; /* Warna border kotak Tab */
   border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
   font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
   font-weight: 900; /* Ketebalan Teks kotak tab */
   }
   div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
   {
   background-color: #736F6E; /* Warna background utama kotak tab */
   }
   div.TabView div.Pages
   {
   clear: both;
   border: 1px solid #cccccc; /* Warna border Kotak Konten */
   overflow: hidden;
   background-color: #ffffff; /* Warna background Kotak konten */
   }
   div.TabView div.Pages div.Page
   {
   height: 100%;
   padding: 5px; /* Jarak teks dalam kotak content */
   overflow: hidden;
   }
   div.TabView div.Pages div.Page div.Pad
   {
   padding: 3px 5px;
   }
   </style>
   <form action="tabview.html" method="get">
   <div id="TabView" class="TabView">
   <div style="width: 385px;" class="Tabs">
   <a><span >TAB 1</span></a>
   <a><span style="color:white">TAB 2</span></a>
   <a><span >TAB 3</span></a>
   </div>
   <div style="width: 252px; height: 180px;" class="Pages">
   
   <div class="Page">
   <div class="Pad">
   Disini Kode HTML Content Widget TAB 1
   </div>
   </div>
   
   <div class="Page">
   <div class="Pad">
   Disini Kode HTML Content Widget TAB 2
   </div>
   </div>
   
   <div class="Page">
   <div class="Pad">
   Disini Kode HTML Content Widget TAB 3
   </div>
   </div>
   </div></div></form>
   
   <script style="text/javascript" src="https://sites.google.com/site/kodeblogger/javascript/tab_view.js"></script>
   <script type="text/javascript">tabview_initialize('TabView');
   </script>

5. Jangan lupa, klik "Simpan Gadget".
6. Oh iya, sesuaikan juga warna-warnanya sesuai dengan selera Anda masing-masing.

Semoga postingan berjudul "Membuat Tab View pada Blogspot" diatas dapat bermanfaat bagi kita sesama. Dan sampaikan salam saya untuk semua warga negara Indonesia... ^_^

Membuat Tab View pada Blogspot 2011-11-19T16:00:00+07:00 Rating: 4.5 Diposkan Oleh: Pengagum Wanita