Cara Menambahkan Tabview Section Pada Sidebar Blog

Terkadang ada untungnya ketika disuruh membuat blog oleh saudara. Meski dibayar ku nuhun alias gratis tapi selalu dapat ilmu baru tatkala mengobrak-abrik template. Seperti kejadian sekitar dua bulan lalu ketika membuat blog ini, ada tiga temuan yang bermanfaat dan menjadi perbendaharaan ilmu ngeblog saya, salah satunya adalah membuat Tabview Section.

Dibandingkan dengan Tabview Widget, yang cukup merepotkan ketika melakukan pengisian kontennya karena berada dalam satu widget, Tabview Section lebih mudah dan praktis karena selain bisa terdiri dari beberapa widget dalam satu Tabmenu, juga bisa memasukkan gadget tipe non-HTML/JavaScript sehingga membuat kita leluasa dalam mengisikan konten-konten kedalam widget-widget tersebut.

Lalu bagaimana cara membuat Tabview Section ini? Caranya gampang saja, kamu tinggal mengikuti langkah-langkah berikut. Kelihatannya memang ribet karena penjelasannya cukup panjang, tapi jika dipraktekkan akan terasa mudah. Coba saja...

Langkah Pertama

• Login ke akun Blogger kamu.
• Dari halaman Dasbor, pilih Rancangan - Edit HTML.
• Lakukan duplikasi template untuk berjaga-jaga jika terjadi masalah.
• Cari kode ]]></b:skin> (gunakan Control F atau F3).
• Kopi CSS berikut lalu tempelkan (paste) di atas kode ]]></b:skin> tadi (sebaiknya diletakkan di bawah CSS untuk sidebar):

  /*-- Tabview Section -- */
  .tabs-widget {
  list-style:none;
  list-style-type:none;
  margin:0;
  padding:0;
  height:24px;
  border-bottom:1px solid #A4A4A4;
  }
  .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 {
  background-color:#d4d4d4;
  color:#000;
  text-shadow:1px 1px 1px #fff;
  border-top-left-radius:7px;
  border-top-right-radius:7px;
  -moz-border-radius-topleft:7px;
  -moz-border-radius-topright:7px;
  -khtml-border-radius-topleft:7px;
  -khtml-border-radius-topright:7px;
  -webkit-border-top-left-radius:7px;
  -webkit-border-top-right-radius:7px;
  border-right: 2px solid #adadad;
  padding:5px 10px;
  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-color:#A4A4A4; 
  color:#000;
  text-shadow:1px 1px 1px #fff;
  border-top-left-radius:7px;
  border-top-right-radius:7px;
  -moz-border-radius-topleft:7px;
  -moz-border-radius-topright:7px;
  -khtml-border-radius-topleft:7px;
  -khtml-border-radius-topright:7px;
  -webkit-border-top-left-radius:7px;
  -webkit-border-top-right-radius:7px;
  border-right: 2px solid #adadad;
  text-decoration:none;
  }
  .tabs-widget-content {margin-top:5px; background:#F4F4F4}
  .tabviewsection {margin:0 0 2px 0}
  

• Setelah itu letakkan sumber script berikut di bawah ]]></b:skin>.

  <script src='http://enes-sc.googlecode.com/files/jquery151.js' type='text/javascript'/>
  <script src='http://enes-sc.googlecode.com/files/tabsectionplugin.js' type='text/javascript'/>
  

  Catatan:

  Bagi yang menggunakan frame work dari mootools, letakkan script tersebut di bawah script mootools.

  Bagi yang menggunakan script jQuery, seperti pada perintah Top/Down Page, hapus salah satunya.

• Kemudian cari kode untuk widget sidebar, seperti berikut:

  <b:section class='sidebar' id='sidebar1' preferred='yes'>
  

• Setelah ketemu, kopi dan tempelkan script berikut di atasnya:

  <div class='tabviewsection'>
  
  <script type='text/javascript'>
  jQuery(document).ready(function(){
      jQuery(".tabs-widget-content_sc-01-id").hide();
      jQuery("ul.tabs-widget_sc-01-id li:first a").addClass("tabs-widget-current").show();
      jQuery(".tabs-widget-content_sc-01-id:first").show();
  
      jQuery("ul.tabs-widget_sc-01-id li a").click(function() {
            jQuery("ul.tabs-widget_sc-01-id li a").removeClass("tabs-widget-current a"); 
            jQuery(this).addClass("tabs-widget-current"); 
            jQuery(".tabs-widget-content_sc-01-id").hide(); 
      var activeTab = jQuery(this).attr("href"); 
      jQuery(activeTab).fadeIn();
            return false;
      });
  });
  </script>
  
  <ul class='tabs-widget tabs-widget_sc-01-id'>
  <li><a href='#widget_sc-01-id1'>Tabmenu 1</a></li>
  <li><a href='#widget_sc-01-id2'>Tabmenu 2</a></li>
  <li><a href='#widget_sc-01-id3'>Tabmenu 3</a></li>
  <li><a href='#widget_sc-01-id4'>Tabmenu 4</a></li>
  </ul>
  
  <div class='tabs-widget-content tabs-widget-content_sc-01-id' id='widget_sc-01-id1'>
  <b:section class='sidebar' id='sidebartab1' showaddelement='yes'>
  <b:widget id='HTML73' locked='false' title='' type='HTML'/>
  </b:section>                                       
  </div>       
  
  <div class='tabs-widget-content tabs-widget-content_sc-01-id' id='widget_sc-01-id2'>
  <b:section class='sidebar' id='sidebartab2' showaddelement='yes'>
  <b:widget id='HTML74' locked='false' title='' type='HTML'/>
  </b:section>                                         
  </div>       
  
  <div class='tabs-widget-content tabs-widget-content_sc-01-id' id='widget_sc-01-id3'>
  <b:section class='sidebar' id='sidebartab3' showaddelement='yes'>
  <b:widget id='HTML75' locked='false' title='' type='HTML'/>
  </b:section>                                        
  </div>
  
  <div class='tabs-widget-content tabs-widget-content_sc-01-id' id='widget_sc-01-id4'>
  <b:section class='sidebar' id='sidebartab4' showaddelement='yes'>
  <b:widget id='HTML76' locked='false' title='' type='HTML'/>
  </b:section>                                        
  </div>
  
  </div><!-- end tabviewsection -->
  <div style='clear:both;'/>
  

  Keterangan:

  Ubahlah judul Tabmenu 1, Tabmenu 2, Tabmenu 3, dan Tabmenu 4 sesuai dengan judul menu yang diinginkan.

  Jika sidebar blog kamu kecil, hapuslah salah satu Tabmenu dengan cara menghapus kode, misalnya Tabmenu4:

  <li><a href='#widget_sc-01-id4'>Tabmenu 4</a></li>
  

  dan kode:

  <div class='tabs-widget-content tabs-widget-content_sc-01-id' id='widget_sc-01-id4'>
  <b:section class='sidebar' id='sidebartab4' showaddelement='yes'>
  <b:widget id='HTML76' locked='false' title='' type='HTML'/>
  </b:section>
  </div>
  

  Jika ingin mengubah Tabview ini menjadi toggle, ganti fadeIn() pada script jQuery dengan slideToggle("slow").

  Jika ingin menambahkan, tambahkan kode-kode seperti pada cara penghapusan, hanya saja kamu harus mengubah id4 menjadi id5, id6, dst. Juga pada id='sidebartab4' harus diubah menjadi sidebartab5, sidebartab6, dst. Begitu juga pada id='HTML76' harus diubah menjadi HTML77, HTML78, dst.

• Simpan hasil kerjaan kamu. Jika ingin melihat hasil sementara, lakukan pratinjau, hasilnya akan tampak seperti ini:

Langkah Kedua

• Setelah disimpan, klik Elemen Laman
• Perhatikan perubahan yang terjadi, seperti gambar berikut:


• Edit atau masukkan widget-widget yang kamu kehendaki pada blok-blok Tabmenu yang ada.

  Catatan:

  Pada setiap Blok Tabmenu, kamu bisa menambahkan lebih dari satu widget, termasuk yang non-HTML/JavaScript (bawaan blogger).

  Jika ukuran tinggi widget pada setiap blok ingin berukuran sama, lakukan pengeditan pada HTML template. Caranya seperti membuat scrol pada bloglist, yaitu dengan mengubah kode:

  <div class='widget-content'>
  

  menjadi:

  <div class='widget-content' style='overflow: auto; height: 250px'>
  

• Jika sudah selesai, ucapkan alhamdulillah...

Ok, segitu aja informasinya, sob... Semoga bermanfaat...

Catatan Tambahan:

Jika kamu ingin membuat Tabview Section ini lebih dari satu, seperti pada blog ini, kamu tinggal mengkopikan script ketiga dan meletakkannya di tempat yang kamu inginkan. Hanya saja kode sc-01 harus kamu ubah menjadi sc-02, sc-03, dst. Juga kode id HTML-nya kamu ubah menjadi HTML77, HTML78, HTML79, HTML80, atau id HTML lain yang belum ada, misalnya HTML500, HTML501, dst.