Cara Membuat Daftar Isi Melayang Otomatis

Halo blogger Indonesia, sekarang saya akan share cara membuat widget daftar isi yang melayang di blog. Widget ini berguna untuk memudahkan para pengunjung untuk menelusuri seluruh artikel di dalam blog kita dengan cara yang menyenangkan. Jadi mereka tidak harus bersusah payah membolak-balik ke halaman postingan lama kita, berkali-kali harus menunggu untuk proses loading, nah kalo yang pake modem lelet tentunya jika niat mereka semula untuk sekedar melihat judul-judulnya saja jadinya batal deh.

Nah maka dari itu kita menyajikan menu khusus untuk memudahkan bagi mereka yang berkeinginan melihat-lihat judulnya saja, terlebih kalo kebetulan dalam daftar isi tadi ada yang menarik bagi mereka untuk dibaca atau sedang mereka cari-cari, lumayan kan nambah traffic postingan blog.

nah berikut langkah-langkahnya:

masuk ke dashboard blogger
pilih tata letak
pilih add/tambahkan gadget
pilih HTML/javascript
kemudian salin(copy-paste) kode script berikut:

<style type="text/css"> #gc{ position:fixed; left:300px; z-index:+1000; padding: 5px 15px; } * html #gc{position:relative;} .gctab{ height:0px; width:500px; float:center; cursor:pointer; background:url(blog-bg.pnf); } .gccontent{ float:center; background:#fff; border-right: 2px solid red; border-bottom: 2px solid red; border-top: 2px solid red; border-left: 2px solid red; -moz-box-shadow: 0 10px 10px #AFE137; -moz-border-radius-topleft:1px; -moz-border-radius-topright:1px; -moz-border-radius-bottomleft:1px; -moz-border-radius-bottomright:1px; padding:10px; } </style> <script type="text/javascript"> function showHidegc(){ var gc = document.getElementById("gc"); var w = gc.offsetWidth; gc.opened ? movegc(0, 1500-w) : movegc(1500-w, 0); gc.opened = !gc.opened; } function movegc(x0, xf){ var gc = document.getElementById("gc"); var dx = Math.abs(x0-xf) > 25 ? 35 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gc.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("movegc("+x+", "+xf+")", 10);} } </script> <div style="top: 981px;" id="gc"> <div class="gctab" onclick="showHidegc()"> </div> <div class="gccontent"> <span style="color: rgc(102, 0, 0);">

<div style="border: 0px solid #000000; height: 400px; overflow: auto; padding: 5px; width: auto;">
<script src=" http://sites.google.com/site/dhany99487/widget/daftar_isi_otomatis_muncul.js "></script><script src="http://dhanynurdiansyah.blogspot.com/feeds/posts/default?max-results=999&alt=json-in-script&callback=loadtoc"></script></div>
</span></div>

<center><a href="javascript:void(0);" onclick="showHidegc()"><input class="close" type="button" value="Close" /></a> </center></div> <script type="text/javascript"> var gc = document.getElementById("gc"); gc.style.top = (-400-gc.offsetWidth).toString() + "px"; </script> <a style="position:fixed;bottom:0px;left:0px;" class="west" href="javascript:void(0);" onclick="showHidegc()" title="Daftar Isi Blogku"><img src="https://lh3.googleusercontent.com/-pjqiWiH3b_k/UOllC0V-9QI/AAAAAAAAAmo/2Azt3WS36Tk/s800/icon-buku.png" /></a>

catatan:

untuk kode berwarna biru merupakan tata letak, lebar border, dan warna border, silahkan diedit sendiri sesuai dengan kebutuhan
untuk kode berwarna hijau silahkan diganti dengan URL blog kamu
untuk kode berwarna orange merupakan kalimat yang muncul saat tombol daftar isinya disorot dengan kursor, silahkan diedit sendiri sesuai keinginan
untuk kode berwarna kuning adalah alamat URL gambarnya, jika kamu punya gambar lain yang lebih menarik silahkan diganti

SEKIAN SOBAT BLOGGER...