Mudah Membuat Tab View Menu di Blog

Tab view menu ini berfungsi untuk menampilkan beberapa widget dengan bentuk tab menu dalam satu widget. Intinya kita meringkasnya menjadi satu dengan tampilan tab di atasnya. Membuat tampilan blog semakin menarik, simple dan tentunya minimalis. Berikut langkah-langkahnya:

1) Login blogger

2) Pilih tata letak

3) Tambahkan gadget, pilih html javascript

4) Copy kode di bawah ini, download scriptnya di sini

 <style type="text/css">
    .tabber {
     padding: 0px !important;
     border: 0 solid #bbb;
    }
    .tabber h2 {
     float: left;
     margin: 2px 0px 0px 2px;
     font-size: 15px;
     padding: 3px 5px;
     border: 1px solid #bbb;
     margin-bottom: -1px;
     overflow: hidden;
     position: relative;
     background: 708090;
     cursor:pointer;
     -moz-border-radius:5px 5px 0 0;
     border-radius:5px 5px 0 0;
    }
    html .tabber h2.active {
     background: #000000;
     border-bottom: 1px solid #fff;
    }
    .tabber .widget-content {
     border: 1px solid #bbb;
     padding: 10px;
     background: 4169E1;
     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></div>

5) Simpan tanpa judul. Letakkan di atas widget yang ingin kamu tab

Catatan: Kamu bisa ganti sendiri warna background dan ukuran marginnya. Bahkan kamu bisa menambahkan jumlah tabnya (lihat tabCount).