كيفية اضافة "back to top " الى مدونتك

 

بسم الله الرحمان الرحيم

اهلن باخواني في تدوينتي المتواضعة اليوم سندرس كيفية اضافة رز " العودة الى اعلى" - " back to top "

لنبدأ على بركة الله

اولا نتجه الى

Dashboard >> Layout >> Edit html >>

ثم اضغط على ctrl+f حتى تتمكن من البحث عن الكلمة التالية :

]]>

ثم نضع الكود التالي فوقه

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

الخطوة الثانية : نبحث عن السطر التالي

ثم قبله نضع الكود التالي

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

غير :

Image-Url

بصورة من تصميمك او تختر التالية

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-f9m_jZkYiaify6AjsJfPhPoEle21k3EkvH4B3bgJjQ8HibjAfAufkgIZLbZjRTB_Tzw5tRJHiAMBt_HBzpDrm9m_CRFW2X87OvIqMeEM_Q7wnRUAwIerfcu9p9kBTqscPFGdp5SWNt9d/s1600/bttp-5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK6YP1Lz6hEh7i2meQYHggJ0gJM85foEmj3X_tV7ECl6fduzjeVvRdeu5tNXFnXm_-9juhAf_fGMc9-UyXEnOBvxV6qzjCuOwMjBFJRATlc-LfoGQmVf5sOXChx0MPdkVfHE5EY7Avg-Yw/s1600/bttp-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh81rtEN0qiMSWrHuC5kXIpm_rMzYvQu6c7aR8sPFxHjHzHDk6w4vQG3izUiH0O9KVC-33idGXtedd7NYb8WtpB662FKSx9DGi4S7wIj4S77zakah65xtGiKhtDh00UXOIQGZ-mZ1yLCjRC/s1600/bttp-3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8UhxL1PCbj3RrW8L6RbQmfrvJGGus3dP8B5qGyY0RZdU5ws86b6C1t1NTtUthyeabHc0eTMP750e3hzsGc-LsrHDnTEruGbL6zHD2amABeIA3_bGCl0woHPbayQqm9J6nERkIJQiVkv9o/s1600/bttp-1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWtQxfz1Nlm9y1vRcb7wTjPUCKSuk92OBhEh1dcqz37k6QbdjbXyYMNEvfNgzHgco8aiMrPCSp-HZl2tJGh_4xde1oZZ_vkfw6rF3QN40R_iNQa3y8a7aQrrMnbRXWSp1Z_aJfvg4qjqj2/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/AVvXsEh5hhg7JyH4zoyOUG7Z13hQEv-hoyAEJGKKlxZvBTYkOnWGkcNropVfbxHbFEivcg99PkYTU02S7r2kMByphQa52IDyPG4dlB_FCubYvqqexnBC3Z8-MtUFMgV8dF-ery-H7578-Dr7vMfm/s400/bttp-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkt3i1a4sBWW4mma1FDO0L1z_AqxOcJuR53pN1nH1UP1f4JLP9_aLD0jMnyRyjb3AcQNrdBqsUAND7rlwfY6qYvAJMNwKIEbFEvnovN18N5iU7ywz-SUu74iF3z1QkPfKdio-T191LSzhyphenhyphen/s400/bttp-9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg75u4Dk56tk59ucEYtrsN5xugoiBTrtXebLhG08vUh6GxO9-qo9P-NRaOqIWwAMN_ATFTmjXV9LzpxFG8HTNzxqnpFURxoeQ6W6pgXeGliEroOs5LT25gyDy29COvbXfWkb0jdqqB5dbcX/s400/bttp-8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigJ9-c8Yxwa9LacobssUxLC6Tf1KI1VFiADHvTVLaLAxl4wcgxBY5wOPZ1JXqMIeH0rftAkrfWyzlnFuDT6K1K2-_Z2rdPDTZXCTJkXDOxVaUNBR6-ZauD12Z8zhnBHqfRUGqXfqgb8EKu/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEdmcwwiTCm0ObJLLlnonjgUonkAFR0fRLjrTYF4N3keidH3aczguhYXRJpR6zpe5U4NlaZ25jehwMvkirC7jQUv3pLQimAnLc6k4Lwh_Gbrvp-dcpfZNsbizvGIW2W8n2VqYQPd5THZg_/s400/bttp-11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXAq2GmPCIRYY4_HYl4gJyCEs6pkitw4OST2UbrrcLUDmHINGfaLveyYkCsX0QNgJN9oLaqkkchhfcUEsCaLXVgz_yqiM87MT76wMQ6-u_-Hehiqi8DnhqSD6SYBaJ8GUTkpaylEGP6BOB/s400/bttp-12.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOfsKdvQ4GHtphM5HSUCIwmpLoWAoGJmCwr-WC7ogVEx94ycyMmThijyg86BlpmPJtRf85WHASToceFMuxtSpxWpn8rJn2VGvRcavYyGIARvXC6W3_h2UnGtXyVFkzW7lI8wFAzUGVC4fE/s400/bttp-13.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3kp-8VymFGP655IUdx5xZ1WEsLQZqB7I_HpEQnmtItBcBSExqrxl-PE3_UdA8EZ2ddI5RitMw1kLCNbVAPvqDh6FhNRuRhXR3MOLOU4RAk8HbrHNmKBu0i7bjaW0sDOhvMt7vmoHBRiCE/s400/bttp-14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBeXz3TtAkMyCO53huzvdH2-AD5oLdoVt9A6mm-kmUOzlJNNrCpwXa4LQHkY4CaFITqXhUF1O6Aa2jqZUq-qdqesDrPSOw2jRLlrkgZ0JIiOJrBVayBWEXxq1oGjBAcx_Jek1Tr2Xn7lm_/s400/bttp-15.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyCent6bKKWCR2wD7RxofrXxczKln19MedwyQ1q19AEKveo_3F4PvlW2TDYCObhLzWTNB6le2KWpBhja-iCpbrK8L1Z4ff5QubJHSGbK1zmKyGVlw0QV1cy57EekFrDAskn75jMI33ilPM/s1600/bttp-16.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc573JMrnkr2K4dQh5q2Yd9_pBxKPn3XuVYVwDU7j2A_JhNr9W1YshKOIDjTqlUEQ3UOkYiNp3V4vK1_IuwPTS2N8Ov89qKcUcHPy8k38-z1Km0-Lx6S3LwzDevjN_usPSsqW9Kt7t2KLA/s400/bttp-17.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp_dVqIgYDcfT3tpXdTZ3YyHY3JYbS_UvjM24kpI5k3jUAJcSXiO1NOHTWps1HbKoKamRN_-yCOgUfupw6pZUfYZJy_QP6HkA9jeIaLquJVYEwr5fMadhTMo2CNL7s7BlzfLOtH4RB0jax/s400/bttp-19.png

http://2.bp.blogspot.com/_JwD5r652h00/SvDBmIGbP3I/AAAAAAAAASI/cL5okLpz_C

التعديل على الصور يجب ان يكون هكذا

<a href="#" id="backtotop"><img src="  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmkL5y_HMRyQJtVWSN5v0UrFaNk_vkzw-tbEnLenYVQhOVubeCJJ7GKrB7oL4SwDArEwbSKFR7PyH2F6zZSf8Gbi3Ya4hsKfc4xQacmY56RU8ePBV9sa5sGsj0efKTDgbxyHHVd_B3TrPE/s400/20.png  " alt="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  

وهكذا نكون قد انتهينا من اضافة " زر العودةالى اعلى الصفحة