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

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

مع كل نزول أو صعود تظهر لمدة ثانية وتختفي

• معاينة

شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث بإستعمال CTRL+F عن <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(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>

3. ابحث عن <head/> وضع الكود التالي أسفله

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

4. الأن ننتقل لستايل ابحث عن <b:skin/><[[ ثم ضع الكود فوقه

#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;  
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf;
}