كما تلاحظ فاننا نستخدم هذة الاضافة على شريط التمرير الخاص بموقعنا، فعند التمرير إلى الأسفل سترى أن قيمة النسبة المئوية قد ضهرت بجانب الشريط وهذا يظفي جمالاً إلى مظهر موقعك ويجعلة مميز بالنسبة لباقي المواقع .
تركيب الإضافة
هذة الأضافة بسيطة من ناحية التركيب ولا تحتاج تعقيد في شرحها، فقط كل ما عليك أن تتبع 3 خطوات بسيطة لتركيبها .
- قم بالتوجة إلى لوحة تحكم بلوجر .
- إضغط على خيار المظهر من القائمة اليمنى .
- إضغط على تحرير HTML .
- قم بنسخ محتوى القالب كنسخة إحتياطية في حالة حدوث مشكلة .
الخطوة الأولى (css) :
قم بنسخ الكود التالي ولصقة فوق الوسم </head> .
<style>
#aden-web-scroll {
display:none;
position:fixed;
top:0;
right:15px;
z-index:99999;
padding:3px 8px;
background-color:#254e71;
color:#fff;
border-radius:3px;
font-size:14px;
}
#aden-web-scroll:after {
content: " ";
position: absolute;
top:50%;
right:-10px;
height:0;
width:0;
margin-top:-6px;
border:6px solid transparent;
border-left-color:#254e71;
}
</style>
الخطوة الثانية (html) :
قم بنسخ الكود التالي والصقة تحت الوسم <body>
<div id='aden-web-scroll'/>
الخطوة الثالثة (java script) :
قم بنسخ الكود التالي والصقة فوق الوسم </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 - $('#aden-web-scroll').height() / 2;
$('#aden-web-scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(600);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#aden-web-scroll').fadeOut(600);
}, 1000);
});
//]]>
</script>
إلى هنا تم شرح تركيب الأضافة بنجاح، أي استفسار اتركة في تعليق .