3/15/2014

ဘေလာ့အတြက္ Back To Top ေလးေတြ +19 Style ေနာ္


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

က်ေနာ္တို႔ ထံုးစံအတိုင္းပဲ Blogger.com ကိုေတာ့ ၀င္ရမွာေပါ့ဗ်ာ။
►1-  Blogger Singin ၀င္လိုက္ပါ။
►2-  DASHBOARD ကိုသြားလိုက္ပါ။
►3-  TEMPLATE    ကိုကလစ္ပါ..။
►4-  EDIT HTML  ကို၀င္ပါ..
►5-  Ctrl+F အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။


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


#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 ဆိုတဲ့ေနရာကို ေအာက္မွာ ေပးထားတဲ့ ကိုယ္ႀကိဳက္တဲ့ ပံုေလးေတြက လင့္ေတြနဲ႔ အစားထိုးေပးရပါမယ္။ ကိုယ္တိုင္ လုပ္ၿပီးသားလင့္ရွိရင္လည္း အစားထိုးေပးလို႔ ရပါတယ္။ အခုေအာက္မွာ ပံုစံ(၁၉)ခု ေပးထားပါတယ္။



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uDB_qfzFwim86oZjz0r61RNPWrTY0uGF2I1uMOJfo7s4VKApd_s7iZ4c1DtYFf1aoH9kZply8-94I5c659mmpNwihWLPCgNyhtWYoiC-iJkOBsiQzUQN7YzYd8W2hdQt50k6TTr29PgJ/s1600/bttp-1.png



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWtX97wnn7v7_BLX3lTZfVZwYV2xANCvf2Ib3ldVu8g34BnUYRmAQ4lmihiRhEzTAHSqQlyiv5oxxU96jUGMxQsR9gtHqM_69PQjJepzb9Qro6fPHHBpKSf-Qf97kOHudT6eX4A5avOCkZ/s1600/bttp-2.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8S2sPG1cTtDH5yK_gyMDwK6B7cCWF67rpxXC6pFz6dCrKodm1uKH9rfTWNK2sEc_IQQ_06VxrG0RZKza5eReiROPM7PVYn15ts6P-mAD3Qrk7m1NDrB-dx3Lh7GxAO3idTuHrzVq7hP6o/s1600/bttp-3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5KIzB9fyPcjvn6JPZMqfBUC9Kctcez_zteSCPBwCPw5bbMFwbJlWkwDBPip0yzlTQF-7a0-0Kod054fUqlTmpscuOgvg-aBfoqWn4LVh7TzI1CWF_y4wlOW-kBd4x0Ue15yrsLl3NPusp/s1600/bttp-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRDshxoJxipVOrGVlEPfKtga-oXzVdoVJV3cL39MRYHyu2siPgEh6qnNYRM7BJwCXSutrQHq3789QH3xnbjCMc5c8nYyn38L_Z2iLYXIxX7mqVeOws88uGfI-lRGnvqW2OhDR7fnUYR1TA/s1600/bttp-5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoagajLZhRyMIbIH7ojaB3i5lk9_P0nwJbhZXNCLIwiLTm8Cj2J1kgGcFsyvtwDYQTKGSIFq_I0xc9WBVoGVrOPLRzX0nToXmjHIxkRKsPNLcGYa1cl7ZU-NyWORhbf3sL_L87XqgzhjxW/s400/bttp-7.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwmS6mQVwnG7RuK4iEReV5WHN2bcc6sHqZaomcTmHhLIruHFhDcPejM3pmIAkBP5qgu2saZF9d25VOjdKgtWGcHRPCkWC0vHTtFZ_Jm9K0bAcF1fqlR6dO43MQXHt86UI2oQo77TGrhI1y/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL_myJ1ePt5CDF6-ogV-8hADVXzE-oER0bjZsIl8MIN-btCdlnQzgLiG_mTyq_jeLiyB3l0aylWijxgMAP_K7Um2PPsXBXAo-xnbMh5AFhIiYPhIqVl6oqqyUXvEUcYat964HdXMlupv-0/s400/bttp-8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkFEzAUvGvLoP1sUYEcVms7lbPQR9xbxFpyP9KBnshTX-CRkpHKdGHg9bKk4NDLoPkpObCMySqX4ws1JHzzk7jcOlfDhXwHnYa9Y2INqtXrA6iHoEFnl8B6nv4_kzEEgUOLTEkXfuEWkfa/s400/bttp-9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL6MtBk0-dUZCBRkyDfY5RijzcO2PkB75mhxuxUC5H_SMMp5bTHAsrg5lH4jDFuKpbrYU1OHp1y1nmSAaizbVcTIQTyaRtLPbrIHKYDMH-RCSWMq-gaZYWTGFxRUhIxLkBusXYM2YIoT03/s400/bttp-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgywqN1H61_ogKV0ELRHf4hjPyujIkuZNCdU7DJReFuNsOBPMVbo6F3ozWFGzkPThfupOYX78CON9O1aiv2rZcg8C-9xqSasGzYRZlZsxbgUXcbJHBfW745PUoKXJpGE5UZcgN8LSC3uKKm/s400/bttp-11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSdO-76Lh9v_aIsRt6_YYc4Ty-5tISAiV2Y-ODDIofVPPACWXobtR-gnb1LCf9S1pK3LXywzazNVC9jSy_M4NsdORWZVBpfjwBrWYjg9cFd-nXoR1LxctJLgTL-QOYOXgzkXikOMiiotYZ/s400/bttp-12.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiu_cdw7al4vPeucpTpXLgdzMcIB9nQPRz-ATKYGePALeb0K9jjo5NtRLKrRewNNgqzC78X9LQxCbCZR6rmK6G4waM-hcqjvWH4EdUJKaCjwNLG-5lhyphenhyphenx0zfJCVWs2d4wMmiGJLI-EWbdR/s400/bttp-13.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0QnEMepnQdP7KRnK7a5Gt4uBfp1bHXK4ImeV38Ug_Ee4eWPvQ337l3Y1xFKl-UN9rEOv73qjVPUq3T4Kwexo_kaI1mIJB-yRcNSxpgxYVdYZzJ871LV8J8d9nDEW-JvZQO4FpLnElSIRf/s400/bttp-14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB2risEHbmXzrsBJMC02CKcW7owRTOBuHRadKHA9AjCb-hByLXqk_InEiZNc-WP9nfYD-cgRvcmHYGh8EbIpd-WwEHAqCeRUloc0xyz7qaMT-gaJmBCklDe1SkhQDhDyGGkPHW7NjOxfbG/s400/bttp-15.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2sunft5qx-v1EtZYwX3vJ7E2Dg2q_Tc1bZvO9pxH4x8yq2hC-4Tu1l86z63N75gT5v1oILAPb-NCZ3lTBi4zpIG6E30295vE2Dd8I_IafvgVi8RKFp-jMvtwmQl5bDFED07EUdGrRMaDA/s1600/bttp-16.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibxkmH2W20SZnO8BWzE-2oY4fg7LGj2KiWEjas1j0yt1F-1tfQZTPnnKjCUHiJKur3DRhOa4vY0p5Jm8FmcUOjJudBVOUguc_os-3F43_KgGZEGvcbhyb6wpa7LsoIHzHl9EOSoAIUvO_M/s400/bttp-17.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcb19cY9aWtu7-_6HPjVt5dFB1fbU6HlPXk6WzeFnkWA_1X0oTBUf8cDLg0W-PquzFmWRGA-gykEc1mn0Iii7iYH1BxulibQjV1EiLQC1nFRfGSi840s3OeJWgFsa1PuOzI1ExXcqh8heh/s400/bttp-19.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkQyJhdOOqOubFsVh3OliG6y6s3_0VNlZAO5V4nt9NqdhNQTalC-3WaYdj_J2zEoBBsh2T7XvDBFNGZ71GJJmR8Qsytcort9XF3rTDKQyJX532HOLLd4GbCQwZxpUy0arLAkD8Knm-8nPu/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


အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ အဆင္မေျပတာမ်ားရွိခဲ့ပါက...cbox မွာ ေျပာခဲ့ၾကပါေနာ္..

<<< တာ၀န္မေလးပါက တခ်က္ေလာက္ကလစ္ေပးခဲ့ေစလို >>>
Posted by
အမ်ိဳးအစား: