Cara Membuat Daftar isi Blog Hide Show Melayang

Sahabat Blogger yang saya hormati pada kesempatan kali ini saya akan berbagi sebuah postingan yang bertuliskan beberapa kalimat yang menjelaskan tentang Cara Menbuat Daftar isi Otomatis dengan tampilan  Hide Show melayang namun sebelum menulis panjang lebar terlebih dahulu saya mohon maaf atas sumber kode kode scrip yang saya tidak ikut sertakan sumbernya disini, bukannya tidak mau tapi sehubungan kode kode berikut ini adalah gabungan tiga kode yang langkah awalnya adalah saya mencari kode script untuk melayang kemudian script untuk Daftar isi otomatis terakhir saya mencari kode untuk Hide show kemudian saya gabung menjadi satu dan jadilah seperti berikut ini.
Bagi yang berminat membuat Daftar isi otomatis di blog dengan tampilan Hide Show melayang silahkan ikuti langkah langkah berikut ini

1. Login ke Blogger
2. Dari halamat tata letak pilih Add Widget
3. Pilih tambahkan HTML
4. Copy kode berikut ini dan Paste di Blog agan

<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:190px;

width:30px;

float:left;

cursor:pointer;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkgS9za3H3Yd_jhHWJreq1ZFQ4LvSMjPPFW6NrfSsWN1fHXfU-sX7YnVeBLUjInQJ9XCi9cmDhhafo_Hkk8PJ8HXHBidOLjRr5XwqNCbidyc-u6pyY-H-5e9MkYSAjxFeOBJfRpOhKIYI/s1600/img2.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #A5BD51;

background:#F5F5F5;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.right = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="background:#000000; no-repeat scroll 0 0; border:3px solid #000000;height:500px; overflow:auto; padding:10px; width:300px;">

<div id="cl_option">

Loading... </div>

<div id="cl_content_list">

</div>

<script type="text/javascript">

var jumlah_kata_dalam_ringkasan = 250;

</script>

<script src="https://trikdantips.googlecode.com/files/Bungaeja.js">

</script>

<script src="http://blogagannnn.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed&amp;max-results=500">

</script></div>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script>

- warna kuning adalah gambar yang tampil untuk di klik silahkan lihat di sudut kanan atas pada blog ini dapat saudara ganti dengan URL gambar  dengan ukuran width 30px Hight (terserah)
- warna merah di ganti dengan alamat blog saudara
-warna biru jumlah yang di tampilkan
- warna pink adalah kode warna yang dapat saudara ganti

Saya kira cukup sekian dari postingan ini untuk kodenya silahkan anda utak atik sendiri agar sesuai dengan tampilan Blog anda akhir kata saya ucapkan Selamat Mencoba..