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

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

لوحة التحكم > قالب > تحرير HTML

بواسطة CTRL + F  ابحث عن الكود التالي

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

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

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