السلام عليكم ورحمة الله وبركاته
لأضافة زر الذهاب الى اعلى الصفحة بتقنية الJQuery اتبع الخطوات التالية:
الخطوة الأولى : اذهب الى صفحة ادارة ال Blogger وأضغط على layout ثم قم بالضغط على Add a Gadget:
Step #1: Go to Blogger Dashboard then click on Layout after that click on Add a Gadget:
الخطوة الثانية : قم بأختيار القطعة HTML/JavaScript وقم بالضغط على الزر + :
Step #2: Choose HTML/JavaScript then click on Add Button + :
الخطوة الثالثة: قم بلصق الكود ادناه في خانة المحتوى وأضغط على Save:
Step #3: Paste the code in content textarea then click on save:
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script> jQuery(document).ready(function() { var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.back-to-top').fadeIn(duration); } else { jQuery('.back-to-top').fadeOut(duration); } }); jQuery('.back-to-top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script> <style> div#page { max-width: 900px; margin-left: auto; margin-right: auto; padding: 20px; } .back-to-top { position: fixed; bottom: 2em; right: 0px; text-decoration: none; font-size: 12px; padding: 1em; display: none; } .back-to-top { color:#fff; } </style> <a href="#" class="btn btn-default back-to-top">Back to Top <span class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span></a>
الخطوة الرابعة : النتيجة النهائية للزر تظهر بهذا الشكل:
Step #4: the final result should be like this:
شكراً لزيارتكم
ولا تنسوا ان تعملوا مشاركة للموضوع , وعمل اعجاب اذا كان الموضوع له اهمية بنظرك ولتواصل عملي في كل ماهو ضروري!!!
دمتم في رعاية الله
Comments
Post a Comment