membuat widget atau tab melayang

Alhamdulillah setelah sekiian lama akhirnya datang juga motivasi untuk menulis lagi di blogku tersayang ini..+



Maaf kemarin sibuk bikin web untuk orang dengan joomla.. terbuai oleh itu sampai lupa untuk menulis lagi...

Sayang rasanya kalau ilmu yang kita dapat tidak dibagi dengan yang lain kan...
Alhamdulillah hasil dari merantau membuat beberapa web untuk perusahaan dan penjualan ada ilmu baru yang di dapat nie... ilmu untuk membut widget, modul atau tab melayang. hal ini terinspirasi karena seorang customer web yang ingin membuat tab ini, sempat kewalahan dan alhamdulillah terinspirasi dari blog tetangga dan ternyata bisa juga di 'joomla' Alhamdulillah...



kalau contohnya di blog ini ada tulisan 'chatbox' yang "naplok" disisi kanan situ kayak spiderman... gimana membuatnya??? bagi yang belum tau ini saya bagi dibawah sini..

1. masuk ke Rancangan Blog kita
2. Tambahkan Widget dan pilih html/javascript
3. masukan script ini

<style type="text/css">

#nempel{position:fixed;top:45px;z-index:+1000;}

* html #nempel{position:relative;}

.nempeltab{height:180px;width:32px;float:left;cursor:pointer;background:  url('http://lh6.ggpht.com/_1PNUiVXeYO0/S0YfEF5DW4I/AAAAAAAAAEc/bcrfRGIH_Sk/Logo.png')no-repeat;}

.nempelisi{float:left;border:2px solid #FF0000;background: #FF0000;padding:6px;}

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

----------------------------------------

<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: 11px; cursor:pointer; text-decoration:none; font-family:Arial, Helvetica, sans-serif; color: #000000" href="http://www.facebook.com/fahrizal.triasto?sk=wall¬if_t=wall" target="_blank">Depeloved by Field Triasto</a></span>

<span><a style="font-size: 10px; cursor:pointer; text-decoration:none; font-family:Arial, Helvetica, sans-serif; color: #000000" href="http://keranjangbelanjamu.com" target="_blank">(Keranjang BelanjaMu)</a></span>

</div>

</div>

<script type="text/javascript">var nempel = document.getElementById("nempel");nempel.style.right = (30-nempel.offsetWidth).toString() + "px";</script>

4. ganti ---------------------- dengan script yang ingin anda buat.. misalkan Chatbox seperti shoutmix atau Cbox.. bisa juga untuk status YM
5. selesai


Gampang kan???



Alhamdulillah selesai nanti kita tambah yang lainnya yah.. kalau ada yang mau requst boleh sok???