ဘေလာ့အတြက္ 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  ကိုသာ ထည့္ရွာလိုက္ပါ ေတြ႕တာနဲ႕ သူေရွ႕က မွ်ားအနက္ေလးေျဖ လိုက္ပါ.. ျပီး အန္းတာေခါက္ပါ လိုျခင္ေသာကုဒ္အမွန္  ေတြ႕မွာျဖစ္ပါတယ္။

  

#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/AVvXsEgAIAqCaT_ItLOzqYG3QTKnpLqE1Im3G_oscvToov_015gTJPYrgbAoYJVFVK8bd6JNgYGwp2QIBta9rOT_2QeCPTqxDWBRYBP9-kt34z8eZNbD6G8Qlry1E05PvIKl5FO8upNafYSWYuF6/s1600/bttp-1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5lCePA-dxk2u3GcX53XXsaJTE6TWgqHdbTkXDUj8n9PqW8zcEBbAFXgz3r1anZkqUHj8fNEirDthJaP1t-CY8ZGrE6BGnJVXBJXfzqBvUzgficJOT-TjITP40j17qQq2l0CkbKWaZaHtj/s1600/bttp-2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqkk5LnJ9YnY8ZI4yxmRwXwUSjFy-fjjWlmep0OPPFTc2bqOGpMEGTZoxhikJixJL9y5RyILMWkLeM86Lz9LLaVUfDN4PJIed6CbTA2slA5X3m0aPMgReCbKqhvdmshFkN-gODsbdZg-Pt/s1600/bttp-3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF_ZXPcjBP1_VijuJAvJdxtMg5h1ghjyA3ggLX7bTELjRbqgbPNLVspu86tkPyhvpOflDKM8UEI0G2FVkNmiD2FAsBrJBVLjKOd3NeOeSeG1-_ifP_cUAgVe1IAQvgKKS-u8SBK7urvdZd/s1600/bttp-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfy_VFUM45whGmWYq8kn9yXwvoj5HRiEQN27YjoDIbqhoqbqwF9mJcROuI4JGZppR64-ecdJ2ttrU6owryX3Sc1TIdoZf1zGgt7sfo1ZAPXhK46bEuvmhlMTpc_6OqpBJOa-tmo6SemsCT/s1600/bttp-5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFIUD6nfTYX1rosqWLOYzgg3e0RgzCijxMGCPcq76P10ORsJcsTRipWlMrOx6wnpfb2zzDMVTUhGMga9QTL3zq8UuiVAuzsBnDPYGF7ZOS3q6XYhguhKVqq42W_vhW-w8W65LbikXSVeNn/s400/bttp-7.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaDEUa9C50Y8fSCecLZIPqyhtvaEc-NtxK3UR1wNas9a8OkKhWCUC9_t0Dsu7oxsIH-QK4h3kmrlsel2k-Iyhm5TCmDh54VGTsMf_Ai-TQ1eSCq0OBJV9SY2M_IITKkMG19mxg7VlSAbVg/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9aIm0uOMEB7sXQ4hGvGI6kbqPMwIOpWVPtb1Cji4V8dBrYy1TVNTxeWlDW4rvuMdfgd-zoQtZZfN6TR9P_Eg-nT_33jErS3gXubuVL5kqF8bSPVg4AlcrvgsFtuoBDjiRAJ94StyRje6x/s400/bttp-8.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi49HxTdBbWHqVqRDoW0k431pfLOcnS4C7qOaebY5fpKc24AfAurLc7zbc0NEpZYxDxE7l3ouMhq0SfGukXfg9bMepNHTYXQ3VKFSa57P26X5GBAkE5zfAm5Ojveo7B3XBQtn7lznGTzgw/s400/bttp-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAjiZU5FQWyZZAc7-r4prX4gQu_d71p2i5v9gic47NgJuwrVdl6DmL8u_7FZq7IGjOQsMio6xRUrUaDR9-F6hffqYVeUjyfsM81vaOJOEAtRXNDqQGrnqB2-PXyBde5x5u9Q797dZHk8QY/s400/bttp-11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWvxMVQ4ysynDtpF7XcO-DRH6-9C-LlSp1_xv21nJ79JnjpbBlqieyQHXx2DkMq01eGD1dfRhLMOTQ9UBymNT2Ye38E3rLql2rOuwSUuyK830wuULZUdRMNrQJMxdiv_Yl5aViOAv57VOX/s400/bttp-12.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQcKlb-aQbwVvjGGiN-tzaqDPbII2cDICwu-MH5Hib5bwPrAZOSLS0DDw5Qfwi6BCTP8E8xehKhpglw6-jSnifQHhj6AN_H9uqwOLkGglYfZutFw_N9m6yEhLBP8HgbZz7W8GQfANfl12I/s400/bttp-13.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhubXKFZ3uIELBMKHkTGdPKKspIOuVpTCNmghqlw9OmDcOVpfiNkOzuQx_um4IblVmWe6vBJcc0wFScZLEpCiSIsilIupkQsafwalDn00Yi6lBxZVC9t6vhfyqjHhZb5SeQqNBFtJMvbwXw/s400/bttp-14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic16urFsfh51qxE9EjJmrjhtkfyrudPI5DrKHlzBwAZCrK_-Pqs6dJvBXb6c8UBYMnlp4w0_KHvXo42D6FnAfRPaehFflykpJFxfURtmfV7wt59UjFFDFv1Fo2hcX2EnlnFCBEMd1J3qcv/s400/bttp-15.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSfMFr02Y5hOwY7GdNZ22rbAEpmmFGTwcqd3E0JOfciV_-vJNtpbdk1V-I-NCxRMB76k0ybwRPvmXuLIcZOAK1u9cif6LMhglMz02I2vDF2MMOZW1fQG1oAAd3SRkxLXun_BZmZkTWSPx9/s1600/bttp-16.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL0CQ33WGp7JRgvs_u9Xyzp5B60AUHn5MlhYHt_Mi67LjgqfIQIxUxP2As1u3MDMR5cFpqsnE8MuXysuisy8_ZytQ_J2Pf0vqVkmQyvQxic4otBA822g4oW8j6OYzBIRh64gLEvnx-Sa3N/s400/bttp-17.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh81Xor6n0uOKYtVdrbLG1iK4yhf9iCdVQVvp6YIqJwMAIySZc5sRAM_z1lD8Y9dYwaEv75zsiP3E1gN3Q4wi-1IFW7FyhkIUJrPZy6swccHwxa_cq0e08Qte3RDoE2KRD17237w_LuhQa5/s400/bttp-19.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs4LcMeSNq0xMLuT2HbdJRwkL4qPgVUaBsgiMBVE1mnlaynYNeAE-Dze0ZeyCsiU5fraWUoUiKHAVx37J6NBEn3CkK961ldb7EZ_0t5xqBHy9DTxFaKyKiGGWOTsd2fs65rh7Vux_9QtXX/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 ေပးလိုက္ပါ။ အားလံုးအဆင္ေျပမယ္ထင္ပါတယ္။ က်ေနာ္လည္း ျပန္ၿပီးရွာရွာေနရလို႔ ကိုယ့္ဘေလာ့မွာကို ထည့္ထားတဲ့သေဘာပါ။

ေအးေက်ာ္- နည္းပညာမွကူးယူေဖၚျပသည္။

( ::::: ပိုစ့္တင္သူ-ေခ်ာကိုကို ::::: )

ကၽြန္ေတာ္တင္သမွ် Post ေတြကို Facebook မွ တုိက္ရုိက္ဖတ္ရႈလို႔ပါက >> 

နည္းပညာႏွင့္ေဆာ့ဝဲလ္မ်ား Page ကိုႏွိပ္ျပီး Like လုပ္ထားေပးပါ၊၊ 

Follow Me Chaw Ko Ko Facebook.

႐ိုး႐ွင္​း​ေသာနည္​းပညာမ်ားကို ဆန္​းသစ္​စြာတင္​ဆက္​မည္​။

အားလံုးကိုခင္​မင္​လ်ွက္​။

CKK - နည္​းပညာ