0 Cara Membuat Tab View Di Blog

Bismillahirrohmanirrohim..........!

Mungkin di antara sobat-sobat semua sudah banyak yang tau tentang cara membuat tab view di blog seperti pada gambar si samping, sekedar berbagi pengalaman dan pengetahuan aja, ane postingkan di blog ane yang sangat dan sangat sederhana sekali, maklum baru belajar, hehehe... 

Tutorial ini ane peroleh dari sebuah blog, tapi ane lupa gak ngesave nama blognya, biar gak panjang lebar mari kita mulai aja.

1. Login ke blog sobat
2. Masuk ke menu Tata letak
3. Pilih tambag gadget pilih HTML/JavaScript
4. Masukkan kode di bawah ini tanpa mengisi judulnya.;
   
   
   <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: #000; /* 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: 300px;" class="Tabs">
   <a><span style="color: #fff">Tab1</span></a>
   <a><span style="color: #fff">Tab2</span></a>
   <a><span style="color: #fff">Tab3</span></a>
   </div>
   <div style="width: 300px; height: 200px;" class="Pages">
   <div class="Page">
   <div class="Pad">
   Isi Tab1
   </div>
   </div>
   <div class="Page">
   <div class="Pad">
   Isi Tab2
   </div>
   </div>
   <div class="Page">
   <div class="Pad">
   Isi Tab3
   </div>
   </div>
   </div>
   </form>
   <script src="http://free-artikel.googlecode.com/files/tab_view.js">
   </script>
   <script type="text/javascript">
   tabview_initialize('TabView');
   </script>
5. Selesai

Selesai sudah Cara Membuat Tab View Di Blog, Mohon Kritik dan Sarannya melalui komentar dari sobat-sobat semua, demi kemajuan Blogger indonesia.

Wassalam............!

Komentar →