Menampilkan Chatbox di depan ( in & out )

Posted: November 14, 2009 in Blog Trick and Wiget
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&#8217;) 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
http://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 *

Bookmark and Share

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

Program SMS Prepaid Terunggul Dari MYeCASH

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s