membuat widget tab view

Tutorial Blogger kali ini kita akan membuat widget tab view
Sebenarnya sudah banyak yang memposting tentang membuat tab view, namun tak apa saya tuliskan tutorial  untuk pemula di sini. Widget tab view sangat berguna untuk blog karena dapat optimalkan ruang pada blog dan bisa menampung begitu banyak link serta konten blog di dalamnya. juga memper cepat dan mudah  melihat isi blog. Contohnya bisa anda lihat pada gambar di bawah ini:

Nah, untuk membuat widget tab view pada blog anda silahkan ikuti langkah berikut :

1. Login ke blog dengan ID anda
2. Pilih menu Layout » masuk ke Edit HTML
3. Cari kode ini ]]></b:skin>
4. Copy lalu paste kode berikut ini sebelum 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 #000000; /* Warna border Menu Atas */
   border-bottom-width: 0;
   text-decoration: none;
   font-family: "Arial", Times New Roman, Serif; /* Font Menu Utama Atas */
   font-weight: 900;
   color: #000080; /* Warna Font Menu Utama Atas */
   }
   
   div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
   {
   background-color: #BDBDBD; /* Warna background Menu Utama Atas */
   }
   
   div.TabView div.Pages
   {
   clear: both;
   background-color: #FFFFFF; /* Warna background Kotak Utama */
   border: 1px solid #000000; /* Warna border Kotak Utama */
   overflow: hidden;
   }
   
   div.TabView div.Pages div.Page
   {
   height: 100%;
   padding: 0px;
   overflow: hidden;
   }
   
   div.TabView div.Pages div.Page div.Pad
   {
   padding: 3px 5px;
   }

   Teks yang berwarna merah adalah keterangan untuk mengatur tab view. Seperti ukuran tebal border, tinggi dan lebar tab view serta warna background. Nah, untuk mengatur warna, silahkan gunakan kode warna.
5. Kemudian pasang kode berikut sebelum kode </head>
   
   
   
   
   

   <script type='text/javascript'>
   function tabview_aux(TabViewId, id)
   {
   var TabView = document.getElementById(TabViewId);
   
   // ----- Tabs -----
   
   var Tabs = TabView.firstChild;
   while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
   
   var Tab = Tabs.firstChild;
   var i = 0;
   
   do
   {
   if (Tab.tagName == "A")
   {
   i++;
   Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
   Tab.className = (i == id) ? "Active" : "";
   Tab.blur();
   }
   }
   while (Tab = Tab.nextSibling);
   
   // ----- Pages -----
   
   var Pages = TabView.firstChild;
   while (Pages.className != 'Pages') Pages = Pages.nextSibling;
   
   var Page = Pages.firstChild;
   var i = 0;
   
   do
   {
   if (Page.className == 'Page')
   {
   i++;
   if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
   Page.style.overflow = "auto";
   Page.style.display = (i == id) ? 'block' : 'none';
   }
   }
   while (Page = Page.nextSibling);
   }
   
   // ----- Functions -------------------------------------------------------------
   
   function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
   
   function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
   </script>

6. Kemudian klik Save Template
7. Masuk ke menu Page Elements
8. Pilih Add a Gadget » Pilih menu HTML/Javascript, Copy lalu paste kode berikut di dalamnya.
   
   
   
   
   

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

9. Lalu klik Save dan tempatkan widget tab view agar sesuai dengan template anda.
10. Selesai

Sebagai catatan:

• Angka yang berwarna merah adalah ukuran lebar dan tinggi widget tab view.
• Kode yang berwarna hijau adalah teks pada menu utama di bagian atas.
• Kode yang berwarna biru adalah teks yang berada di halaman tab view yang bisa kamu isi dengan link apa saja, gambar, banner dan script lainnya.
• Untuk menambahkan jumlah menu maka perhatikanlah text yang berkedip2-kedip. Tambahkan menu berikutnya di bawahnya.

Contoh pengaturan teks :

• Teks "Tab 1" dapat diganti dengan teks lain seperti "Tutorial Blogger", "seo friendly" atau teks lainnya.
• Sedangkan pada bagian isi menu di bawahnya yang berwarna biru Tab 1.1 <br /> bisa diganti dengan link posting blog seperti ini :
  <ul><li><a href="http://blogurutanpertama.blogspot.com/2010/05/membuat-widget-tab-view.html">Seo Blog</a></li>

sekian tutorial blogger membuat widget tab view kali ini semoga bermanfaat.
untuk yang lagi giat bermain-main SEO blog silahkan berkunjung di label SEO