Membuat Simple Tabber di Sidebar

Tabber yang biasa kita lihat di sidebar dapat berfungsi untuk menghemat space dalam sebuah blog, sehingga blog lebih kelihatan rapi. Banyak cara dalam membuat tabber ini, sebelumnya saya juga pernah membuat tutorial membuat tab view menu ini bisa dilihat pada membuat Tab View Menu Tanpa Edit HTML dan Tab View di Blogspot. Kelemahan dari tabber sebelumnya adalah kita mesti memasukkan URL postingan satu persatu ke dalamnya sehingga tidak secara otomatis jika ada postingan baru akan muncul di tabber.

Nah kali ini saya akan memberikan satu tips untuk Anda semua dalam membuat tabber, sangat sederhana dan tidak memperberat loading blog. Tips ini saya dapat dari Pak Abu Farhan, master blogger Indonesia yang sudah malang melintang di dunia persilatan.. eh dunia perbloggeran. Sebenarnya membuat tabber atau tab view menu ini juga bisa dengan menggunakan fungsi accordion tapi terkadang scriptnya bentrok dengan script lain dengan script silder misalnya, bisa sih diatasi tapi mesti merubah jquery menjadi no conflict, ah ribet deh pokoknya.

tabber sidebar maskolis

Untuk hasil akhir tabber ini gambarnya seperti diatas, jika ingin melihat demonya disini. Baiklah, langsung saja pada cara pemasangannya :
  1. Login ke blogger dengan akun anda
  2. Di dashboard klik Tata Letak > pilih Edit HTML centang expand widget templates
  3. Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
  4. Letakkan kode berikut di atas kode ]]></b:skin>
    .widget-wrapper2{
    border:1px solid #494e52;
    background-color:#636d76;
    padding:10px;
    }

    .widget-tab {
    background:#c9dbdd;
    font-family:Arial,Helvetica,sans-serif;
    padding:5px !important;
    }

    .widget-tab  ul {
    margin:0px;
    padding:0px 5px 0 5px;
    }
    .widget-tab  ul li {
    list-style:none;
    border-bottom:1px dotted #a4bddf;
    padding-top:4px;
    padding-bottom:4px;
    font-size:12px;
    }
    .widget-tab  ul li:last-child {
    border-bottom:none;
    }
    .widget-tab  ul li a {
    text-decoration:none;
    color:#3e4346;
    }
    .widget-tab  ul li a small {
    color:#8b959c;
    font-size:9px;
    text-transform:uppercase;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    position:relative;
    left:4px;
    top:0px;
    }
    .tab-content  ul li a:hover {
    color:#a59c83;
    }
    .tab-content  ul li a:hover small {
    color:#baae8e;
    }

    .active-tab{
    background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOMkBtzp5UUhTb8Y1aeW7ZHkTavH85-35xLNq6NIShOzZI02_Uaa79E2DyoYsWg-uL9cntfFx3jqPr0vifpWPkfCTnIcJ_FUjsVpD_nAsaRsI5VEIIBGPh9NJl2GSXuyRD1z82Hvhfc0k/s1600/sidebar.png) repeat-x scroll left bottom !important;
    color:#282E32 !important;        
    }

    ul.tab-wrapper {
    margin:0px; padding:0px;
    margin-top:5px;
    margin-bottom:6px;
    }

    ul.tab-wrapper li{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicGX4eD0MZ9emup6SO4Q2CM9EKif9ndqHpmlhh3d3rl3pqWGl2JUgj8WB_XBQyo-Uc1azGdf5vjC5VhoSC0ZIo0xpKZt6r0Ve2vk8bnBgRYD5jxeS1XGtmfO1aL-07d7NbiNGZKJp5pls/s1600/menu-m1.png) repeat-x top;
    color:#FFF;
    cursor:pointer;
    display:inline;font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:9px;
    font-weight:700;
    line-height:2em;
    list-style-image:none!important;
    list-style-position:outside!important;
    list-style-type:none!important;
    margin-right:1px;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    padding:8px 14px
    }
  5. Tabber ini butuh sebuah jquery.min.js untuk bisa bekerja dengan baik, anda harus menambahkan kode di bawah ini diatas </head> (jika pada template anda sudah terinstall, langkah ini dilewati saja) :
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
  6. Setelah itu, tambahkan kode berikut ini di bawah script jquery diatas
    <script type='text/javascript'>
    var starttab=0;
    var endtab=3;
    var sidebarname=&quot;sidebar&quot;;
    </script>
    <script src='https://masolis-javascript.googlecode.com/svn/trunk/tabber.js' type='text/javascript'/>
    Keterangan :
    var starttab=0;
    var endtab=3;
    var sidebarname="sidebar";
    Starttab adalah nomor awal untuk widget yang Anda pilih, mulai menghitung dari 0. Endtab adalah jumlah untuk widget terakhir yang ingin ditampilkan dalam tabber. Endtab=3 berarti widget yang ditampilkan dalam tabber ada 4 (0, 1, 2, 3 empat kan jumlahnya).

    Sidebarname adalah id sidebar letak tabber nantinya, bisa anda letakkan di kiri menggantinya dengan sidebarleft atau bisa juga diletakkan di tengah, yang perlu diperhatikan Anda harus mencari id dimana tabber ini akan diletakkan, biasanya tempatnya seperti kode di bawah ini (perhatikan yang warna kuning) :
    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
  7. Setelah itu Save/Simpan template, sudah selesai.
Setelah itu anda tinggal membuat 4 widget yang akan ditampilkan dalam tabber, ingat dikasih judul semua ya widgetnya. Itu tadi tutorial dasar dari saya untuk membuat tabber sederhana dengan jquery, silahkan dimodifikasi sendiri warna serta tampilan lainnya. Sesuaikan dengan komposisi warna blog Anda sehingga tabber ini semakin memperindah tampilan blog dan pengunjung semakin betah berlama-lama di blog Anda. Selamat mencoba dan semoga bermanfaat.....


Script source by : Abu Farhan
Label: