Cara Buat Daftar Isi Melayang

Cara Buat Daftar Isi Melayang

Assalamu Alaikum Warahmatullahi Wabarakatuh...

Kemaren ada seorang temen Distiwan yang menanyakan tentang cara buat daftar isi yang seperti milik Distiwan. Makanya hari ini Distiwan akan mencoba membahasnya. O ya Distiwan juga belajarnya dari temen Distiwan seh yang bernama Dede . Tapi gpp kan lw kita saling berbagi ^_^.

Cara membuatnya :

1. Login seperti biasa ke blogger temen2

2. Trus setelah berada di Dashboard, masuk ke "Design" atau lw blognya bahasa indo "Tata Letak"

3. Tambah widget Html atau Javascript

4. Trus tinggal masukin deh script 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://distiwan.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>


5. Ganti tulisan yang berwarna biru dengan alamat blog temen2 ^_^

6. Tinggal disave deh N tenk..teng..teng...jadi deh...Met dicoba yap ^_^