Sebenarnya floating gadget itu apa sih? Wah Bang Dayat pun bingung mau jelasinnya. Mungkin sobat pernah menjumpai blog yang memasang sebuah tombol dipinggir halaman jika diklik akan muncul atau keluar atau bergeser. Biasanya digunakan untuk pesan, shoutbox, dan lain sebagainya.
Itu merupakan sebuah gadget yang terapung diblog. Pembuatannya pun cukup mudah karena kita tidak perlu otak-atik html blog kita, kita hanya menggunakan widget javascript/html. Gadget terapung kelihatan lebih indah karena menggunakan javascript.
Ini sobat salah satu contohnya menggunakan shoutmix :
Bagi sobat yang ingin mencobanya berikut caranya :
1. Login ke akun blogger sobat.
2. Masuk ke Tata Letak dan Tambah Gadget.
3. Pilih Gadget HTML/JavaScript.
4. Masukkan kode dibawah ini kedalam Gadget tadi.
<style type="text/css">
#nempel{position:fixed;top:65px;z-index:+1000;}
* html #nempel{position:relative;}
.nempeltab{height:100px;width:30px;float:left;cursor:pointer;background: #A5BD51 url('http://lh5.ggpht.com/_xcD4JK_dIjU/Stq23DPOQUI/AAAAAAAADhQ/2imPnFpVUrA/d/floatnav.jpg')no-repeat;}
.nempelisi{float:left;border:2px solid #A5BD51;background:#CCFFFF;padding:8px;}
</style>
<script type="text/javascript">function showHideNempel(){var nempel = document.getElementById("nempel");var w = nempel.offsetWidth;nempel.opened ? moveNempel(0, 30-w) : moveNempel(20-w, 0);nempel.opened = !nempel.opened;}function moveNempel(x0, xf){var nempel = document.getElementById("nempel");var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;nempel.style.right = x.toString() + "px";if(x0!=xf){setTimeout("moveNempel("+x+", "+xf+")", 10);}}</script>
<div id="nempel">
<div class="nempeltab" onclick="showHideNempel()"></div>
<div class="nempelisi">
<!-- ISI DENGAN KODE GADGET -->
<div style="text-align:right;"><a style="text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size: 12px;" href="javascript:showHideNempel()">[Close]</a></div>
<span><a style="font-size: 10px; cursor:pointer; text-decoration:none; font-family:Arial, Helvetica, sans-serif; color: #999" href="http://modification-blog.blogspot.com/2009/10/gadget-terapung-floating-widget.html" target="_blank">Widget by Blogger Tune-Up</a></span>
</div>
</div>
<script type="text/javascript">var nempel = document.getElementById("nempel");nempel.style.right = (30-nempel.offsetWidth).toString() + "px";</script>
5. Ganti <!-- ISI DENGAN KODE GADGET --> dengan kode gadget yang akan dipasang.
6. Kemudian simpan.
7. Bagi sobat yang ingin pasang shoutmix atau shoutbox harus daftar dulu.
Semoga bermanfaat.
