kp3နည္းပညာ၊၂၄၃၊ဘေလာ့မွာFloating 'Subscribe' bar ေလးထည့္နည္း

 အခုတင္တဲ့ Post ေလးကလည္းက်ေနာ္တို႕ရဲ႕ဘေလာ့မွာ Subscribe Bar ကို Wibiya Tool Bar လိုေအာက္မွာ ေပၚေအာင္လုပ္ခ်င္တဲ့ဘေလာ့မိတ္ေဆြေတြအတြက္ပါ.ဒါေလးကေတာ့တခါဘဲေပၚျပီးျဖဳတ္ျပစ္ လိုက္ရင္ျပန္ မေပၚေတာ့ ဘူးေပါ့ေနာ္၊သံုးလို႕လည္းမဆိုးပါဘူးေကာင္းပါတယ္။သြားၾကည့္လို႕ရေအာင္လည္း DEMOလင့္ခ္ ေလးပါထည့္ေပးထားသလိုေအာက္မွာလည္း Code နဲ႕တကြပံုျပထားေပးပါတယ္။

 
ဒီမွာ သြားၾကည့္လိုက္ပါ။

ပထမအဆင့္

၁။Layout

၂။Edit HTML

၃။ေအာက္က Code ကိုရွာပါ။

]]></b:skin>

၄။ေတြ႕ျပီဆိုအေပၚမွာေအာက္က Code ကိုထည့္ေပးလိုက္ပါ။

#mta_bar {
background:#003366;
border-top: 3px solid #6699ff;
margin: 0;
padding: 7px 0;
z-index: 100;
bottom:0px;
right:0px;
width: 100%;
overflow: auto;
position: fixed;
}
* html #mta_bar{
/*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}
#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
#left_bar a {background: url('http://img229.imageshack.us/img229/3826/icorsstransthumb1bj4.png?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
#left_bar a:hover { text-decoration: underline; color: #fff; }

၆။ေနာက္တဆင့္ကေတာ့ ဒီေအာက္က Code

]]></b:skin>

ရဲ႕ေအာက္မွာ ေအာက္က Code ထပ္ထည့္ေပးပါ။

<script type='text/javascript'>
//<![CDATA[
var mta_arr = new Array();
var mta_clear = new Array();
function mtaFloat(mta) {
mta_arr[mta_arr.length] = this;
var mtapointer = eval(mta_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mtasrc = document.all? document.all[mta] : document.getElementById(mta);
this.mtasrc.height = this.mtasrc.offsetHeight;
this.mtaheight = this.cmode.clientHeight;
this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]);
var mtabar = 'mta_clear['+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);';
mtabar = mtabar;
eval(mtabar);
}
function mtaGetOffsetY(mta) {
var mtaTotOffset = parseInt(mta.mtasrc.offsetTop);
var parentOffset = mta.mtasrc.offsetParent;
while ( parentOffset != null ) {
mtaTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mtaTotOffset;
}
function mtaFloatInit(mta) {
mta.pagetop = mta.cmode.scrollTop;
mta.mtasrc.style.top = mta.pagetop - mta.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("mta_bar").style.visibility = "hidden";
}
//]]>

</script>

၆။ေနာက္ဆံုအဆင့္ေပါ့ေနာ္ေအာက္က Code ကိုထပ္ရွာေပးပါ။

</body>

ေအာက္မွာေအာက္က Code ကိုထည့္ေပးလိုက္ပါ။

<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='ဒီမွာFEED-BURNER-ADDRESSကိုထည့္ေပးလိုက္ပါ' target='_blank'>To Get Latest Update Subscribe Now !!!</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;kp3family.blogspot.com.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFB_GW4eslBIPyZ12KOz5FqWE_sa301wCiYeliVLBsHXBjWmdUXlwQHUzpqEU2DK1BScGDLLgA4hXGErRPsX5fH0YV53UBSZtniQDC9smxv64VICYP4gAo0H1UeNF3PPjp2ezKjBlxYE4/?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>

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

မွတ္ခ်က္၊  ။kp3family ေနရာမွာမိမိရဲ့လိပ္စာကိုထည့္ေပးလိုက္ပါ။

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစခ်င္ပါတယ္၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

Related Post

Posted in: FEED