Daftar Isi Blog Melayang

Daftar Isi Blog Melayang - Widget daftar isi yang melayang 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 menunggu untuk proses loading,jika yang memakai modem lelet tentunya niat mereka semula untuk sekedar melihat judul-judulnya saja jadinya batal. 

 Cara Membuat Daftar Isi Blog Melayang Otomatis

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

Nah berikut langkah-langkahnya:

• Masuk ke dashboard blogger
• Pilih tata letak => tambahkan gadget => HTML/javascript
• Kemudian masukkan kode 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);">
<!-- Mulai Daftar Isi -->
<div style="border: 0px solid #000000; height: 400px; overflow: auto; padding: 5px; width: auto;">
<script src=" http://hendric-simarmata.googlecode.com/files/daftar_isi_otomatis_muncul.js "></script>
<script src="http://athallahrajungan.blogspot.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>
</span></div>
<!-- Selesai Daftar Isi-->
<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="http://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

Oke, silahkan langsung di coba, semoga artikel ini bermanfaat bagi kita semua. Terimakasih