ဘေလာ့မွာ Back To Top button ေလးထည့္မယ္..

က်ေနာ္ ေတြ႔မိတာေလးကို မွတ္ထားတာပါ...  အသံုးလိုတဲ့ သူငယ္ခ်င္းေတြလည္း  လိုအပ္ရင္ သံုးလို႔ ရမွာပါခင္ဗ်ာ..

အဆင့္ (၁)
Dashboard >> Layout (or) Template>> Edit html >>  ကို သြားပါ...

]]></b:skin>
 
အဲဒီ ကုတ္ေလးကို ေတြ႔ ေအာင္ ရွာပါ..  ျပီးရင္  ေအာက္က ကုတ္ေလးကို   အဲဒါရဲ႕  အေပၚမွာ  ထားေပးလုိက္ပါ..

#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}


အဆင့္ (၂)

</body>

ကို ရွာပါ...   ေတြ႔ရင္ ...   ခုနက လိုပဲ..  အဲဒါရဲ႕ အေပၚမွာ...  မတိုင္ခင္မွာ  ဒီေအာက္က ဟာကို ေပါင္းထည့္ ေပးလိုက္ပါ..  Image-Url ဆိုတဲ့  ေနရာမွာ  ကိုနွစ္သက္ရာ  Button တစ္ခုခုကို အစားထိုးထည့္ေပးလိုက္ပါ.. ....

<a href="#" id="backtotop"><img src="Image-Url" alt="back to top" /></a>



following And change the words in red, Image-Url to the button url.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnLEfNtUPTcFdlq96mnA9S0HBMZEgIuyAD4f59khuDCJFli30maQikNBItjK5gl_lk5gEws9wx4RLii-veuJr2i5xCzDe6TOHDT022yaDvuRBpb-EzI_Ju3AWysJ7Z5DNrwpDrBZUQOIGm/s1600/bttp-5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi92qrO3HjWNuXS-EmDvjm2C-bKkoS3CVHfRAwJd1hAT9yRoHgyuGsbbHjfzSZB_MdENaGriDHzisA0NEHtzooOarERUJKGMOEdAdCnArgM8gRx8OMQTSrp8VpNAyyAIGYiWI3wg_J-gPJW/s1600/bttp-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7DvRXsth3ODcr0ezELr67rtqzsbi8baTMrvCSdW4Kj_HFOdy6qocH3k1N9ln1GBLp-Xw-E_hubIjJ2q7gFyPRhHNODWYKHnBNVLqyfPw63brIQhIDYC-O_6ko464gL5tSHUPEikqnIY0Z/s1600/bttp-3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3JTG4vkaElzWEAPcha6yNVRK2hGq0eOkXeM6-py60_JPX4OHzA7032KDFh99-DpnKZTisVDMjGW6zNEySqzPZVO9cRbh96R-p4TpCk2qEo_SEL5Yk0iymwA3UDnesP3BVq4y79UF5E3b4/s1600/bttp-1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1mQ8nA89WzIoWsIIH_BcWSOjms7ot5dnrmsj1-5i3GgC5mtA8MlEJ9LN9qQKb_Y12EwqMCvfcHGKR3jPrL0X8UC__JPHAyeoADb408Cf22jkg94XCHN4023qZp69EnhSz__er3J669jUw/s1600/bttp-2.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjusCbsO3oMTqoStg0WKOVVUJxjLUdD9vjYNAyDG8jp8K_F8Du7uUrV8XD-mU6OvoFB1CcEfDfPelCPcSWGDGqBbqyIzuRQhzQmC8DTo6IFEc_-y4NUjiWAD4fab7-aewU4bX5-KPtPsQ5y/s400/bttp-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwSvUkOZk6yuDCoQcHzCCfu3g1v-WkVXFDQ3FElXJZyocN6aJtT7alSnC-8-J0RN7wdBFcM_OhiqXnNwy_cWVsHQAeiqEWKZwDxRukFqdvZf04XmwS3EqJOl1hKVfekVWKD86Xe26iasGr/s400/bttp-9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyebad8ULTXZUs_Q8Tg8dxa-B5R4mJXmScCXRbg9V64ri-Xi3vGMprMoq6-wwj5QnmiPy61C9dsDPN1m2Zs07K_HsV4cuN7B8sUolVdFZyQuQXVC1qh5NbCYAMC5TvfNKwEO_E9uc8bD_E/s400/bttp-8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvtDKA4Lk1WZAG8mMwYiU-3cnzHocxU1B8Whs71ghRvpTa1XgqKkCPPcRRwYku0_IbM21aTMFM34ykoZ9f-mIyE0dEezNg41LLRdzyQsIz8OfQy-XSaluCWV7R_Gsi-LUywGPPiErI6tHD/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiae6scpKtM6unHWcSJEWoPZaD-1RdcYagviOGd_u9498uraVhT8__qS3wFWmB_41f8TYEuWl38nJogpmUNEF_mFVswYCAsInmK-UhDVmKFdonMXAv9txeOrM1UG4vapjo10LRe_dHskhJ6/s400/bttp-11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8552x48E-ojerSfxGM4A0TqJ9Ww8Klwh6X20qi7R2K_Io-NPI6bmgp7R5iN8EngomeOscMZsuMJY2XYqWZbp3H8PEy1EcDt9C5RVYQ7nXdFKy3RELAoe5e76YWrgWuerY9qbTWfY9FqlJ/s400/bttp-12.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8QVCp4gyIeU-dgxlAz0NCqzwaMqTfof5-9fRBFJdfQMBAjkB7Yx5hpJfnZSMqyV8KL_MvGF_pScIpByxEU3Bz1CF_9Ci2LGcT91_d63sR6Htaamg5j2WkHp2gkwOMl7GbbrcsvXR4BxoM/s400/bttp-13.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCptNc8b3jovW9RclokKuCvHaUQUsitdigaoLqzHrO8HPtQPpfTw8OIUiSHb8WEsiDH9Ruj76EuPFt8uibOgKq4Sx6kzqx0u-baI39po-0EE71HhL14iQz2UobbmO98Rxb1zS4Si93o9Rd/s400/bttp-14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTbBN-gMV_CxIF_Fm1QBNZu8CMcj0MSrIZb5rnSiAfiaVdsgIPdlEp0lDpiJFYrRHTk8-mZUA25kJLPlXOczxg38MdC5n8vVhZf00gvZ0VJaGLghRG_3Q4TmMb3q4HlAa2vhfVibyQeqVl/s400/bttp-15.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU4i98MROK9oAIG3EltCGklahkGrfA-oOASHSB4gOwbbvKEg2PVCkGN6uyDLyrW9dqoGblkIi8Cf7n5PSZP67b4NQ1clb4btO2qfP9JAHd-fat-Hvdvgd3YxOWImDRMESrANs-Bv_4tFWl/s1600/bttp-16.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1ZKGNpeh-0cEoiA9mai3_JcKtOBGr9yB2qQztS6btNxOXAwkdu9T8DNIOz6XY0d9l_alVsqrg_7XoxYebuvo2BBKZrW2so4h-pkxa3RI-7LKed__Q8_V_I5mbm7aXvsXkHR30lDTae1ae/s400/bttp-17.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0FNZHR6GOOaF6Bcq_WQnG72T8xgfQGwk8BcPR7PRWqb1xAOXP1RvvFuCEsJeWMlPVs-T_i9rz3nKSOCfJk8r5KqWFbSNTt8u4pUCJg8DG5yTltMuMTJSot9LiMpGXpzUdZKvIFOgYcjzX/s400/bttp-19.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga6B7v_HFqlcAG0xq4GPlRq3DYUMdoO4oFOREl_BfMHpNXQuxAfYLd0gL1RhNoNdKzpoHYMaHDJJjtOkrvgX_c5P34j8gKrjPt41Kt8aLwVFyMU5R6FqR9CBv3GL4UCrW2gJlzimoer1mz/s400/20.png

.

.

Image-Url ဆိုတဲ့ ေနရာမွာ ကိုယ့္ ၾကိဳက္ နွစ္သက္ရာ ပံုရဲ႕  လင့္တစ္ခုခုကို အစားထိုး ေပးနိုင္ပါတယ္.. 

အဆင့္ (၃) ..

<head>  
ကို ရွာပါ..   ေတြ႔ ရင္  အဲဒါရဲ႕  ေနာက္မွာ..  ေအာက္က ကုဒ္ေလးေတြကို ထည့္ေပးလုိက္ပါ..

&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
&lt;/script&gt;

ျပီးရင္  save Template ကို နွိပ္လိုက္ပါ...

အခု အေပၚက လုပ္တဲ့ အဆင့္ေတြမွာ ကိုယ့္ စိတ္ၾကိဳက္ color, width ,  ေတြကို သတ္မွတ္ေပးလို႔ ရပါတယ္..  

အဆင့္ (၁)

]]></b:skin>

အဲဒါရဲ႕ အေရွ႕မွာ.. 

   
#backtotop {
width:100px; /* Change Box Width*/
background:#F4FFBF;  /* Change background color*/
border:1px solid #ccc;  /* Change Border Style*/
text-align:center;
padding:5px; 
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
color:#666; /* Change text color*/
text-decoration:none; 
}

အဲဒါကို ထည့္ေပးလုိက္ပါ... 

 Change 100 to lower or higher number to increase or decrease the size of the box.
Change 1px To change the border width.
Change  #ccc to your favorite color code change the border color.
Change F4FFBF to your favorite background color code.
Change 666;  to your favorite Text color code.

အဆင့္ (၂)

</body>
 

 အဲဒါရဲ႕ အေရွ႕မွာ ..  

<a href="#" id="backtotop">Back to top</a>

အဲဒီကုဒ္ကို ေပါင္းထည့္ နိုင္ပါတယ္.. 

အဆင့္ (၃)

<head>

အဲဒါရဲ႕  အေနာက္မွာ..  ဒီေအာက္က ကုဒ္ကို အစားထိုး နုိင္ပါတယ္.. 

 


<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 Template.. လုပ္ပါ..