ربما رأى بعضكم مدونة أثناء التمرير للأسفل أو للأعلى، هناك حركة في شريط التمرير. ولكن هذا ليس كل شيء، وظيفة أخرى هي علامة على أن المقال الذي نقرأه قد وصل إلى النهاية. لذلك، أثناء التمرير لأسفل، تبدو animation وكأنها تصل إلى نقطة ما. وهذا سيسهل على الزائرين رؤية نهاية المقالة.
من السهل جدًا إنشاء Progress ScrollBar في بلوجر. ولن يؤدي تثبيت شريط تمرير التقدم أو إنشائه إلى تحميل المدونة على الإطلاق.إذا كنت مهتمًا بإنشاء أو تثبيت شريط تمرير التقدم على مدونتك، فيرجى اتباع الخطوات أدناه واختارنمط من احدي النمطين.
Progress ScrollBar Style 1
JQuery 1
أولاً، قم بإدراج JQuery أعلى العلامة </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
عادةً ما يكون موجودًا بالفعل في القالب، لذا قم بفحصه، إذا كان موجودًا فلا تقم بإدراجه بعد الآن.
Css 2
بعد ذلك، أدخل الكود التالي فوق علامة الإغلاق]]></b:skin>
/*Progress ScrollBar*/
progress {position: fixed;left: 0;top: 0;width: 100%;height: 2px;-webkit-appearance: none;-moz-appearance: none;appearance: none;border: none;background-color: transparent;color: #eefba3;z-index: 9999;}
progress::-webkit-progress-bar {background-color: transparent;z-index: 10;}
progress::-webkit-progress-value {background-color: #19B5FE;z-index: 10;}
progress::-moz-progress-bar {background-color: #eefba3;z-index: 10;}
.progress-container {width: 100%;background-color: transparent;position: fixed;top: 0;left: 0;height: 5px;display: block;z-index: 10;}
.progress-bar {background-color: #eefba3;width: 0%;display: block;height: inherit;z-index: 10;}
Script 3
بعد ذلك، أدخل الكود التالي فوق علامة الإغلاق </body>
<script type='text/javascript'>
//<![CDATA[
//Progress Bar
$(document).ready(function() {
var getMax = function() {
return $(document).height() - $(window).height();
}
var getValue = function() {
return $(window).scrollTop();
}
if ('max' in document.createElement('progress')) {
var progressBar = $('progress');
progressBar.attr({
max: getMax()
});
$(document).on('scroll', function() {
progressBar.attr({
value: getValue()
});
});
$(window).resize(function() {
progressBar.attr({
max: getMax(),
value: getValue()
});
});
} else {
var progressBar = $('.progress-bar'),
max = getMax(),
value, width;
var getWidth = function() {
value = getValue();
width = (value / max) * 100;
width = width + '%';
return width;
}
var setWidth = function() {
progressBar.css({
width: getWidth()
});
}
$(document).on('scroll', setWidth);
$(window).on('resize', function() {
max = getMax();
setWidth();
});
}
});
//]]>
</script>
Html 4
بعد ذلك، أدخل الكود التالي فوق تحت وسم <body>
<progress max='1' value='0'> <div class='progress-container'> <span class='progress-bar'></span> </div> </progress>
احفظ الموضوع وشاهد النتائج على مدونتك.
Progress ScrollBar Style 2
JQuery 1
أولاً، قم بإدراج JQuery أعلى العلامة </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
Css 2
بعد ذلك، أدخل الكود التالي فوق علامة الإغلاق]]></b:skin>
/* Progress Scrollbar Gradient*/
#top-scrollbar {position: fixed;top: 0;left: 0;width: 0%;height: 3px;overflow: hidden;z-index: 99999;}
#top-scrollbar-bg {width: 100%;height: 100%;position: absolute;background:linear-gradient(45deg, #26A65B, #22A7F0);}
Script 3
بعد ذلك، أدخل الكود التالي فوق علامة الإغلاق </body>
<script>
//<![CDATA[
var bar_bg = document.getElementById("top-scrollbar-bg"),
body = document.body,
html = document.documentElement;
bar_bg.style.minWidth = document.width + "px";
document.getElementsByTagName("body")[0].onresize = function() {
// Update the gradient width
bar_bg.style.minWidth = document.width + "px";
}
window.onscroll = function() {
// Change the width of the progress bar
var bar = document.getElementById("top-scrollbar"),
dw = document.documentElement.clientWidth,
dh = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight ),
wh = window.innerHeight,
pos = pageYOffset || (document.documentElement.clientHeight ?
document.documentElement.scrollTop : document.body.scrollTop),
bw = ((pos / (dh - wh)) * 100);
bar.style.width = bw + "%";
}
//]]>
</script>
Html 4
بعد ذلك، أدخل الكود التالي فوق تحت وسم <body>
<div id="top-scrollbar"> <div id="top-scrollbar-bg"> </div> </div>
يرجى تغيير اللون إلى اللون الأحمر حسب تفضيلاتك. بالنسبة للتدرج اللوني، إذا كنت تريد استخدام لون واحد فقط، فيرجى حذف رمز تدرج الخلفية background-gradient(45deg, #26A65B, #22A7F0), ثم استبداله باللون #2967E3 بالنسبة لأولئك الذين يستخدمون قائمة التنقل الثابتة، يرجى ضبط موضع شريط تمرير التقدم في top:0; الي top: 45px;
نأمل أن يتم تطبيقه على مدونتك. شكرا لك وآمل أن يكون مفيدا.
