ဘေလာ့ညာဘက္ေဘးမွာChatBox သို႕မဟုတ္အျခား Menu ထားခ်င္ရင္

ဒီပိုစ္ေလးေတာ့ၾကိဳက္ၾကမယ္လို႕ေမ်ာ္လင့္ပါတယ္။သံုးတဲ့သူကေတာ့ရွိိပါတယ္
အရမ္းကိုနည္းပါတယ္ေရတြက္ႏိုင္ပါတယ္။သံုးတဲ့သူေတြကလည္းျပန္ျပီမမွ်ေတာ့ၾကိဳက္ၾကေပမယ့္
မရႏိုင္တဲ့ဘေလာ့မိတ္ေဆြေတြအတြက္တင္ေပးလိုက္ပါျပီး။မိမိရဲ႕CBoxအျခားChatBoxေတြကို
ဆိုက္ဒ္ဘားမွာထားရင္မိမိရဲ႕ဘေလာ့ဆိုက္ဘားကပိုရွည္ပါတယ္။ဒါေၾကာင့္အခု
တင္ေပးလိုက္တဲ့ကုဒ္ကေတာ့ChatBoxေတြကိုဘေလာ့ရဲ႕ညာဘက္ေဘးမွာထည့္နည္းေလးပါ။
ေအာက္မွာပံုနဲ႕တကြျပထားေပးသလိုအားလံုးနမူနာၾကည့္လို႕ရေအာင္လည္း
က်ေနာ္ရဲ႕ဘေလာ့မွာ၂ရက္ေလာက္တင္ေပးသြားမွာျဖစ္ပါတယ္။

မွတ္ခ်က္။။Cboxနဲ႕အျခားChatBoxေတြဘဲရတာမဟုတ္ပါဘူး။Menuအစရွိေသာ
မိမိထားခ်င္ေသာကုဒ္မ်ားထားႏိုင္ပါတယ္။

ကုဒ္ထည့္ေပးမယ့္ေနရာကေတာ့ေအာက္မွာအဆင့္ဆင့္ျပထားပါတယ္။

၁။Design

၂။Add a Gadget

၃။HTML/JavaScript Add ေနရာမွာေအာက္ကCode ထည့္ေပးလိုက္ပါ

view plainprint?

1. <style type="text/css">  
2. #gb{  
3. position:fixed;  
4. top:50px;  
5. z-index:+1000;  
6. }  
7. * html #gb{position:relative;}  
8.   
9. .gbtab{  
10. height:100px;  
11. width:30px;  
12. float:left;  
13. cursor:pointer;  
14.   
15. background:url('http://sites.google.com/site/bloggersto/chatbox-blue.png') no-repeat;  
16. }  
17. .gbcontent{  
18.   
19. float:left;  
20. border:2px solid #666666;  
21. background:#F5F5F5;  
22. padding:10px;  
23. }  
24. </style>  
25.   
26. <script type="text/javascript">  
27. function showHideGB(){  
28. var gb = document.getElementById("gb");  
29. var w = gb.offsetWidth;  
30. gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);  
31. gb.opened = !gb.opened;  
32. }  
33. function moveGB(x0, xf){  
34. var gb = document.getElementById("gb");  
35. var dx = Math.abs(x0-xf) > 10 ? 5 : 1;  
36. var dir = xf>x0 ? 1 : -1;  
37. var x = x0 + dx * dir;  
38. gb.style.right = x.toString() + "px";  
39. if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}  
40.   
41. }  
42. </script>  
43. <div id="gb">  
44. <div class="gbtab" onclick="showHideGB()">   </div>  
45. <div class="gbcontent">  
46.   
47. <!-- Begin CBox- kp3နည္းပညာ-->  
48. ဒီမွာမိမိရဲ႕ CBox ကုဒ္ထည့္ေပးပါ  
49. <!-- End Cbox-http://kp3family.blogspot.com-->  
50.   
51. <div style="text-align:right">  
52. <a href="javascript:showHideGB()">  
53.   
54. </a>  
55. </div>  
56. </div>  
57. </div>  
58. <script type="text/javascript">  
59. var gb = document.getElementById("gb");  
60. gb.style.right = (30-gb.offsetWidth).toString() + "px";  
61. </script>  

၄။Save ႏိုပ္လိုက္ပါ။ျပီးပါျပီ။ ။ ။