Widget Menu Tab View Termudah Untuk Blog

Tentu kamu tau kan apa itu Widget Menu Tab View ? Belum tahu ? ini nih yang namanya menu tab view, silakan lihat gambarnya dibawah.. atau kamu bisa melihat menu tab view pada blog ini..

Oke, sekarang saya jelaskan kenapa postingan ini saya beri judul menu tab view termudah.. yap, karna yang bakal saya bahas disini adalah widget menu tab view termudah yang saya gunakan.. tidak ribet pemasanganya seperti menu tab view kebanyakan yang biasa dibahas di luar sana.. yang membahas tentang memasang menu tab view dengan CSS dan jQuery, bla bla bla.. lalu kamu disuruh memasang kode2 yang akan di masukan ke dalam menu tab view tersebut satu persatu secara manual.. ribet banget bukan ?
Naah.. cara membuat menu tab view ini lebih mudah pemirsaa.. kamu cukup menambahkan kode menu tab view dengan cukup menambahkan widget baru (Add Gadget).

Cara Membuat Daftar Menu/Isi Di Sidebar Blog :

1.  Login ke dashboard blogger anda.

2.  Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

3. Copy script dibawah ini dan paste pada gadget.

    

     <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;
     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;
    }
    .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><!-- Jangan hapus kode dibawah, agar widget bisa berfungsi --><div id='codeholder'><a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a><p>Get this <a href="http://voctwins.blogspot.com/2011/12/widget-menu-tab-view-termudah.html" target="_blank"><blink>widget</blink></a></p></div>

4. Apabila sudah di paste, kamu klik SIMPAN

Apabila kamu sudah menambahkan kode menu tab view di atas, maka kamu cukup mengatur widget2 mana yang ingin kamu masukan, cara penambahannya cukup simple dan mudah, taruh atau geser widget yang ingin kamu tambahkan ke bawah widget menu tab view tsb. silakan lihat gambar di bawah ini:

Simpan, dan lihat hasilnya :D