Membuat Daftar isi Melayang

Pada postingan kali ini saya akan memposting artikel tentang cara membuat daftar isi melayang. yang biasanya sesuatu yang melayang ini dipakai oleh para blogger mania untuk memasang iklan agar lebih optimal. disamping untuk mempercantik blog tentunya, juga untuk menghemat widget sidebar. untuk pembuatanyapun sangat mudah dan tidak repot. yang tentunya hal ini tidak saya desain sendiri tetapi script ini saya dapatkan dari sobat blogger saya. baiklah untuk lebih jelasnya ikuti langkah langkah berikut itupun bagi sobat blogger mania yang ingin mencobanya.

Step Step/langkah langkah:

1. Masuk ke blogger

2. Tata Letak

3. Tambah widget Html atau Javascript

4. Copy paste 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://fajar7siblings.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=500"> </script>
Modif By <a href='http://fajar7siblings.blogspot.com.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>

5. Ganti tulisan yang berwarna pink dengan alamat blog sobat blogger mania

6. yang terakhir dan paling utama save/simpan dan lihat hasilnya.

Selamat mencoba semoga bermanfaat. Sukses selalu buat anda...