Menambah Widget Tab View

Cara menambah widget tab view untuk blogspot

Tab view adalah sebuah widget yang bisa digunakan untuk mengelompokkan informasi atau berita berdasarkan kategori yang di tentukan.
widget tab view ini sangat berguna, selain bisa menghemat space pada tampilan blog kita widget ini pun bermanfaat untuk mempermudah pengunjung blog untuk mencari informasi yang dibutuhkan.

untuk menambah widget tab view di blogspot seperti gambar diatas bisa menggunakan teknik-teknik berikut ini, cara menambah widget tab view ini sudah lama dipakai dan bila teman-teman blogger memiliki trik yang baru silahkan memberikan komentar pada posting ini.

langkah-langkahnya adalah sbb :

1. masuk ke Edit HTML
2. Copy script dibawah ini dan letakkan sebelum code ]]></b:skin>
3. 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: &quot;Arial&quot;, 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;
   }
4. berikutnya copy script dibawah ini dan letakkan sebelum code </head>
   
5. <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. Simpan template anda
   
7. masuk ke page element dan tambahkan gadget baru dengan tipe HTML/JAVASCRIPT
   
8. letakkan code dibawah ini di gadget yang baru anda buat
   
9. <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>
   
10. simpan hasil editing anda
    
11. letakkan widget baru anda di posisi yang telah anda tentukan
12. untuk memberi Judul tinggal ganti saja teks "Tab 1" menjadi "Berita IT"
13. sedangkan untuk membuat isi dari masing-masing tab tinggal mengganti teks Tab 1.1 dengan link, seperti contoh dibawah ini
    
14. <ul><li><a href="http://arbakid.blogspot.com/2010/02/menambah-scroll-box-di-sidebar-blogspot.html">Tutorial scrol box</a></li>
    
15. link silahkan disesuaikan dengan posting artikel anda
    
16. lihat hasilnya
    

semoga informasi repost ini bisa bermanfaat







Share

Posting terkait: