Kali ini saya akan terangkan cara membuat tab menu pertikal. Tab menu ini hanya modifikasi dari tab menu yang biasa anda lihat. Tampilannya hampir mirip dengan accordion menu, jadi lebih atraktif dari yang lain. Widget ini juga sudah dilengkapi dengan fasilitas arsip blog, recent komentar, dan recent posts. Ok gan...gak usah terlalu banyak ngobrolnya. Silahkan ikuti langkah berikut

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js'>
</script>
<script>
    $(document).ready(function() {
        $(&quot;#tabs&quot;).tabs();
    });
</script>
<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/blitzer/jquery-ui.css' rel='stylesheet' type='text/css'/>

Selanjutnya Simpan Template
Klik lagi Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<div id="tabs">
<ul><li>
<a href="#tabs-1">Arsip</a></li><li>
<a href="#tabs-2">Komentar</a></li><li>
<a href="#tabs-3">Entri Populer</a></li></ul>

<div id="tabs-1">
<div style="width: 100%; height: 300px; overflow: auto;">
<script style="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/blogonol-daftarisi.js"></script>
<script src="http://blogspot-goblog.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div></div>

<div id="tabs-2">
<div style="width: 100%; height: 300px; overflow: auto;">
<script style=text/javascript src=http://hbhost.googlecode.com/files/recent-comments.js></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://blogspot-goblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script> <style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} </style></div></div>

<div id="tabs-3">
<script src="http://bloekoetoek-blogonol.googlecode.com/files/recentpost.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://blogspot-goblog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp"></script></div>
</div>

Cara Edit:
Silahkan ganti kode berwarna merah (termasuk juga kode hitam dengan cetak tebal {- blogspot-goblog -} kalau anda mengganti kode merah keseluruhannya) dengan dengan kode anda
Ganti juga tulisan berwarna biru dengan judul anda
Ganti alamat blogspot-goblog dengan alamat blog anda


Selanjutnya Klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu
Makasih kepada blogonol dan bloggertrix atas scriptnya