Cara Menciptakan Simple Tabber Di Sidebar

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

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

Untuk hasil final tabber ini gambarnya ibarat diatas, jikalau ingin melihat demonya disini. Baiklah, eksklusif 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 isyarat berikut di atas isyarat : ]]></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/AVvXsEh1iGS9TgpHcU2lw6Pn4_hNFPnmkOAhNN11Iald2T54zjwkyh7UN1Mcb9Pj72tMU-pwv4r4lDjsX0EmDM4r3i3Eq4E21F-_cxoy8oTWjnGSMxN9ToauKiKN5HD96UKtAV3HwutuV8t12Nw/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; } 

5. Tabber ini butuh sebuah jquery.min.js untuk sanggup bekerja dengan baik, anda harus menambahkan isyarat 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/j4vascript'/>

6. Setelah itu, tambahkan isyarat berikut ini di bawah script jquery diatas
   

   <script type='text/j4vascript'>
   var starttab=0;
   var endtab=3;
   var sidebarname="sidebar";
   </script>
   <script src='http://creatingwebsite.googlecode.com/files/tabber.js' type='text/j4vascript'/>

   
   
   
   Keterangan :
   var starttab=0;
   var endtab=3;
   var sidebarname="sidebar";
   
   Starttab yakni nomor awal untuk widget yang Anda pilih, mulai menghitung dari 0. Endtab yakni 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 yakni id sidebar letak tabber nantinya, sanggup anda letakkan di kiri menggantinya dengan sidebarleft atau sanggup juga diletakkan di tengah, yang perlu diperhatikan Anda harus mencari id dimana tabber ini akan diletakkan, biasanya tempatnya ibarat isyarat 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 menciptakan 4 widget yang akan ditampilkan dalam tabber, ingat dikasih judul semua ya widgetnya. Itu tadi tutorial dasar dari saya untuk menciptakan 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 biar bermanfaat.....

Sumber http://johanrakyat.blogspot.com

Share this post

Berlangganan update artikel terbaru via email: