Cara Membuat Tab Content Mudah dan Simple

Salam Sobat Blogger semua semoga kabar baik semua..kali ini saya akan share Cara Membuat Tab Content yang Simple dan tak perlu Edit HTML yang menyebabkan error template kita dan anda juga harus secara manual dalam memasukkan isinya... caranya cukup mudah dan penggunaannya pun cukup mudah yaitu kita tinggal tambahkan pada gadget template.

Sebenarnya cukup banyak cara membuat Tab Content yaitu dengan jquery maupun css tapi saya share yang paling mudah dan simple.

Kelebihannya:

1. Dapat mengakomodasi jumlah widget yang tidak terbatas
2. Menjaga penampilan asli widget tab
3. Sepenuhnya widgetized untuk kemudahan instalasi dan penghapusan. Jika Anda tidak menyukai apa yang dilakukannya, cukup menghapus gadget HTML / Javascript.

Caranya :

1. Login ke akun Blog Anda
2. Klik Rancangan -- Elemen Halaman -- Add Gadget -- HTML/Java Script
3. Biarkan Judul Kosong
4. Copy code berikut dan paste :
   
   
   <style type="text/css">
   .tabber {
   padding: 0px !important;
   border: 0 solid #bbb;
   }
   .tabber h2 {
   float: left;
   margin: 0 1px 0 0;
   font-size: 12px;
   padding: 3px 5px;
   border: 1px solid #bbb;
   margin-bottom: -1px; /*--Pull tab down 1px--*/
   overflow: hidden;
   position: relative;
   background: #e0e0e0;
   cursor:pointer;
   -moz-border-radius:5px 5px 0 0;
   border-radius:5px 5px 0 0;
   }
   html .tabber h2.active {
   background: #fff;
   border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
   }
   .tabber .widget-content {
   border: 1px solid #bbb;
   padding: 10px;
   background: #fff;
   clear:both;
   margin:0;
   }
   .codewidget, #codeholder {
   display:none;
   }
   </style>
   
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
   <script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
   <script type="text/javascript">
   $(document).ready(function() {
   $('#codeholder').bloggerTabber ({
   tabCount : 3
   });
   });
   </script>
   
   <!-- to make sure the widget works, do not alter the code below -->
   <div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">widget</a></p></div>
   
   
   - tabCount : 3 == untuk menambah jumlah tab content
5. Posisi gadget HTML / Javascript di atas gadget yang ingin Anda tabify
   
   
6. Klik Save dan lihat blog anda

CATATAN

- Pastikan setiap Widget/gadget ada judulnya karena tabber tidak akan bekerja dengan baik tanpa judul

- Judul widget pendek saja

- Jangan lupa untuk menguji di Internet Explorer. Widget ini dapat menyebabkan "Operasi dibatalkan" kesalahan dalam IE untuk beberapa non-desainer template. Jika itu terjadi, widget ini bukan untuk Anda

thank to: http://www.bloggersentral.com

Related Post Cara Membuat Tab Content Mudah dan Simple