Beberapa waktu lalu saya mendapatkan pertanyaan dari pembaca blog melalui komentarnya yaitu mengenai salah satu sidebar blog yang dapat memuat beberapa wdget dalam satu tempat, dimana kita sudah akrab menyebut trik tersebut dengan nama multi tab sidebar.
Namun saat itu
karena masih awam tentang bagaimana membuat multi tab tersebut dengan
terpaksa saya menjawab bahwa itu adalah bawaan dari template dan saya
sendiri tidak tau bagaimana cara membuatnya.
Penyelidikan tentang cara membuat multi tab sidebar saya mulai ketika ingin memiliki widget Artikel Terkomentari seperti miliknya vivanews, karena ingin menampilkan widget artikel terkomentari tanpa perlu menambahkan lagi ruang untuk widget tersebut, dan salah satu solusi terbaik adalah multi tab sidebar tadi.
Cara membuat multi tab sidebar:
- Masuk dashboard blogger
- Pilih template>>edit HTML
- Cari kode <head> dengan menggunakan CTRL+F
- kemudian masukkan jquery berikut di bawahnya
Jika blog kamu sebelumnya sudah memiliki jquery, abaikan langkah di atas<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>
- Kemudian cari ]]></b:skin>
- Masukkan kode script ini di bawahnya
- lalu masukkan kode css berikut diatasnya:
<!--multi tab sidebar--> .tabs-widget { list-style: none; list-style-type: none; margin: 0 0 10px 0; padding: 0; height: 40px; } .tabs-widget li { list-style: none; list-style-type: none; margin: 0 0 0 4px; padding: 0; float: left; } .tabs-widget li:first-child { margin: 0; } .tabs-widget li a { color: #8F8C7C; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlY3dCs3aYLZ4fTvSCuvC7VC_x8t2XXpx2kOHVw2RIBR__ikN_Uf8l27ZIoogQX32X1-sFSBo2pxRUz5aV3EFh-aYenZRjD7Z_puIRtHxsnfH-xrncfGPAQdRnLx-9Smijk8nc87JHtEc/s1600/tabs-widget-bg.png) left top repeat-x; padding: 12px 14px; display: block; text-decoration: none; font: bold 11px Arial,Helvetica,Sans-serif; text-transform: uppercase; } .tabs-widget li a:hover, .tabs-widget li a.tabs-widget-current { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlY3dCs3aYLZ4fTvSCuvC7VC_x8t2XXpx2kOHVw2RIBR__ikN_Uf8l27ZIoogQX32X1-sFSBo2pxRUz5aV3EFh-aYenZRjD7Z_puIRtHxsnfH-xrncfGPAQdRnLx-9Smijk8nc87JHtEc/s1600/tabs-widget-bg.png) left -140px repeat-x; color: #EE5D06; text-decoration: none; } .tabs-widget-content { } .tabviewsection { margin-top: 10px; margin-bottom: 10px; } <!--multi tab sidebar-->
- Kode css diatas adalah kode default yang umum digunakan oleh para designer template, kecuali designer-designer lokal, semua kode di atas sama kecuali pada background urlnya dan jenis warna karena setiap multi tab akan menyesuaikan dengan template masing-masing
- Kemudian cari kode:
masukkan kode berikut di bawahnya:<div class='column-right-inner'> atau <div id='sidebar-wrapper'>
<div class='tabviewsection'> <script type='text/javascript'> jQuery(document).ready(function($){ $(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide(); $("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show(); $(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show(); $("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() { $("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a"); $(this).addClass("tabs-widget-current"); $(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); }); </script> <ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'> <li><a href='#widget-themater_tabs-1432447472-id1'>About</a></li> <li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li> <li><a href='#widget-themater_tabs-1432447472-id3'>Archives</a></li> </ul> <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'> <b:section class='sidebar' id='sidebartab1' preferred='yes'> </b:section> </div> <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'> <b:section class='sidebar' id='sidebartab2' preferred='yes'> </b:section> </div> <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'> <b:section class='sidebar' id='sidebartab3' preferred='yes'> </b:section> </div> </div> <div style='height:5px;clear:both;'/>
- simpan template, kemudian pada tata letak kamu akan menemui perubahan seperti ini:
- masukkan beberapa elemen widget dengan cara seperti ini:
- Kemudian langkah berikut ini adalah panduan bagi yang ingin menambahkan multi tab sidebarnya saja(misalkan 2 multi tab menjadi 3 multi tab)
- Jika sebelumnya kamu sudah memiliki multi tab sidebar, maka untuk cssnya tidak perlu kamu ubah lagi/abaikan langkah pertama
- misalkan kamu hanya memiliki 2 tab saja, maka tambahkan kode:
<li><a href='#widget-themater_tabs-1432447472-id3'>Nama sidebar</a></li>
Tepat di bawah kode id1 dan id2
- Sesuaikan kode-kode yang ditandai dengan kesamaan warnanya
- dan tambahkan kode berikut ini:
Simpan template<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'> <b:section class='sidebar' id='sidebartab3' preferred='yes'> </b:section> </div>
1 Komentar untuk "Membuat Multi Tab pada Sidebar Blogger"
thak ya gan infonya
Don't forget leave some comment