تطبيقات الهواتف الذكية والحاسوب: كيفية اضافة "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/AVvXsEggss8D56-PsWIzzpXFMdGMmU1gHlwm8v-krKwJ6axS6hAkv9X_FbeQjxLNTZ8O78l8kSvCx6OSBJFY7wEk3kJHjYZ0XYxVhf3qBm-1SE40KjOAqmvPyHS70cZj3v0MBURVPPZS0rMzRpR3/s1600/bttp-5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVP5qpl-EjpTggQ5nCQBp7RPSuTYcbZdp9qSTpL1abtHQ3O2LPZe_t-Znu9DyWyEKw1TMB4__3WSNQZxeN_vGQARf6FmJaRv9bPtJvgTybVWxrLSCxWZA2Oad1_jaHjqREjaskFQPVDz70/s1600/bttp-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBSBjA90bq-qAmN-ik3PNxEGALWEpV3mRziwsBYIiENJH1g8DKtv1mM0Wb-8kP8AfCG2IHsKJz1SoZOYI8wDZxun4OLzEwxApwkCcMo87wlax1Uf02gQTF_qvm7UIfm1XivNSPHOEbBe9d/s1600/bttp-3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrNiM2W0xXuGXQYHQ5NGgkOHpOsEnDH8byTir7SDHTw8UIJ5EyEVoZRoNJgYvYqW76cL8h0jRMmG5BSdtVBHh72hWbtLcbii8bCTRaNUhgCAP_LJn0B9SpSj7S9KkGPG-hbxwqOgKOrmP6/s1600/bttp-1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcCVPKT7tyOxc4lk_0qsZlqj2xdp1hrq-wTWgNGlb5ES35PgTnqiXP_7eZgkCB8sXn10vc2WPSi-Osl4ajiQQfguQVdfgpTug5EN0VX4hTyrzxP2Ia_DgSfphqtMo4ls1Cj9zEQzshR9Sh/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/AVvXsEgz15dgoCjSB_Z1xmGN6M65bhrC4BHSwhF4aedX6oPNKc0aMaOvO8D_IRNUIJng93U469135G7pmbmakt4Ersl6XUG69SphwBfAm664mtwPjk_aolvEYuy6P31Jlqq9T4pI2P93AuW58EHC/s400/bttp-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggX5wWXuGIDk4JApvKmREJl_y2FhFkIEXE4om94XwfRtcu5D-hQ5iCTKefMofruwzjZtbCghQZ0rYaLT557toX7exFud4p8Y35h3-Ec_FZXzS03zB0P4KxxS8_zZs4_FzEeKaGvBAjH1X5/s400/bttp-9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXR9ft7PN-0IG67a1TDr9zjJDDQf1OpGZZh_x12zZ5J2xzfW3ILSxDaQbNkuiiNpiqQwtaJXJfIXQ3G-ElkoE2v7myvzYRVStiPwfVB4IxtK6vU7NMVLDHYIH1Dr2R8688S-wqtXekAzlf/s400/bttp-8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKEhsZgCOQ_DqtYJzv-PesUCbgaZzMY4SbWiXFfbvcjR3oWNWNUZjw2HnT3AxCbbWBwYrsbSz8FkRlHMQZ4hCRWhyphenhyphenG5EOVz7bfG1hQLX47L2b2qvntRo_tUE_co5xd4zPCzI4xOhLZKnUf//

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-yk4lTnECF1lbsp4svdLTazAT8K7iniekf0su1ydG_yidIEtNcJEi5-HRcaHlZ7ZJzVx-rhm5gnPNQGyL18Bu69TKw6Sp_TDIkklnMDVoCcR4LHzc7no-Mjg22r-9WiRAePXFGLMEmY0s/s400/bttp-11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_tNU9-NWjeGrtl_MLoxOK1RsUIVvw_AaI_6Ylz-inratwlk-llbrLdI0_kbW7_KKLtjxayRmc8ZqVdnRmkKizQe9ClHQ4C4-nmyQkgp7YIX5uY17bfesWWTBdSzxsF0Iym5aoNVo3O85Y/s400/bttp-12.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7SBbkjAW1Ja2S8ws72H13bZ4cotBKVHQGnCxC8qtG6dw1s2bkrR9XSQ7Ns-8kkSOTbTsVVeYtKMSqkuv7UiVo9OS15DsTxPhP2Xoyp72elyuTyGYdbddlWOwkevgqtheweCBI9K-s7Qea/s400/bttp-13.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2UOwIK7LrjRWbCCQF1yPJ1WOMXr2-z3yyqelhRQzx_RFmzs8v3iydd4y-duSXvF9ECQj4ZSoMq5pxA7bLfPkwCKxLqNn_wQueK6GcvUgMh8R66D_TUL3Q_Y3JqZnArL7py8n28j9LcyOk/s400/bttp-15.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl-HT_jDt9xhhgsoL_GG7msT3uZbJcJbeHT8ErfejzEx7CFUyudXqqD0Mg9oSUZN0BuLXBW-bdda-Rpc3DZmfY8-PPApw1Ck2oJQCBQL0iBbhndZGC_MSfbvl-Cblb1ws-aB8I-Ql2SKgy/s1600/bttp-16.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCqEu0DfWaWutKjj0mQGOwpyqoASz1m7y1OlWvvc-g6XKQ1KX2CEx8KftT_pM9i3Xejz_9GWVbLUaUZ1S96liIp1NJTfclpXh8WVsoyEt3VHnbAMjtw-_k8ctZI7nUHsCu42vZKUUjJ0gH/s400/bttp-17.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkVNTwMLK6TqRs8A2jTzZhKoL9u_khb9LlYflrY84JI4vVxbzsH1BHZG_c6kX0btqHPVnK0sEMkKRQlM8WnUG6fND0ZpLjyaxAEX0Tl_dLWLilfIvYJ-a6xTfX1SYPP1wFMHuHkE0P4Vij/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/AVvXsEiRXjznFZHo64eaXwkTWh81bgzN4-ag1MN9P_rkjyOWolwin2mSlWwnEygRqO6U24rOzK9X8sunubupkpqLJTfFoxhCHlVXNpBehK5sKNo1lEToVuMtynp7H62RmrNnm6u7Bl2MMpLljQ5V/s400/20.png  " alt="back to top" /></a>

الخطوة الثالثة :

نبحث عن

<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="javascript"&gt;
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
&lt;/script&gt;

ثم نضغط

Save Template

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