Membuat Widgets Terapung

Ada yang ingin membuat sebuah widgets yang “terapung”, maksudnya meski kita scroll ke bawah tetap widgets tersebut mengikutinya. Widgets tersebut bisa kita isi dengan iklan, shoutmix, menu daftar isi atau apa aja terserah kita. Coba lihat demonya disini (lihat di sebelah kanan terdapat widgets shoutbox yang terapung.

Cara buat:

• Login ke blogger
• Masuk ke Layout --> Page elements
• Pilih Add a Gadget dengan tipe HTML/JavaScript
• Copy paste script berikut konten gadget yang baru kita buat:

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

<!-- Letakkan kode script widgets yang kamu inginkan, seperti iklan, shoutbox -->

<div style="text-align:right;"><a style="text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size: 12px;" href="javascript:showHideNempel()">[X]</a></div>
<span><a style="font-size: 10px; cursor:pointer; text-decoration:none; font-family:Arial, Helvetica, sans-serif; color: #999" href="http://tips-mempercantik-blog.blogspot.com/2010/02/membuat-widgets-terapung.html" target="_blank">Widget by Tips Mempercantik Blog</a></span>
</div>
</div>
<script type="text/javascript">var nempel = document.getElementById("nempel");nempel.style.right = (30-nempel.offsetWidth).toString() + "px";</script>

• Ganti <!-- Letakkan kode script widgets yang kamu inginkan, seperti iklan, shoutbox --> dengan kode yang akan kita tampilkan pada gadget terapung.
• Simpan

Related Posts