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>
<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...

 

Jangan Lupa Commentnya.......

     

 

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «