ဘလော့အတွက် 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/AVvXsEjJMecfIzeGDeXAsi5QIOgJgp3xKSWKXwmvYh17RFZjWykqMm9Z6OjaAQNRGXMNm3XpQa78Zu7qnrGq18BvLepjrjC3dZ760RT6G-KHMnZ-MKl0LfLQzFEYahHq-Fu27vf7Rt7bm-vF64rF/s1600/bttp-1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6fJHfoNVMlNuKScMwplOQbgjqUI323lEAeZ56MFQ7uu60sBa1qQyfxbkg3PTXxNif5GVp1V74cRouF2lj6RKRL3evbWphtAdIjwyYZSFsDDFlzsc_3u55E1p4ZmpioRjAh5kyEJ-Tzypu/s1600/bttp-2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKBk8Tx8Kg0uFJzbgOTMEuC9FAwd-TXldrJ5caHozPFPs2BEuKd3yBlRwGJo6B9yhdQiNevcc137jZN6dsv0DIKGc3c931uNfwHCWPOfWD5xDILuxpU2M_cIX_x3gxYMsWtP5a93_JZ13t/s1600/bttp-3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4cHZmLn-jbns-FoiMcSbo6s5HYICIAVj5L0ilAQJL-rBUq6ulNxkt3ThQMSK4AYrYJvOXZl6daKbazAopq568si1RQv3CdzbSKn6OUbFdTcs2LT0pVZUi8eJV8YL28gZwnbTjjhAfPAXN/s1600/bttp-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmSRfCozHuFc3FyMrt7mRiz1-IZVbYuvOiH67PoBz0-2DONWepyS75SAKPb1_WrJieAf9bKIm8cmRy1F2S0ZwPlyA3D4lMfHYXZpC7CdbqccW4rJqRWmmc-57jTdbTVXkJlm5fEd28codE/s1600/bttp-5.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPc3MDF3HV5IUMY0Dmy3hjCUuDFEJZuN0CBS-QYhOaLJ14J7RKKPSefAQe1OOfpP061hpamtm3lUTmSE2XDjz_eN7tTZOo3VnZtffh33VCncdU2pl-wJHOw9isJfN_wNK8f5hyhQUk7eAk/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4r8kgUoZEop7BZ_l6m9QdR5GcDQHTHDPettlCrEpoDRSRS0q7X7y1BPdGiM2k9YDViunndjXllzQYKyWHs1KGWAb8eakYVToH55Za6pQ1QP9UFYqm1VWxpj7hmKSSJ9Hjso6VEFj3oIgC/s400/bttp-8.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikA1Rfx5IkK02fT_YYAjxl6HX_HDVcVgkoWeUC5-akyjPYqRuq9x_RLBffz5nJiSS_NWwd5tYHt8tYFcpbk1STkC55CKiePZTjxUsXCIL6JJRYSjyvnjRdCuWsC0Vj8De2A1H-eOjiVo2l/s400/bttp-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtHw04PNJixLp0SfXHTwtqqJOCbBh6s2UAVa3Te63p6LkZzV9PWh0IN0-0eUiUQQ3G-s2uuiBM4N1gSL1qEAB1JnXZCl761G5bIq4-vvomeWyHIZs5yvq9hOBMxo-8ren5DFHWu6Ny72lB/s400/bttp-11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNK7H0vHM9G4eMjeCOARsW3m7mFL95n4flkbvUbhb5uc7wQ-UVtNeqS1Scz5r8wXBV2z2e4NKtYRN5Vk7Ly-Lq_dukyDIdQF__7GylxoRbWYhCvRBkRkVsfZkst9kEXVDnmZ7potOkmBRD/s400/bttp-12.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxn9LaUbOISGPT5Uoap351P3k_GQm1QAnp5l0cvI-nQz5Fap7jpxqvUOl6W0QQUXLxhImip-6Qz035mK_GkpKDgT9zFczen31bYBdPUqmy5ffEVyM0RZWV7_2HypyENyU-5W0MWi5bev9z/s400/bttp-13.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA9s-8i2brVnPYesvtRSNAKnsm9PA0TCqM54w-QOzbnqQKKsa1g5OuVgTSDDdHGdZHqzAO76ekU5W2FJ-WrXrmv3KI9Y-5lKt9105dSWW9Bj0do_9QNNARnAAxQ-PbF5Z_uy5uYqQ4gO6N/s400/bttp-14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiiiXWb_WRth92QmEU4sOFihLn3qEUspkbl-U6lA8UutDsDCb5g6pQoF8UfVhrZjeWi0oJqtIun6QY0QAzoSS7jnXYSjZmMc51JTe8eS0i08zIA_3D_HoM5D-McUudrSvS7Fhs8wu8KSVc/s400/bttp-15.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRgD2C4v50BMV0jIwey1wiI-ZNnZWXGAtELrDP19Jny7yzPr8mUUKwQ26hggQJy1sMbdzt5WS8EEbX33tv7Xl4a7wiF9WcLBv-IYgTyGWpyuj0pcRfiLXATrl00YEhjvTUa1oYmcZeL7al/s1600/bttp-16.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivQAQIabYk7Z4wYeA5nI8jzpzuoe1b8t2th2aSFDM6VH9UkyXCtGU1hwm7xOFherlYabdoyDZr40EIkkIMf6Xdj_UBUEwxc5zNzYn67nASX1CsYteTd_bwpRlT9TiOBjiY-TTc-LvnxTcG/s400/bttp-19.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje2RCmKu-HmV9xK_ntRTjEABTGHpsON7H7Q9yasE316RzZS_8mUG3MqIE8riYsPxo8cfpkuI-8WxT4XE1ihYPztLOf1Ql45O4jarderC5oOQtznRayFoz0Tle4fe6wzWEdogHLyq8A_76z/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 မှာ ပြောခဲ့ကြပါနော်..

ဘလော့ခရီးသည်

<<<တာဝန်မလေးပါကတချက်လောက်ကလစ်ပေးခဲ့စေလို>>>

Blogger နည်းပညာများ,

Rate this posting:

{[['']]}

Posted in: Blogger နည်းပညာများ