Tutorial Membuat Daftar Isi ber scrolling

Saya akan memeberi tutorial membuat menu daftar Isi seperti yang ada di bagian kana blog saya ini....
Kode ini adalah gabungan dari kode milik Abufarhan..Karena dulu waktu belum saya gabungkan,widget ini
sangatlah besar...sehingga tidak menarik untuk dilihat.Lalu saya pikirkan untuk menggabungkan nya....Hingga jadi seperti ini.

Jika anda mengingin kan ikuti langkah-langkah berikut:
1.log in blogger anda.
2.Langsung ke layout anda/tataletak anda...
3.Klik edit html
cari kode ]]></b:skin>
lalu taruh kode ini di atas ]]></b:skin>:

div.TabView div.Tabs
    {
    height: 24px;
    overflow: hidden;
    }

    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 90px;
    text-align: center;
    height: 24px;
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid #000000;
    border-bottom-width: 0;
    text-decoration: none;
    font-family: "Arial", Times New Roman, Serif;
    font-weight: 900;
    color: #000080;
    }

    div.TabView div.Tabs a:hover, div.TabView div.Tabs a:active
    {
    background-color: #BDBDBD;
    }

    div.TabView div.Pages
    {
    clear: both;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    overflow: hidden;
    }

    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 0px;
    overflow: hidden;
    }

    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }

4.lalu cari </head> truh kode berikut di atas kode </head>

<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>
5.Save template.
6.Pergi ke desain atau design---->pilih add gadget atau tambahkan HTML
masukan kode berikut:
<form action="tabview.html" method="get">
    <div class="TabView" id="TabView">

    <div class="Tabs" style="width: 250px;">
           </div>

    <div class="Pages" style="width: 250px; height: 200px;">

    <div class="Page">
    <div class="Pad">

    <script style="text/javascript" src="http://mu-java.googlecode.com/files/tabview.js"></script>
<script src="http://yourBLOG.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script><br />

    </div>
    </div>

    <div class="Page">
    <div class="Pad">

    d<br />


    </div>
    </div>

    <div class="Page">
    <div class="Pad">

   c<br />

    </div>
    </div>

    </div>
    </div>
    </form>

    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>
Kode yang berwarna merah ganti dengan blog anda.....OK!!!!