Menampilkan Chatbox di depan ( in & out )

Portal Blog yang mengupas, mengulas dan mengkritik serta berkongsi isu semasa yang Tidak anda ketahui dari Sabah dan Sarawak. Kongsikan pendapat atau apa jua Isu dengan Pembaca disini. ❂ admin@pengerindu.com ❂
"Terbaek. Pengetahuan yg luas dan sungguh menghiburkan para pembaca lagipun dgn brita terkini yg tepat dan padat. " - Jesrim Akok ✌ "macam macam ada..utk di kongsi bersama...nang best juak..teruskan usaha murni anda mr J. " - Habsah Mo C D ✌ "1borneo ba..sporting.. " - Dekmon Alan ✌ "macam2 ada..best!! terbaikkk!!! " - Anastasia Julie Lobert
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 *

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






Related Posts Plugin for WordPress, Blogger...
 SABAHSARAWAK
Bila Mr J Menaip
 ARTIKEL KIRIMAN EMEL PEMBACA ► Sila Hantar ke admin@pengerindu.com
+PENDAPAT  +KOMEN WWW.PENGERINDU.COM► server ↑ 97%  
Stastitik

PENGERINDU.COM. Dikuasakan oleh Blogger.
 
Copyright © 2009 - 2015 www.pengeRindu.com - Bukan Sekadar Weblog Biasa | Voice of The People Sabah / Sarawak | Rise of DAYAK- All Rights Reserved ©