أضافة زر صعود الى أعلى لمدونات بلوجر & 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>            
 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>
أتمنى ان لا تواجهكم اي مشاكل في اضافة الزر .. ننتظر تعليقاتكم المشجعة ... بالتوفيق

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

روابط الموضوع للنسخ

رابط
HTML
BBCode
يسمح بنقل الموضوع لكن مع ذكر المصدر في نهاية الموضوع المنقول ووضع رابط الموضوع الأصلي
16 التعليقات
avatar

طرح رائع وجميل وشاكر لك على الموضوع المتميز

avatar

مرورك الجميل اخي . شكرا لك

avatar

شكراً لك أخي أسعد

avatar

رررررررررررووووووعة

avatar

العفو اخي الكريم

avatar

شكرا لك مرورك الروعه ♥

avatar

اضافة جميلة
لكن ما يواجهني اريد الزر في الوسط ... مش على الطرف
رابط مدونتي
http://arbahnet2020.blogspot.com/

avatar

لم افهم عليك اخي ماذا تقصد الزر في الوسط ... اروجو التوضيح

avatar

اشكرك على الرد
زر - الى الاعلى اتى على يمين الصفحة .... كيف اجعلة في وسط الصفحة
وجزاك الله كل خير

avatar

اخي العزيز لجعل الزر في الوسط قم بالبحث عن هذه الكود right: 1rem; وقم بحذفه
شكر لزيارتك الجميلة

avatar

اخي انا لما ابحث على لا اجده ما الحل

avatar

اخي احط الكود الأخير فين ده فين

avatar

عندما تبحث عن ماذا ؟؟؟!!

avatar

اخي ضعه فوق
</body>

كيف تعلق ؟

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *