إضافة النسبة المئوية بجانب السكرول بار لمدونة بلوجر

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

معاينة
إضغط للمشاهدة

شرح طريقة التركيب:
1- دخول إلى القالب ثم تحرير Html ثم نقوم بالبحث بإستعمال CTRL+F عن الوس</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>

2- ابحث عن <head/> وضع الكود التالي أسفله.

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

3- الأن ننتقل لستايل ابحث عن <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; }

4- مبروك عليك الإضافة .

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