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

مقدمة عن الإضافة

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

طريقة التركيب

1- من لوحة التحكم --> القالب --> تحرير HTML --> قم البحث عن 

]]></b:skin>

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

  #scroll{
display:none;
position:fixed;
top:0;
left:20px;
z-index:500;
padding:3px8px;
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:4pxsolidtransparent;
border-left-color:#2187e7;
}

2- ثم قم بالبحث ايضاً على 

</head>

وضع أسفله هذا الكود

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

3- قم بالبحث على وسم 

</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);
});

والآن قم بحفظ القالب ومبروك عليك إضافة النسبة المئوية لمدونتك بلوجر

ولا تنسوا دعمنا عن طريق تعليقاتكم المشجعة ومتابعتنا على المواقع الأجتماعية

وإلى اللقاء فى درس قادم من الدروس الوافية لمدونة العرابى .