النسبة المئوية بجانب شريط التمرير "scroll bar"
هذه الإضافة تتيح لزائر مدونتك ان يعرف مكانه بالضبط في المدونة , وكم تبقي بالنسبة المئوية لنهاية هذه المقالة , وايضا كم النسبة المئوية من الصفحة الذي قرأها .. في هذا الموضوع سوف اريك كيف تقوم بتركيب إضافة النسبة المئوية بجانب شريط التمرير .
ملحوظة :
- يمكنك مشاهدة و معاينة هذه الإضافة من خلال هذه المدونة التجريبية من هنا (احرص علي تمرير شريط التمرير الجانبي والنظر بجانب شريط التمرير لمعاينة الاضافة) .
- خذ نسخة احتياطية لقالب مدونتك للاحتياط
الشرح :
اذهب إلي لوحة تحكم مدونتك .. اضغط قالب >> تحرير HTML
ابحث عن وسم ]]></b:skin> عندما تجد الوسم اضف فوقه / قبله الكود التالي :
#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;
}
بعد اضافة الكود السابق ابحث مجددا عن الوسم </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);});/*]]>*/</script>
تهانينا : لقد اضفت الآن اداه النسبة المئوية بجانب شريط التمرير "Scroll Bar" الي مدونتك .
0 تعليقات بلوجر