Cara Membuat Widget Sitemap/Daftar Isi Melayang di Blog

Cara Widget Membuat Sitemap/Daftar Isi Melayang di Blog hai sobat Vista Setelah Posting sebelumnya mengenai Membuat Daftar Isi Versi 1, dan Berikut ini adalah Daftar Isi/Sitemap yang melayang di blog kalian yang merupakan modifikasi saya sendiri hehe..
ok ? penasaran ? yu cekidot aja langsung :p

1. Seperti biasa, login ke Blogger.
2. Setelah itu klik Dasbor pada blogspot anda
3. Klik Tata Letak
4. Klik Tambah Gadget
5. Pilih HTML/Javascript dan letakkan script ini didalamnya

---

<!-- Widget Daftar Isi-->
<style type="text/css">
.gb_fixed{
position:fixed;
top:50px;
left:0px;
z-index:+999;
}

* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:2px solid gray;
background:#111;
padding:0px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div> <a href="javascript:void(0)" onclick="gb_showHideGB()"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCR0J8BoZ2r-xZJE6vYIrdkpXvDwqG8JSaiyF5o6oqcYpt8IY8GnLnS1Kcd2yYg8r8vzNzXA6c5oKwQ7EJ3FtFejPgZ2N42lt0tdhHvFnve2QQ68hAGgLfh2CqWTnpPOgs5Ufo1yTy8GV7/s320/CloseButtonHot.bmp" /></a> </div>

<!-- Masukkan Widget -->
<div style="overflow:auto; width:auto; height:450px; padding:2px;border:1px ridge #222222; font-size:14px; font-color:#ffffff;">
<script style="text/javascript" src="http://yourjavascript.com/20130124261/jam-vista-blogtoc.js"></script>
<script src="http://jam-vista.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>
</td></tr></table>
</div>

<script src="http://yourjavascript.com/12428336121/jam-vista-blogspot-com-floatingku.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWgF9XyXgy5FqHsUsc920OGOUP5JWatCiVhzYgLSWekXfGRr3LL2CYd0tN1M1u-Kwsf-8NwNoiwx9FDwImxQ113YhLY8Bgtax8gOfoRqKvhIxX_Vm4hjTQmgcWRFZpASmR3gkphdmGGNKg/s128/cooltext745063410.png" style="filter: alpha(opacity=60);
opacity: 0.6;"
/>
</a>
</div>
<style type="text/css">
div.TabView div.Tabs
{height: auto;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 75px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:5px groove #141414; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#ffffff; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #222222; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:5px groove #141414; /* Warna border Kotak Utama */ overflow:hidden; background-color:#222222; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'></script>

---

6. Ganti link berwarna merah dengan link blog anda
7 . Simpan Widget