كيفية إضافة شريط تقدم القراءة في بلوجر ؟ 2026
ترغب في إضافة شريط تقدم القراءة في بلوجر؟ لجعل مدونتك تبدو مذهلة وتزيد من تفاعل القرّاء، اتبع الخطوات التالية بعناية. في هذا الدليل سنشرح الفكرة ونقدّم لك الأكواد اللازمة.
ما هو شريط تقدم القراءة؟
باختصار، يوضّح شريط تقدّم القراءة مقدار ما تبقّى من منشور المدونة الذي يتعيّن قراءته. ومن خلال تتبّع موقع الزائر على الصفحة يتم إنجاز ذلك. يبدأ الشريط في الامتلاء أثناء التمرير لأسفل، مما يوضح مقدار التقدم الذي أحرزه، ويمتلئ الشريط بمجرد الوصول إلى نهاية المنشور.
ما هي الحاجة إلى شريط تقدم القراءة؟
يقضي المستخدمون بضع ثوانٍ فقط على موقع ويب قبل أن يقرروا البقاء أم لا. عندما تنشر مقالات طويلة يتعيّن على المستخدمين التمرير لأسفل لقراءتها، يصبح من الصعب بعض الشيء الحفاظ على اهتمامهم.
يقوم بعض مالكي المواقع بإبقاء الأشخاص على الصفحة من خلال وضع المنشورات ذات الصلة بجوار بعضها البعض، بينما يستخدم البعض الآخر مقاطع الفيديو أو معرض الصور. يعد شريط تقدّم القراءة تحسينًا بسيطًا لواجهة المستخدم يشجّع الزوّار على الاستمرار في التمرير وإنهاء ما يقرؤونه.
تستخدم العديد من المواقع الإلكترونية الشهيرة (مثل Daily Beast) مؤشرات التقدّم لجذب اهتمام القرّاء. لكن احرص على أن لا يكون المؤشر صارخًا أو معيقًا لتصفّح موقعك.
كيفية إضافة شريط تقدم القراءة في بلوجر؟
سأعرض لكم كيفية إضافة شريط تقدم القراءة في Blogger خطوة بخطوة. العملية تتضمن 3 أجزاء: CSS لتنسيق الشريط، HTML لبنية الشريط، وJavaScript لحساب نسبة التقدّم.
الخطوة 1:
انتقل إلى لوحة تحكم Blogger.
الخطوة 2:
انتقل إلى قسم المظهر / السمات ثم انقر على تحرير HTML.
الخطوة 3 (CSS):
الصق كود CSS التالي قبل العلامة
]]></b:skin>
مباشرةً:
/* Progress Reading Bar */
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.progress-bar{height:5px;background:#F86152;}الخطوة 4 (JavaScript):
الصق كود JavaScript التالي أعلى العلامة
</body>:
<script>
window.onscroll = function() { myFunction() };
function myFunction(){
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>الخطوة 5 (HTML):
الصق كود HTML التالي بعد العلامة
<body> مباشرةً:
<div class='progress-container'>
<div class='progress-bar' id='myBar' style="width:0%;"></div>
</div>الخطوة 6:
اضغط حفظ، ثم عاين المدونة للتأكد من عمل الشريط.
💡 نصائح: يمكنك تغيير لون الشريط من خلال تعديل قيمة background في CSS، وكذلك تغيير السمك عبر خاصية height. ولجعل الشريط يظهر فقط أثناء التمرير، يمكنك لاحقًا إضافة منطق بسيط لإخفائه عند التوقف.
للمزيد من أحدث نصائح التدوين وقوالب Blogger ونصوص Blogger ونصائح SEO و Adsense لزيادة أرباحك، قم بزيارة موقعنا.
خاتمة
حسنًا أصدقائي، كانت هذه طريقة إضافة شريط تقدم القراءة في بلوجر خطوة بخطوة مع الأكواد الجاهزة. الآن بات بإمكانكم تحسين تجربة المستخدم وتشجيع القرّاء على إنهاء المقالات حتى نهايتها.
كيف جعلك هذا الشرح تشعر؟ اترك تعليقًا بأسئلتك أو اقتراحاتك لنطوّر الشرح أكثر ونساعد الجميع 👇
