إضافة شريط قراءة المقال (Reading Progress Bar) في بلوجر
من الإضافات العصرية التي بدأت تنتشر في المواقع الاحترافية هي ميزة شريط يوضح نسبة قراءة المقال. هذه الإضافة البسيطة تعطي للزائر فكرة عن مدى تقدمه داخل الموضوع، وتشجعه على مواصلة القراءة حتى النهاية، مما يحسن تجربة المستخدم ويزيد من مدة بقائه داخل الصفحة.
ما هو شريط قراءة المقال؟
هو خط رفيع يظهر في أعلى الصفحة ويتحرك تدريجيًا كلما نزل القارئ داخل التدوينة. عند الوصول إلى نهاية المقال يكون الشريط قد امتلأ بالكامل، وهذا يعطي إحساسًا بالتقدم والتنظيم أثناء التصفح، خاصة في المقالات الطويلة.
فوائد إضافة Reading Progress Bar في بلوجر
- تحسين تجربة المستخدم داخل المدونة
- زيادة مدة بقاء الزائر في الصفحة
- تقليل معدل الارتداد
- إضافة لمسة احترافية للتصميم
- لا يؤثر على سرعة الموقع
شكل شريط التقدم أثناء قراءة المقال
طريقة إضافة الشريط إلى قالب بلوجر
يمكنك اتباع الخطوات التالية لتفعيل شريط تقدم القراءة على كامل موقعك:
- ادخل إلى لوحة تحكم بلوجر
- اذهب إلى المظهر ثم تعديل HTML
- </body>
كود الإضافة (نسخ بسهولة)
اضغط على زر "نسخ الكود" لنسخه بالكامل:
<div id="reading-progress"></div>
<style>
#reading-progress{
position:fixed;
top:0;
right:0;
width:0%;
height:4px;
background:#2ecc71;
z-index:9999;
transition:width .2s ease;
}
</style>
<script>
window.addEventListener("scroll", function(){
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("reading-progress").style.width = scrolled + "%";
});
</script>
هل تؤثر الإضافة على سرعة الموقع؟
لا، الكود خفيف جدًا ولا يعتمد على مكتبات خارجية، لذلك هو آمن تمامًا من ناحية الأداء ومتوافق مع معايير تحسين سرعة الموقع.
نصائح لتحسين مظهر الشريط
- يمكنك تغيير لون الشريط ليتناسب مع ألوان القالب.
- يمكن تعديل سماكته أو مكان ظهوره حسب التصميم.
- الإضافة تعمل تلقائيًا على الهاتف والكمبيوتر بدون أي إعدادات إضافية.
باستخدام شريط نسبة قراءة المقال، أنت لا تضيف مجرد شكل جمالي، بل تحسن تفاعل الزائر مع المحتوى وتجعله يقضي وقتًا أطول داخل موقعك. هذه الصفحة المستقلة تمكنك من جذب زيارات إضافية من محركات البحث، خاصة لمن يبحث عن "طريقة إضافة شريط قراءة المقال في بلوجر".