Cara Membuat Tab View Widget Pada Sidebar

Pusing dengan widget yang kebanyakan tapi sedikit ruang yang tersedia di sidebar blog kamu? Tenang sobat, jangan putus asa dan lantas gantung keyboard alias berhenti jadi blogger, hehehe.... Ada solusi untuk mengatasi hal itu, yaitu dengan membuat menu Tab View. Tab View ini (dikenal juga dengan istilah Slide Show Menu) sangat berguna bagi kamu yang ingin menambahkan berbagai widget, baik itu Recent Post, Recent Comments, Link Blogroll, Link Banner teman, dll., tetapi tidak memiliki ruang yang cukup untuk menambahkan itu semua. Kamu bisa melihat contoh Tab View ini pada sidebar SC Community yang berisi menu: Ruang Tanya, Komentar, Link Sobat, dan Banner Sobat.

Untuk membuat Tab View ini dapat kamu pelajari dari situs www.o-om.com, trik-tips.blogspot.com, suprisdiantoko.com, dan situs-situs lain yang mengupas masalah ini. Tapi jika kamu lagi males bertamasyaria di dunia luna maya, pelajari saja cara membuat Tab View berikut:

Langkah Pertama

• Login ke akun Blogger kamu.
• Dari halaman dashboard, pilih Edit HTML.
• Pada halaman Edit HTML, cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F untuk mencarinya.
• Kopikan kode CSS berikut (gunakan Control C) dan letakkan di atas kode ]]></b:skin> tersebut.
  

  /* Menu Tab View
  ----------------------------------------------- */
  div.TabView div.Tabs {
  padding-top: 0px;
  height: 24px;
  overflow: hidden;
  }
  
  /* Menu Utama */
  div.TabView div.Tabs a {
  float: left;
  display: block;
  width: 80px; /*ukuran lebar tabmenu*/
  text-align: center;
  height: 24px; /*ukuran tinggi tabmenu*/
  padding-top: 3px;
  margin-right:4px; /*jarak antartabmenu*/
  vertical-align: middle;
  border: 1px solid #CCC; /*warna border menu*/
  border-bottom-width: 0;
  font-family: "Arial", Times New Roman, Serif; /*jenis hurup menu*/
  font-size: 12px; /*besar hurup menu*/
  letter-spacing: -1px;
  background-color: #A4A4A4; /*warna latar menu*/
  color: #FFFFFF; /*warna hurup menu*/
  -moz-border-radius-topleft:10px;
  -moz-border-radius-topright:10px;
  -webkit-border-top-left-radius:10px;
  -webkit-border-top-right-radius:10px;
  }
  
  div.TabView div.Tabs a.Active {
  background-color: #888888; /*warna background menu aktif*/
  color: #FFFFFF;
  }
  
  div.TabView div.Tabs a:hover {
  background-color: #999999; /*warna background menu hover*/
  color: #FFFFCC;
  font-weight: bold;
  }
  
  /* Kotak Utama */
  div.TabView div.Pages {
  clear: both;
  border: 1px solid #CCC; /*warna border kotak utama*/
  overflow: hidden;
  background:url("http://sites.google.com/site/ruangsc/image/bgtabview.gif"); /*background kotak utama*/
  }
  
  div.TabView div.Pages div.Page {
  height: 100%;
  padding: 0px;
  overflow: hidden;
  }
  
  div.TabView div.Pages div.Page div.Pad {
  padding: 3px 5px;
  font-size: 12px; /*besar hurup kotak utama*/
  }

  
  
  Pada bagian yang diberi tanda keterangan, kamu dapat mengubahnya sesuai dengan yang diinginkan, seperti pada ukuran, warna maupun jenis hurup.
• Setelah itu letakkan sumber script berikut di bawah ]]></b:skin>
  

  <script src="http://enes-sc.googlecode.com/files/tabview.js" type="text/javascript"/>

• Simpanlah hasil editing tersebut.

Langkah Kedua

• Pilih tab Elemen Halaman (Page Element).
• Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
• Kopikan script berikut dan letakkan pada kotak Content yang tersedia:
  

  <form action="tabview.html" method="get">
  <div id="TabView" class="TabView">
  <div style="width: 100%;" class="Tabs">
  <a title="Keterangan Menu 1">Menu 1</a>
  <a title="Keterangan Menu 2">Menu 2</a>
  <a title="Keterangan Menu 3">Menu 3</a>
  <a title="Keterangan Menu 4">Menu 4</a>
  </div>
  <div style="width: 100%; height: 200px;" class="Pages">
  
  <!--Awal Menu 1-->
  <div class="Page"><div class="Pad">
  Isi Menu 1.1<br/>
  Isi Menu 1.2<br/>
  Isi Menu 1.dst<br/>
  </div></div>
  <!--Akhir Menu 1-->
  
  <!--Awal Menu 2-->
  <div class="Page"><div class="Pad">
  Isi Menu 2.1<br/>
  si Menu 2.2<br/>
  Isi Menu 2.dst<br/>
  </div></div>
  <!--Akhir Menu 2-->
  
  <!--Awal Menu 3-->
  <div class="Page"><div class="Pad">
  Isi Menu 3.1<br/>
  Isi Menu 3.2<br/>
  Isi Menu 3.dst<br/>
  </div></div>
  <!--Akhir Menu 3-->
  
  <!--Awal Menu 4-->
  <div class="Page"><div class="Pad">
  Isi Menu 4.1<br/>
  Isi Menu 4.2<br/>
  Isi Menu 4.dst<br/>
  </div></div>
  <!--Akhir Menu 4-->
  
  </div></div></form>
  
  <script type="text/javascript" src="http://enes-sc.googlecode.com/files/tabview-tab.js"></script>

  
  
  Pada tulisan yang berwarna merah tebal dapat kamu ubah disesuaikan dengan kebutuhan. Milsalnya pada ukuran width (lebar) dan height (tinggi), dapat kamu gunakan ukuran % atau pixel (px) yang disesuaikan dengan lebar sidebar blog kamu. Begitupun dengan judul Menu dan Isi Menu dapat kamu buat sendiri sesuai keinginan.
  Selain itu kamu juga bisa menambahkan menu-menu lain (lebih dari 4) asalkan lebar sidebar blog kamu mencukupi. Atau bisa juga mengakalinya dengan cara memperkecil ukuran lebar menu pada script yang tadi diletakkan pada HTML template blog kamu.
• Simpan hasil kerjaan kamu dan lakukan pratinjau (preview) untuk melihat hasilnya.

Posted in: Tips Blogger