Membuat Daftar Isi Melayang

Seperti yang ditanyakan sohib saya Cuirast , "bagaimana membuat daftar isi melayang seperti diblog saya ini.?", maka kali ini saya akan memposting cara membuatnya.

Sebetulnya widget ini adalah gabungan dari widget - widget yang saya dapat dari blog - blog tetangga, mohon maaf ya bagi yang buat widget - widgetnya,, saya pinjam scriptnya,, he , he.

Bagi anda pengguna blogger sudah pada tahukan widget bukutamu melayang yang banyak banget tuh tutorial membuatnya.

Nah untuk widget daftar isi melayang ini, saya hanya menggabungkan widget buku tamu melayang  dengan widget daftar isi punyanya infoblog

Berikut cara membuat daftar isi melayang :

1. Login ke akun blogger anda
2. Masuk dasbor ->tata letak
3. Tambah Gadget HTML/Javascript
4. Copykan script dibawah ini

<style type="text/css">
#di{ position:fixed; top:10px; z-index:+1000; }
* html #di{position:relative;}

.ditab{ height:200px; width:30px; float:left; cursor:pointer; background:url('http://imgur.com/Ly9Fh.jpg') no-repeat; }

.dicontent{ height:400px; float:left; border:2px solid #CCCCCC; background:#F5F5F5; padding:10px; }
</style>

<script type="text/javascript">
function showHideID(){
var di = document.getElementById("di");
var w = di.offsetWidth;
di.opened ? moveID(0, 30-w) : moveID(10-w, 0);
di.opened = !di.opened;
}
function moveID(x0, xf){
var di = document.getElementById("di");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
di.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveID("+x+", "+xf+")", 10);}
}
</script>

<div id="di">
<div class="ditab" onclick="showHideID()"> </div>
<div class="dicontent">
<div style="padding: 1px; overflow:auto; height: 400px;width: 300px;">
<div id="cl_option"> Loading... </div>
<div id="cl_content_list"> </div>

<script type="text/javascript">var jumlah_kata_dalam_ringkasan = 200;</script>
<script src="http://copycat91.googlecode.com/svn/trunk/contentlist.js"> </script>
<script src="http://dede-spirit89.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=500"> </script>
Modif By <a href='http://dede-spirit89.blogspot.com/2010/04/membuat-daftar-isi-melayang.html'>Spirit 89 Blog</a>
</div> </div></div>

<script type="text/javascript">
var di = document.getElementById("di");
di.style.right = (30-di.offsetWidth).toString() + "px";
</script>

Ganti http://dede-spirit89.blogspot.com yang bercetak tebal berwarna hitam pada script diatas ,  gantikan dengan url blog anda dan simpan template anda.

Selamat Mencoba....!!!! keep spirit...!!!

Artikel Terkait