Menampilkan Chatbox di depan ( in & out )

Kali ini saya berkongsi sesuatu yang agak best iaitu menampilkan Chatbox anda dibahagian luar dan apabila Mouse anda digerakkan dan di klik ke gambar questbox dan Chatbox Shoutmix anda akan keluar . Sila lihat live demo contoh di sini. dan caranya tidaklah sebegitu rumit.

Ok, anda semua telah melihat live demo bukan? dan sekarang kita akan cuba buat sendiri dan sila ikuti langkah - langkah dibawah:

Langkah Pertama:

Pergi ke bahagian Dashboard - > Layout - > Page Element - > Add a Gadget

Click Add a Gadget dan pilih Html / Javascripts.


Langkah Kedua:

Copy dan edit kan code yang berwarna KUNING sahaja dengan memasukkan code - code Shoutmix anda.

<style type="text/css"> #hitsukeFX{ position:fixed; top:50px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:125px; width:40px; float:left; cursor:pointer; background:url('http://i683.photobucket.com/albums/vv193/vebyo/Guest3.gif') no-repeat; } .hitsukeFXcontent{ float:left; border:2px solid #d9e3ff; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background:#ffffff; padding:10px; } </style> <script type="text/javascript"> function showHidehitsukeFX(){ var hitsukeFX = document.getElementById("hitsukeFX"); var w = hitsukeFX.offsetWidth; hitsukeFX.opened ? movehitsukeFX(0, 40-w) : movehitsukeFX(40-w, 0); hitsukeFX.opened = !hitsukeFX.opened; } function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} } </script> <div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div> <div class="hitsukeFXcontent"> <!-- letak kod shoutmix Disini --> KOD KOD KOD KOD SHOUTMIX DISINI!<div style="text-align: right;"> <a href="http://www.pengerindu.com/2009/11/menampilkan-chatbox-di-depan-in-out.html">Grab it</a> <a href="javascript:showHidehitsukeFX()"> [close] </a> </div> </div> </div> <script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script>

Selepas memasukkan code shoutmix anda kemudia tekan SAVE.



Langkah Ketiga:

Dan anda telah siap membuat , dan click View Blog anda .

Javascript disumbangkan oleh hitsuke dan diadaptasikan oleh Mr J. Sila tinggalkan komen anda sekiranya bermasalah.

Salam ceria ,
Mr. J
www.pengeRindu.com
Subscribe untuk mendapatkan 10 ebook Percuma.
Get Top Commenter Awards?

Ingin artikel anda disiarkan sini? senang sahaja "Emailkan" sahaja kepada kami.

Translate This Blog : English * Chinese * German * Japan * Korea * Arabic * Filipino * Thai * Hindi *

Dapatkan Artikel terbaru dan 10 ebook Percuma daripada www.pengeRindu.com serta artikel terbaru terus ke email anda. Sila masukkan email anda dibawah:

Penghantaran ditaja oleh FeedBurner