السلام عليكم ورحمة الله وبركاته، لعل أنه من بين أفضل الإضافات التي تضفي على مدونتك لمسة من الجمال ومن الاحترافية هي إضافة النسبة المئوية، والتي تبين للزائر مكان كم وصل في الصفحة، فعندما يصل لنهاية الصفحة تظهر له نسبة 100% وإذا كان في البداية، تظهر له 0% وهكذا كلما نزل كلما تزداد النسبة.
إضافة جميلة أليس كذلك أخي؟ بإمكانك معاينتها في مدونة خطوات مطور عن طريق النزول والصعود!
بالنسبة لطريقة الإضافة فهي جد سهلة، كل ماعليك فعله أخي الكريم هو التوجه نحو بلوجر، القالب، تحرير HTML، ثم ابحث عن:
1- ]]></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;
}
2- الآن إبحث عن كود <body>:
ضع بعده (تحته) هذا الكود:
<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>
هكذا تكون قد أضفت إضافة النسبة المئوية إلى مدونتك بنجاح تام، وإن واجهتك أي مشكلة فأنا في الخدمة، اترك تعليقك، وإن شاء الله سوف أجيبك في الحال أخي الكريم!
وبالنهاية أتمنى أن تنال هاته الإضافة إعجابك، والسلام عليكم ورحمة الله وبركاته!
معاذ غازي - خطوات مطور
