membuat tombol melayang versi blog getect

بِسْــــــــــــــــمِ ﷲِ

Karena banyak yang tertarik dan meminta share cara membuat tombol melayang versi blog getect , seperti yang ada di samping kiri blog getect ini. Sebenarnya kode script tombol melayang di samping kiri blog di ambil dari beberapa sumber, tetapi sudah di revisi dan di sesuaikan dengan kebutuhan blog getect. Adapun caranya adalah sebagai berikut :

1. Masuk ke blogger anda.
2. Pilih tata letak dan pilih tambah gadget
3. Pilih HTML/JAVA Script.
4. Copy kode di bawah ini, ke dalam Gadget HTML/JAVA Script.

<style type="text/css"> #gb{ position:fixed; top:200px; left: 0; z-index:100; } * html #gb{position:relative;} .gbtab{ height:180px; width:70px; float: right; cursor:pointer; background:url('http://payzo01.googlecode.com/files/MORE.jpg') no-repeat; } .gbcontent{ float: right; border:3px solid #000000; background: #F5F5F5; padding:2px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 70-w) : moveGB(70-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 25 ? 25 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.left = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 5);} } </script> <div id="gb"> <div class="gbtab" onmouseover="showHideGB()"></div> <div class="gbcontent"> <div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"> <div style="overflow:auto;width:100%;height:300px;padding:0px;border:0px solid #eee"> "masukkan kode widget di bagian ini, seperti widget hitstat dan lain-lain" <div style="text-align:left"> <a href="http://getect.blogspot.com"> [ More ] </a> </div> </div></div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.left = (70-gb.offsetWidth).toString() + "px"; </script></div></div>

Keterangan warna yang ada pada kode script di atas:

1. Warna Hijau 200 bisa di ganti untuk menentukan posisi ketinggian tombol
2. Warna Hijau 'http://payzo01.googlecode.com/files/MORE.jpg'  bisa diganti dengan url gambar tombol versi anda sendiri.
3. Warna Biru bisa anda hapus jika tidak ingin adanya scroll di gadget ini.
4. Warna Merah tempat kode script gadget yang mau di pasang di dalam gadget ini.

Setelah selesai gadget bisa langsung di simpan dan lihat hasilnya. 

Catatan :

1. Jika anda ingin menambah tombol baru, maka rubahlah nilai pada kode berwarna hijau 200, agar tombol tidak saling tumpang tindih, kemudian...
2. Rubahlah kode GB, agar berbeda dengan kode yang ada di tombol yang pertama, misalkan GB di dirubah menjadi GB1. Karena GB adalah script deklarasi maka harus berbeda antara deklarasi tiap tombol.