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

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

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

ابحث عن الوسم و اضف الكود التالي فوقه



#scroll {

  display:none;

  position:fixed;

  top:0;

  right:15px;

  z-index:500;

  padding:3px 8px;

  background-color:#369fcf;

  color:#fff;

  border-radius:3px;

  font-size:14px;

}

#scroll:after {

  content: " ";

  position: absolute;

  top:50%;

  right:-10px;

  height:0;

  width:0;

  margin-top:-6px;

  border:6px solid transparent;

  border-left-color:#369fcf;

}

اهم الملاحظات حول الكود

لتغيير لون الخلفية التي بالازرق استبدل #369FCF ستجد الكود مكرر اكثر من مرة استبدلها كلها

لتغيير حجم الخط استبدل font-size:14px استبدل بالرقم الذي يناسبك

المرحلة الثانية

الان ابحث عن الوسم و اضف الكود التالي بعده


<div id="scroll">
</div>

المرحلة الثالثة و الاخيرة

الان ابحث عن الوسم و اضف الكود التالي فوقه


<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(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>

</script>

عند اكمال هذه الخطوات سوف يتم تفعيل النسبة المئوية بجانب شريط التمرير

في امان الله

عن الكاتب محترف البلوجر

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