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

السلام عليكم ورحمة الله تعالى وبركاته

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

1. نتوجه الى المدونة
2. قالب
3. تحرير HTML
4. نبحث عن الكود

</head>

5. نضع الكود الثالي فوقه

    <style>
    #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;
    }
    </style>

6. نضيف الكود الثالي أسفل من الكود </head> 

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

7. نبحث عن 

</body>

8. ثم نضيف الكود التالي فوقه مباشرة

 <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();

9. ثم أخيرا نضغط على حفظ .

قسم : إضافات البلوجر

بقلـــــــم شبكة عـدناني

شبكة عدناني فيها الكثير والكثير من اطيب الكلام و أجمل القصص و أروع المواضيع، نعمل جادين لتقديم ما يفيد ، ستجدون في صفحتنا خيرا كثيرا إن شاء الله : ﴿إن اصبنا فمن الله و ان اخطأنا فمن انفسنا ومن الشيطان﴾