Cara Sederhana Membuat Tab Menu

Tab menu berfungsi menghemat ruang di situs kita karena dapat memuat beberapa menu untuk ditampilkan dalam satu kotak, selain itu membuat tampilan blog menjadi lebih rapi dan profesional. Ada banyak cara untuk membuat tab menu di sidebar, tapi kali ini saya akan menjelaskan secara sederhana membuat tab menu dengan menggunakan jquery.

Widget ini sangat ringan sehingga tidak menambah beban yang dapat memperlambat loading blog. Jika anda tertarik untuk memasangnya silahkan ikuti langkah-langkahnya:

Cara membuatnya sangatlah mudah, Berikut Cara Sederhana Membuat Tab Menu khusus untuk blog yang menggunakan platform blogger / blogspot:

1. Login ke Blogger.

2. Masuk ke Rancangan.
3. Kemudian pilih Edit HTML.

4. Cari kode <div id='sidebar-wrapper'> untuk mempermudah pencarian tekan CTRL+F dan letakkan kode berikut tepat di bawahnya:

<style type='text/css'>
ul.tabs-widget{padding:0}
.tabs-widget li{margin:0 10px 10px 0;background:#fff;float:left;list-style-type:none;display:block;height:30px;line-height:30px;width:60px;border:4px solid #3c5670;text-align:center}
.tabs-widget li a{display:block;color:#3c5670;font-size:14px;text-decoration:none}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:#ff8053;color:#fff}
#sidebartab1 h2, #sidebartab2 h2, #sidebartab3 h2{display:none}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function(){$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);$(this).addClass(&quot;tabs-widget-current&quot;);$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();var activeTab=$(this).attr(&quot;href&quot;);$(activeTab).fadeIn();return false;});});
</script>

<h2><ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Tab 1</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tab 2</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Tab 3</a></li>
</ul></h2>
<div class='clear'/>

<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' maxwidgets='1' preferred='yes'/>
</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' maxwidgets='1' preferred='yes'/>
</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' maxwidgets='1' preferred='yes'/>
</div>

• Silahkan edit pada text yang berwarna merah di atas sesuai dengan template blog Anda.

5. Simpan template anda jika sudah selesai, Selanjutnya masuk ke halaman Rancangan kemudian tambahkan gadget HTML/JavaScript yang anda inginkan untuk setiap tab.

Cukup sekian tips sederhana ini, semoga berguna untuk blog Anda dan selamat mencoba.