မဂၤလာပါခင္ဗ်ာ :::: ဤဘေလာ႕တြင္ တင္သမွ် နည္းပညာေလးမ်ားသည္ ကၽြန္ေတာ္ေလ႕လာဖူးသမွ်ကို ျပန္လည္မွ်ေ၀ေပးျခင္းျဖစ္ပါတယ္။ ::::

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


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

၁။Design

၂။Add a Gadget

၃။HTML/JavaScript Add ေနရာမွာေအာက္ကCode ထည့္ေပးလိုက္ပါ
  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- kyawsoetunaungနည္းပညာ-->  
  48. ဒီမွာမိမိရဲ႕ CBox ကုဒ္ထည့္ေပးပါ  
  49. <!-- End Cbox-http://kyawsoetunaung.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>  


  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>  
 ျပီရင္save လိုက္ပါ အဆင္ေျပေစဗ်၊

1 comment :

မိတ္ေဆြတို႕၏ စကားတစ္ခြန္းသည္ စာေရးသူအတြက္ အားေဆးတစ္ခြက္ျဖစ္သည္။

Related Posts Plugin for WordPress, Blogger...
Link ေသေနတာမ်ားရိွရင္ comment မွာျဖစ္ျဖစ္၊ Cbox မွာျဖစ္ျဖစ္ ေျပာခဲ႕ပါဗ်ာ…....