• أضافة زر صعود الى أعلى لمدونات بلوجر & 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
    يسمح بنقل الموضوع لكن مع ذكر المصدر في نهاية الموضوع المنقول ووضع رابط الموضوع الأصلي
    أضافة زر صعود الى أعلى لمدونات بلوجر & wordpress

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

    16 تعليقات
    كيف تعلق ؟

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

      ردحذف
      الردود
      1. مرورك الجميل اخي . شكرا لك

        حذف
    2. شكراً لك أخي أسعد

      ردحذف
    3. رررررررررررووووووعة

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

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

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

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

        حذف
    6. اخي انا لما ابحث على لا اجده ما الحل

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

      ردحذف

    contact-us

    الاسم

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

    رسالة *