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

بسم الله الرحمن الرحيم.

والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة والسلام.
السلام عليكم ورحمة الله تعالي وبركاته.

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

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

شرح التركيب :

اذهب الي "لوحة التحكم" ثم نختر "القالب" ثم نختر "تحرير HTML".

• ندخل الي القالب.
• حرر القالب.
• ابحث عن  ]]></b:skin>
• وضع هذا الكود فوقه تماما:

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

التعديلات علي الكود !!

 •  اللون الأحمر لتجعل النسبة المئوية علي يمين المدونة غير كلمة Left  واجعلها right 

ثانيا:

 • | ابحث عن  </head>
 • | وضع هذا الكود أسفله تماما:

<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>

ثم قم بحفظ القالب

من فضلك اضغظ لايك لمشاهدة لينك التحميل