ဘေလာ့ ညာဘက္ေဘးမွာ Chat Box (သို႕) အျခား Menu ထားနည္း

ဒီေန့တင္တဲ့ ပုိ့(စ္)ေလးက ဘေလာ့ ညာဘက္ေဘးမွာ Chat Box (သို႕) အျခား Menu ထားနည္းေလးပါ။ ဒီ Cond ေလးက ဘေလာ့ဆုိဒ္အတြက္ အရမ္းပဲအလုပ္လုပ္တယ္လုိ့ ေျပာလုိ့ရပါတယ္။ ဘယ္လုိအလုပ္လုပ္နုိင္တယ္ဆုိတာကုိေတာ့ ဒီ Cond သုံးေနတဲ့မိတ္ေဆြေတြက သိၾကရမွာပါ။ သိခ်င္ရင္ သုံးၾကည့္လုိက္ၾကပါ။ DEMO အေနျဖင့္ က်ေနာ္ ဘေလာ့မွာလည္း ေတြ့ၾကရမွာပါ။

ေအာက္က DEMO ပုံေလးေတြပါ။

၁။ Design

၂။ Layout

၃။ Add a Gadget

၄။ HTML/JavaScript

၅။ ေအာက္က ေပးထားတဲ့ Cond ေလးကုိထည့္ေပးလုိက္ပါ။

 
<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}



.gbtab{

height:100px;

width:30px;

float:left;

cursor:pointer;



background:url('http://sites.google.com/site/bloggersto/chatbox-blue.png') no-repeat;

}

.gbcontent{



float:left;

border:2px solid #666666;

background:#F5F5F5;

padding:10px;

}

</style>



<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.right = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}



}

</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()">   </div>

<div class="gbcontent">



ဒီေနရာေလးမွာ မိမိရဲ႕ ChatBox Cond (သုိ့) မိမိသုံးလုိသည့္ Cond ထည့္ေပးလုိက္ပါ



<div style="text-align:right">

<a href="javascript:showHideGB()">



</a>

</div>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script>

ထည့္ၿပီးရင္ Save ကုိနုိပ္လုိက္ပါ။ ၿပီးပါၿပီး>>>Thank`s