أضافة زر صعود الى أعلى لمدونات بلوجر & wordpress

زر الصعود الى اعلى من الاضافات المهمة لجميع المدونات واليوم احضرتها لكم بتقنية css&jquery

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

لمعاينة حية للاضافة

أضغط هنا 

شرح طريقة تركيب الاداة 

1 - أبحث داخل القالب بأستعمال Ctrl+F عن</head> وضع الكود التالي قبلة او فوقه

كود:

<style>
.crunchify-top:hover {
 color: #fff !important;
 background-color: #ed702b;
 text-decoration: none;
}
 
.crunchify-top {
 display: none;
 position: fixed;
 bottom: 1rem;
 right: 1rem;
 width: 3.2rem;
 height: 3.2rem;
 line-height: 3.2rem;
 font-size: 1.4rem;
 color: #fff;
 background-color: rgba(0,0,0,0.3);
 text-decoration: none;
 border-radius: 3.2rem;
 text-align: center;
 cursor: pointer;
}
<style/>

2 - ابحث عن الوسم </body> واضف قبلة او فوقه الكود التالي 

كود:

<!--  Crunchify's Scroll to Top Script qaisi1web -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</script>
 
<script>            
 jQuery(document).ready(function() {
  var offset = 220;
  var duration = 500;
  jQuery(window).scroll(function() {
   if (jQuery(this).scrollTop() > offset) {
    jQuery('.crunchify-top').fadeIn(duration);
   } else {
    jQuery('.crunchify-top').fadeOut(duration);
   }
  });
 
  jQuery('.crunchify-top').click(function(event) {
   event.preventDefault();
   jQuery('html, body').animate({scrollTop: 0}, duration);
   return false;
  })
 });
</script>

3 - والان ركز في هذه النقطة لانها النقطه الاهم الكود تالي هو الذي يحدد مكان الزر انا افضل وضعه تحت الوسم </footer> 

كود:

<a href="#" class="crunchify-top">↑</a>

تفضّل مشكوراً بمشاركة الموضوع