سابقاً كان هناك دروس لكيفية تخصيص شريط التمرير بإستخدام أدوات الويب والآن نحن سنشرح لك كيفية إضافة النسبة المئوية بجانب شريط التمرير وهذة الإضافة مفيدة جداً للزائر لكى يعلم كم من النسبة التى تم تمريرها أو المحتوى الذى ينبغى قرائتة والآن مع شرح تركيب الإضافة .
  1. الدخول إلى حسابك فى بلوجر
  2. تحرير القالب
  3. ننصح بأخذ نسخة إحتياطية قبل التعديل على القالب
  4. ثم نبحث عن هذا الكود ]]></b:skin> ونضع الكود التالى قبلة مباشرة / أعلاة
#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;
}

بعد ذلك تبحث عن عن هذا الوسم </head> وتضع الكود التالى بعدة مباشرة وتاكد أنك وضع الكود بين </head> و <body>
<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> 

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