♫♪၀ါသနာတူMember ၀င္ထားၾကတဲ့ မိတ္ေဆြမ်ား♪♫

11/30/2013

Back To Top Widget For Blog +19 Style

ဘာရယ္ေတာ့ မဟုတ္ဘူးဗ်ာ.. က်ေနာ္ Template ေျပာင္းရင္းနဲ႔ ေရးခ်င္စိတ္ျဖစ္လာလို႔ ဒါေလး တင္လိုက္တာပါ။ က်ေနာ္က Template ကို အၿမဲတမ္းလိုလို ေျပာင္းေျပာင္းေနတတ္ေတာ့ တစ္ခါေျပာင္းတိုင္း widget ေတြကို ျပန္ျပန္ထည့္ရတာေတြ ရွိတယ္။ အဲဒီအခါက်ရင္ ျပန္ျပန္ရွာရျပန္ေရာ.. ေနာက္တခါလည္း ျပန္ရွာရအံုးမွာပဲေလ။ အခု ျပန္မရွာခ်င္ေတာ့လို႔ ကိုယ့္ဘေလာ့မွာကို တင္ဖို႔ စိတ္ကူးလိုက္တာပါ။ တျခားဘေလာ့ေတြမွာလည္း ဒီ widget ေလးထည့္ပံုကို ေရးထားၾကတာေတြ ရွိပါတယ္။ အခုဟာေလးကေတာ့ တျခားဟာေတြနဲ႔ မတူဘူးဗ်။ နည္းနည္းအလုပ္ပိုတယ္။ အမ်ားအားျဖင့္ သံုးၾကတာေတြကေတာ့ page element ကိုေခၚၿပီး HTML/Java Script နဲ႔ပဲ ထည့္ၾကတာမ်ားတယ္။ အခုဟာေလးကေတာ့ အဲလိုမဟုတ္ဘူး..




က်ေနာ္တို႔ ထံုးစံအတိုင္းပဲ Blogger.com ကိုေတာ့ ၀င္ရမွာေပါ့ဗ်ာ။

အဆင့္(၁)
ၿပီးရင္ Layout ထဲက Edit HTML Tab ကိုသြားရပါမယ္။
ၿပီးရင္ ]]></b:skin> ဆိုတာကို Ctrl+F နဲ႔ ရွာလိုက္ပါ။ ေတြ႔ရင္ ေအာက္က Code ကို သူ႕အေပၚမွာ ထည့္ေပးလိုက္ပါ။

#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}
အဆင့္(၂)
ၿပီးရင္ ဒီ </body> ဆိုတာေလးကို Ctrl+F နဲ႔ ရွာလိုက္ပါ။ ၿပီးရင္ ေအာက္က code ေတြကို သူ႕ရဲ႕ အေပၚမွာ ထည့္ေပးလိုက္ပါ။
<a href="#" id="backtotop"><img src="Image-Url" alt="back to top" /></a>

ဒီ code ကို ထည့္တဲ့ေနရာမွာ Image-Url ဆိုတဲ့ေနရာကို ေအာက္မွာ ေပးထားတဲ့ ကိုယ္ႀကိဳက္တဲ့ ပံုေလးေတြက လင့္ေတြနဲ႔ အစားထိုးေပးရပါမယ္။ ကိုယ္တိုင္ လုပ္ၿပီးသားလင့္ရွိရင္လည္း အစားထိုးေပးလို႔ ရပါတယ္။ အခုေအာက္မွာ ပံုစံ(၁၉)ခု ေပးထားပါတယ္။
http://1.bp.blogspot.com/_JwD5r652h00/SvDAmXE1tvI/AAAAAAAAAP4/pQk69X73NIo/s1600/bttp-1.png

http://1.bp.blogspot.com/_JwD5r652h00/SvDAmVOZPMI/AAAAAAAAAQA/_Y2Nd0UZVMM/s1600/bttp-2.png

http://1.bp.blogspot.com/_JwD5r652h00/SvDAmyqvA9I/AAAAAAAAAQI/hACE99TswzU/s1600/bttp-3.png

http://2.bp.blogspot.com/_JwD5r652h00/SvDAnGbH7qI/AAAAAAAAAQQ/qKtrVmPCBXY/s1600/bttp-4.png

http://3.bp.blogspot.com/_JwD5r652h00/SvDAnTlDfDI/AAAAAAAAAQY/y-NAytkDXjI/s1600/bttp-5.png

http://4.bp.blogspot.com/_JwD5r652h00/SvDBBZGgr-I/AAAAAAAAAQg/1X96vgeWqaw/s400/bttp-7.png

http://3.bp.blogspot.com/_JwD5r652h00/SvDBBlYeFHI/AAAAAAAAAQo/lzY3WpZpwPA/s40

http://1.bp.blogspot.com/_JwD5r652h00/SvDBBzoz4II/AAAAAAAAAQw/n9hIomKpQxY/s400/bttp-8.png

http://2.bp.blogspot.com/_JwD5r652h00/SvDBBw_U6MI/AAAAAAAAAQ4/KDKaH8OTDO4/s400/bttp-9.png

http://2.bp.blogspot.com/_JwD5r652h00/SvDBCN6PpfI/AAAAAAAAARA/oEpqkKnL0Jw/s400/bttp-10.png

http://4.bp.blogspot.com/_JwD5r652h00/SvDBWWig4UI/AAAAAAAAARI/28cXbIDOaqk/s400/bttp-11.png

http://4.bp.blogspot.com/_JwD5r652h00/SvDBWmm_WTI/AAAAAAAAARQ/xfyALfcAbZ4/s400/bttp-12.png

http://3.bp.blogspot.com/_JwD5r652h00/SvDBW6QlhXI/AAAAAAAAARY/6ZxECjTlMxM/s400/bttp-13.png

http://3.bp.blogspot.com/_JwD5r652h00/SvDBW-al_pI/AAAAAAAAARg/Aoxlzmp3Kw0/s400/bttp-14.png

http://1.bp.blogspot.com/_JwD5r652h00/SvDBXF2WGRI/AAAAAAAAARo/FIPZOwsTTBc/s400/bttp-15.png

http://3.bp.blogspot.com/_JwD5r652h00/SvDBloI2NZI/AAAAAAAAARw/VI-Li7cPUvM/s1600/bttp-16.png

http://1.bp.blogspot.com/_JwD5r652h00/SvDBl9PLQ7I/AAAAAAAAAR4/5fV05DNfZ9o/s400/bttp-17.png

http://3.bp.blogspot.com/_JwD5r652h00/SvDBl0UhsvI/AAAAAAAAASA/ge0GmH0HkyE/s400/bttp-19.png

http://2.bp.blogspot.com/_JwD5r652h00/SvDBmIGbP3I/AAAAAAAAASI/cL5okLpz_C8/s400/20.png
အေပၚက ပံုေတြကို စိတ္ႀကိဳက္ထည့္ၿပီးၿပီဆိုရင္ ေအာက္ကတဆင့္ကို ထပ္ျဖည့္ေပးလိုက္ပါ။

အဆင့္(၃)
<head> ကို Ctrl+F နဲ႔ ရွာၿပီး သူ႕ရဲ႕ ေအာက္မွာ ေအာက္က code ေတြကို ထည့္ေပးလိုက္ပါ။

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'></script>
<script language="javascript">
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
</script>
အေပၚကအတိုင္း အားလံုးၿပီးသြားရင္ေတာ့ Save ေပးလိုက္ပါ။ အားလံုးအဆင္ေျပမယ္ထင္ပါတယ္။ က်ေနာ္လည္း ျပန္ၿပီးရွာရွာေနရလို႔ ကိုယ့္ဘေလာ့မွာကို ထည့္ထားတဲ့သေဘာပါ။

Ref: Allblogtool

0 comments:

Post a Comment

ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါတယ္. ♪♫#*♥winaung♥*#♫♪...၏

ဆိုဒ္ေလးမွေႏြးေထြးစြာၾကိဳဆိုပါ၏..သည္ဆိုဒ္ေလးစတင္သည္ခုႏုစ္

(03/october/2012)မွသည္ဆိုဒ္ေလးသည္နည္းပညာမ်ား

ဆာ႕၀ဲလ္းမ်ားေလ႕လာရွာေဖြရင္းစတင္စုေဆာင္ထာသည္ဆိုဒ္ေလးၿဖစ္ပါသည္..

ကၽြန္ေတာ္လိုခ်င္တဲ႕ခ်ိန္မွာရွာရတာလြယ္ကူေအာင္.သည္ေနရာေလးမွာစုထာခ်င္းၿဖစ္ပါသည္...

မိတ္ေဆြမ်ားလဲလိုခ်င္တာမ်ားခြင္႕ေတာင္းစရာမလိုယူသြားႏိုင္ပါသည္ .....ရႊင္လန္းခ်မ္းေၿမ႕ပါေစ..

မိမိဘေလာ့ကို submit မွန္မွန္ လုပ္ေပးျခင္းျဖင့္ မိမိဘေလာ့ ျမန္ဆန္မည္ရွင္းလင္းမည္ ေမာက္တင္ျပီး က်လာတဲ့ေဘာက္ထဲမွာ မိမိဘေလာ့လိပ္စာ ထည့္ကာ Submit ကလစ္လိုက္ပါ ဒါဆို ေနာက္ဇယားတစ္ခုမွ သင့္အီးေမးကို ထည့္ျပီးSubmit လုပ္လိုက္ပါ

<<<အထူးဧည့္ သည္ေတာ္မ်ား>>> Flag Counter

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites