إضافة النسبة المئوية بجانب السكرول بار بشكل احترافي

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



شرح طريقة التركيب
1. توجه لقالب >> تحرير 
2. ابحث بإستعمال CTRL+F  عن <b:skin/><[[ ثم ضع الكود فوقه
#Pro7web-scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#369fcf;
  color:#fff;
  border-radius:3px;
  font-size:14px;  
}
#Pro7web-scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf;
}

3. ابحث عن <head/> وضع الكود التالي أسفله
<div id='Pro7web-scroll'></div>

4.  الأن ابحث عن <body/> ثم ضع الكود التالي فوقه
<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#Pro7web-scroll').height() / 2;
    $('#Pro7web-scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#Pro7web-scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>

قم بحفظ القالب ومبرووك عليك الاضافة

لا تنسا ان تكن من أعضاء المدونة من هنا , إذا واجهتك اي مشكلة لا تترد فى ترك تعليق
شارك المقال على :

التعليقات

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة

رسالة!

السلام عليكم ، المدونة للبيع مع الصفحة الخاصة بها على الفيسبوك + حساب ادسنس عادي مربوط بها كما ان الددومين متوفر الى 7/2018 ويمكن تجديدة ، توجد طرق عديدة للدفع بأذن الله ويمكننا التعمال من خلال خمسات ان احببت كوسيط

لمن يهمة الامر يراسلني على حسابي علي الفيسبوك من هنا

المشاركات الشائعة

أحدث التعليقات

تم النسخ