How To Add AutoMouse ShoutBox Pot Out Widget To Blogger

ဒီေန႔တင္တဲ့ ပုိ႔(စ္)ကေတာ့ ဘေလာ့ဆုိဒ္ေဒါင့္မွာ ShoutBox ေလး Mouse နဲ႔ထိရင္ Auto ေပၚေအာင္ထည့္နည္းေလးပါ။ သိၿပီးၾကေသာ မိတ္ေဆြေတြလည္းမ်ားေတာ့မွာပါ။ မသိေသးတဲ့ မိတ္ေဆြေတြအတြက္ ထပ္ေ၀မွ်ေပးလုိက္တာပါ။ ေအာက္မွာ demo သြားၾကည့္နုိင္ရန္ လင့္(ခ္) နွင့္္တကြ Cond လည္းေပးထားပါတယ္။

Preview

၁။Sign In Blogger

၂။ Layout

၃။ Add a Gadget

၄။ HTML/JavaScript

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

<div class='clear'></div>

<div class='widget HTML' id='HTML9'>

<div class='widget-content'>

<style type="text/css">

#gb{

position:fixed;

top:70px;

z-index:+1000;

}* html #gb{position:relative;}

.gbtab{

height:150px;

width:50px;

float:left;

background:url('http://i1212.photobucket.com/albums/cc460/SyndromeHacka/soutcox.png') no-repeat;

}

.gbcontent {

float:left;

border:1px solid #18ff00;

-moz-border-radius-bottomleft:10px;

-webkit-border-radius-bottomleft:10px;

-o-border-radius-bottomleft:10px;

-khtml-border-radius-bottomleft:10px;

-moz-border-radius-topright: 10px;

-moz-border-radius-topleft: 10px;

background: #000000;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideGB(){

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

var w = gb.offsetWidth;

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

gb.opened = !gb.opened;

}function moveGB(x0, xf){

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

var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}

}</script>

<div id="gb">

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

<div class="gbcontent">

<center>

<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf9e1ReYh1iBYVem1cIplKEZ_qaoJ7Ib0iuchhI2i29s8unv9MCA0aF4ApPzDv9GnA0va0o0UbJTiOVCQ9t8ivd73SJJQzduttTldggZRjG4RaDVHE8lqLVaBCqfpii6IXJhWxruk/s1600/backgroundshoutmix.png) no-repeat center;">

ဒီေနရာမွာ မိမိေရးခ်င္တဲ့စာ (သုိ႔မဟုတ္) မိမိ ထားခ်င္ေသာ Cond ကို ထည့္ေပးလုိက္ပါ

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

<a href="http://mrthangming.blogspot.com/2012/10/how-to-add-automouse-shoutbox-pot-out.html" target="_blank" title="Widget By Mr ThangMing"><small>+Grab Here</small></a>

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

<img src="http://mackie.wapsite.me/images/Delete.png"/>

</a>

</div>

</div>

</center></div></div>

<script type="text/javascript">

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

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

</script></div></div>

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