Membuat Daftar Isi Melayang

Pada postingan kali ini EFA 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. dan untuk contohnya bisa sobat lihat pada blogger EFA.

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><br /> <br /> <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><br /> <br /> <div id="di"><br /> <div class="ditab" onclick="showHideID()"></div><br /> <div class="dicontent"><br /> <div style="padding: 1px; overflow:auto; height: 400px;width: 300px;"><br /> <div id="cl_option">Loading... </div><br /> <div id="cl_content_list"></div><br /> <script type="text/javascript">var jumlah_kata_dalam_ringkasan = 200;</script><br /> <br /> <script src="http://copycat91.googlecode.com/svn/trunk/contentlist.js"> </script><br /> <br /> <script src="http:/cuap-cuapz.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=500"> </script><br /> <br /> Modif By <a href='http://cuap-cuapz.blogspot.com/2011/12/membuat-daftar-isi-melayang.html'>Spirit 89 Blog</a><br /> <br /> </div></div></div><br /> <script type="text/javascript"> var di = document.getElementById("di"); di.style.right = (30-di.offsetWidth).toString() + "px"; </script>

 5. Ganti setiap link http://cuap-cuapz.blogspot.com dengan link sobat.

 6. Sekarang save dan lihat hasilnya

Posted in: Tutorial Blog