Hasil tamat proyek ini nantinya akan secara otomatis menciptakan sejumlah widget (bisa ditentukan jumlahnya) membentuk tabulasi-tabulasi dimana judul widget akan menjadi elemen tabulasinya, sedangkan konten widget akan menjadi tubuhnya.
Pertama-tama masuklah ke halaman editor HTML templatemu, kemudian cari script yang tampak menyerupai ini:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>Jika templatemu sudah dilengkapi dengan script tersebut, kita dapat eksklusif melanjutkan ke langkah berikutnya. Tapi bila belum ada, salin dulu script tersebut kemudian letakkan di atas arahan
</head>Setelah itu salin arahan ini kemudian letakkan di bawah script tadi:
<script type='text/javascript'> //<![CDATA[ var starttab = 0; var endtab = 3; var sidebarname = 'sidebar-wrapper'; var home_page_tab=location.href;if(home_page_tab.indexOf("blogger.com")!=-1){var starttab=-1;var endtab=-1}var $jtab1=jQuery.noConflict();$jtab1(document).ready(function(){var a="<div class='widget-wrapper'><ul class='tab-wrapper'></ul></div>";for(i=starttab;i<=endtab;i++){$jtab1("#"+sidebarname+" .widget h2").eq(i).hide();$jtab1("#"+sidebarname+" .widget").eq(i).hide();$jtab1("#"+sidebarname+" .widget .widget-item-control").eq(i).hide()}$jtab1("#"+sidebarname+" .widget").eq(starttab).before(a);i=0;j=0;$jtab1("#"+sidebarname+" .widget > h2").each(function(){if(i>=starttab&&i<=endtab){var b=$jtab1(this).text();$jtab1("#"+sidebarname+" .tab-wrapper").append("<li class='tab' id='tabid"+sidebarname+j+"'>"+b+"</li>");j++}i++});i=0;j=0;$jtab1("#"+sidebarname+" .widget").each(function(){if(i>=starttab&&i<=endtab){$jtab1(this).attr({id:"widgtabid"+sidebarname+j});$jtab1(this).addClass("hompitab");j++}i++});$jtab1("#"+sidebarname+" .tab").click(function(){$jtab1("#"+sidebarname+" .hompitab").hide();$jtab1("#widg"+$jtab1(this).attr("id")).fadeIn();$jtab1("#"+sidebarname+" .tab").removeClass("active-tab");$jtab1(this).addClass("active-tab")});$jtab1("#"+sidebarname+" .tab:first").click()}); //]]> </script>Terakhir tinggal meletakkan arahan CSS ini di atas arahan
]]></b:skin> atau </style>:/* * Modifikasi 3 Oktober 2011 :: Taufik Nurrohman * (http://hompimpaalaihumgambreng.blogspot.com) * (original: http://www.abu-farhan.com) */ .hompitab { position:relative; z-index:1;margin:0px 0px; padding:0px 0px; border:1px solid #ccc; background:#fff; } .hompitab .widget-content { margin:10px 15px !important; } ul.tab-wrapper { margin:15px 0 -10px 0; padding:0 0 0 0; } ul.tab-wrapper li { position:relative; z-index:0; cursor:pointer; background:#666; padding:6px 8px 5px; text-decoration:none; color:#ebebeb; font:bold 11px Arial,Sans-serif; text-shadow:0 1px rgba(0,0,0,0.4); display:inline; list-style:none !important; margin:0px 1px; text-transform:uppercase; -webkit-border-radius:3px 3px 0px 0px; -moz-border-radius:3px 3px 0px 0px; border-radius:3px 3px 0px 0px; } ul.tab-wrapper li.active-tab { border:1px solid #ccc; border-bottom-color:#fff; background:#fff !important; z-index:2; color:#666; text-shadow:none; }Ganti arahan yang Saya beri warna merah dengan ID sidebarmu. (ID sidebar??)
Untuk memilih ID sidebar, kau cari baris arahan yang kurang lebih tampak menyerupai ini:
<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='PopularPosts1' locked='false' title='Populer' type='PopularPosts'/> <b:widget id='Label1' locked='false' title='Media' type='Label'/> <b:widget id='BlogArchive1' locked='false' title='Arsip' type='BlogArchive'/> <b:widget id='HTML4' locked='false' title='Label' type='HTML'/> <b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/> </b:section> </div>Nah, arahan yang Saya beri warna merah itulah yang dimaksud sebagai ID sidebar.
Kode
var starttab=0;var endtab=3; yaitu variabel untuk memilih jumlah widget yang akan dijadikan tabulasi. Urutan pertama dimulai dari 0, keudian tentukan batas tamat widget pada variabel var endtab. Misalnya, bila kau menuliskan angka 3 pada var endtab, maka empat buah widget di sidebarmu akan secara otomatis berkembang menjadi elemen tabulasi, sementara selebihnya tidak.Klik Simpan Template.
Contoh Template dengan Sistem Tabulasi Sidebar
Berikut ini yaitu beberapa teladan template yang dilengkapi dengan sistem tabulasi sidebar, namun dengan metode sasaran tabulasi yang sedikit berbeda. Ingin tahu perbedaannya? Bongkar saja!!!
