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

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

اهلا بكم زوار مدونة هكر المزرعة السعيدة

اليوم

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

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

ابحث عن الوسم

]]></b:skin> 

و اضف الكود التالي فوقه

#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 استبدل بالرقم الذي يناسبك

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

الان ابحث عن الوسم

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

    if (scrollTimer !== null) {

        clearTimeout(scrollTimer);

    }

    scrollTimer = setTimeout(function() {

        $('#scroll').fadeOut(600);

    }, 1000);

});

//]]>

</script>

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

في امان الله 

مدير الموقع

مهووس بتطوير المواقع وتصميم وبرمجة ووردبريس وبلوجر وانشاء الحملات الترويجية وخطط السيو seo

فيسبوك

شارك هذا المنشور

اشترك في بريدنا الالكتروني لتتوصل باشعار فور نشر موضوع جديد

مواضيع ذات صلة