Membuat Widget Melayang

Apasi Widget Melayang itu?
Sebenarnay banyak pertanyaan tentang widget melayang. saya belum tahu pasti seperti apa widget melayang itu. Berulang kali saya mencari di google, ternyata mereka semua juga belum tahu pasti. Namun dari kebanyakan hasil pencarian saya, semuanya seperti yang saya postingkan sekarang ini (kurang lebih seperti itu). Jika ingin melihat contohnya, coba lihat tomloh yang melayang di sebelah kanan anda. Seperti itulah yang saya maksud.
Mari kita langsung mempraktikannya.
Untuk membuat widget melayang tersebut, copy saja code dibawah ini:

<style type="text/css">
.gb_fixed{
position:fixed;
top:100px;
right:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:2px solid #004831;
background:#FFFFFF;
padding:10px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style="color:red">[ Keluar ]</b></a></div>

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="riyan_multimedia" src="http://www4.shoutmix.com/?riyan_multimedia" width="175" height="400" frameborder="0" scrolling="auto">
<a href="http://www4.shoutmix.com/?riyan_multimedia">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix -->

</td></tr></table>
</div>
<script src="http://sites.google.com/site/copycatgroup/Home/jsfile/hiddengb2.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" style="border:0px" src="http://i844.photobucket.com/albums/ab7/riyan_multimedia/Untitled-3.gif" />
</a>
</div>

Ket: Untuk code yang berwarna merah, silahkan anda ganti dengan widget yang anda suka.
Dalam hal ini saya menjadikan Shoutbox sebagai widget yang melayang.

Sekarang giliran anda untuk mencobanya. Selamat mencoba dan semoga sukses.

0 komentar: