اضافة النسبة المئوية بجانب شريط التمرير على البلوجر

السلام عليكم ورحمة الله وبركاته

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

1-ندهب للوحة التحكم

2- القالب

3-تحرير html

 ثم نبحث عن هذا الوسم : </head>

ثم نضع الكود التالي فوقه مباشرة : 

     <style>
    #scroll {
      display:none;
      position:fixed;
      top:0;
      right:20px;
      z-index:500;
      padding:3px 8px;
      background-color:#2187e7;
      color:#fff;
      border-radius:3px;
    }
    #scroll:after {
      content: " ";
      position: absolute;
      top:50%;
      right:-8px;
      height:0;
      width:0;
      margin-top:-4px;
      border:4px solid transparent;
      border-left-color:#2187e7;
    }
    </style>

نذهب لنفس الوسم الذي بحثنا عنه و لكن هذه المرة نضع هذا الكود أسفله مباشرة

<div id='scroll'></div>

ثم نبحث عن هذا الوسم </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 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>

و أخيرا نقوم بحفظ القالب و مبرروك عليك