شرح طريقة اضافة زر للاعلى بالمدونة

كيف يتم اضافة زر الذهاب للاعلى في المدونة

زر الذهاب للاعلى او الرجوع لرأس الصفحة يعد شئ مهم للمدونة , حيث يقوم بتقليل الوقت للزائر للرجوع لرأس الصفحة للتنقل باقسام المدونة او الموقع في حال كان الزائر يقوم بقرائة مقالة طويلة

هذا الامر ياخذ بعض الوقت من الزائر مما يترك انطباع سيئ عن المدونة ويؤدي لترك المدونة من الزائر .

لذلك في هذه التدوينة سنشرح طريقة اضافة زر الذهاب للاعلي ,

نرجو متابعة الخطوات التالية بالترتيب :

1. نقوم بالدخول للحساب المدونة من خلال موقع Blogger.com

2. الذهاب لخيار ال Layout او التنسيقات .

3. الضغط على زر اضافة gadget .

4. نختار HTML/JavaScript..

5. نترك العنوان فارغ ونضيف الكود التالي .

· يرجى التاكد من اضافة الكود في <Body>

بامكانك اختيار احد التصاميم المتوفرة التي تناسبك من خلال الاطلاع على الصورة التالية واختيار الرقم المطلوب وتعديله بالكود

1. fas fa-arrow-up

2. fas fa-long-arrow-alt-up

3. fas fa-arrow-circle-up

4. fas fa-arrow-alt-circle-up

5. far fa-arrow-alt-circle-up

6. fas fa-sort-up

7. fas fa-chevron-circle-up

8. fas fa-caret-square-up

9. far fa-caret-square-up

10. fas fa-angle-double-up

11. fas fa-chevron-up

12. fas fa-caret-up

13. fas fa-angle-up

14. fas fa-hand-point-up

15. far fa-hand-point-up

لا تنسى ان تشارك الموضوع في استفدت من الموضوع

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous" />

<style>


#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  color:darkblue;
  border: none;
  outline: none;

  
  cursor: pointer;

}

#myBtn:hover {

    color:red;
 box-shadow: inset 0 0 0 3px #3a7999;
    border-radius: 100%;
   
   
}
</style>



<i class="w3-xxlarge fas fa-arrow-circle-up" onclick="topFunction()" id="myBtn" title="Go to top"></i>



<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};


function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("myBtn").style.display = "block";
  } else {
    document.getElementById("myBtn").style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>