شريط تقدم القراءة يعمل على مدونة بلوجر بتدرج لوني من الأزرق إلى البنفسجي

شريط تقدم القراءة لمدونة بلوجر — أداة مجانية لتحسين تجربة الزائر | منصة الحلاوي ميديا

🛠️ أدوات بلوجر

شريط تقدم القراءة لمدونة بلوجر — أداة مجانية لتحسين تجربة الزائر

تعرّف على كيفية إضافة شريط تقدم القراءة الأنيق إلى مدونتك على بلوجر بكود HTML جاهز للنسخ، مع شرح لكل خيارات التخصيص وطريقة التثبيت خطوة بخطوة.

✍️ حيدر الحلاوي 📅 ٧ يونيو٢٠٢٥ 🏷️ أدوات بلوجر ⏱️ ٥ دقائق قراءة

لاحظت يومًا ذلك الشريط الرفيع الملوّن الذي يمتد عبر أعلى الصفحة أثناء تصفّحك لمقال طويل؟ إنه شريط تقدم القراءة، وهو من أبسط الأدوات وأكثرها تأثيرًا في تجربة الزائر. في هذا المقال نشرح ما هو هذا الشريط، ونقدم لك الكود الجاهز لإضافته لمدونتك على بلوجر في دقائق معدودة.

💡 ملاحظة تفاعلية: الصفحة التي تقرأها الآن تعمل بالشريط! انظر إلى الشريط الملوّن في أعلى الشاشة — سيتمدد كلما تمررت للأسفل.

📖 ما هو شريط تقدم القراءة؟

شريط تقدم القراءة هو عنصر واجهة ديناميكي يظهر في أعلى صفحتك (أو أسفلها)، ويُظهر للزائر بصريًا مقدار ما قرأه من المحتوى. يبدأ فارغًا عند الحافة العلوية للصفحة، ويمتد تدريجيًا حتى يكتمل عند بلوغ النهاية.

يعتمد الشريط على JavaScript لقراءة موقع التمرير الحالي وحساب النسبة المئوية للمحتوى المقروء، ثم يعكس هذه النسبة بصريًا عبر CSS. لا يحتاج لأي مكتبات خارجية أو إضافات مدفوعة — فقط عدة أسطر من الكود.

✅ لماذا تضيف هذا الشريط لمدونتك؟

🎯

تحسين تجربة المستخدم

إحساس بالتقدم يشجع على إكمال القراءة

📉

تقليل معدل الارتداد

الزوار يتمرون أكثر عند وجود مؤشر مرئي

💼

مظهر احترافي

تفصيل صغير يعكس اهتمامك بالتصميم

📏

إشارة للمحتوى الطويل

يُعلم القارئ بوجود محتوى وافٍ يستحق الوقت

⚡

خفيف وسريع

لا يبطئ موقعك، بضعة أسطر فقط

🆓

مجاني بالكامل

لا اشتراكات ولا مكوّنات إضافية

⚙️ كيف يعمل الشريط تقنيًا؟

المبدأ بسيط جدًا: عند كل تمرير، يحسب JavaScript موقع التمرير الحالي ويقسّمه على الارتفاع الكلي القابل للتمرير، ثم يضرب النتيجة في 100 للحصول على النسبة المئوية. تُستخدم هذه النسبة لضبط width لعنصر CSS يمثل الشريط، مما يجعله يمتد بسلاسة مع كل حركة تمرير.

معاينة تفاعلية — اضغط الأزرار أو تمرّل الصفحة

هذا ما سيراه زوار مدونتك أثناء القراءة

💻 الكود الجاهز — انسخه مباشرةً

نقدم الكود بثلاثة أقسام منفصلة للفهم، ثم نسخة موحّدة جاهزة للتثبيت بخطوة واحدة.

١ — كود HTML (هيكل الشريط)

عنصران فقط: الحاوية الخارجية وشريط التقدم الداخلي المتحرك. يُوضع مباشرةً بعد فتح وسم <body>.

HTML

<!-- شريط تقدم القراءة | ضعه بعد وسم body مباشرةً -->
<div id="reading-progress-container">
  <div id="reading-progress-bar"></div>
</div>

٢ — كود CSS (التصميم والألوان)

يتحكم في مظهر الشريط: سُمكه، ألوانه، وموضعه. القيم القابلة للتعديل مُشار إليها بالتعليقات.

CSS

#reading-progress-container {
  position: fixed;       /* ثابت عند التمرير */
  top: 0;
  right: 0;
  left: 0;
  height: 5px;           /* سُمك الشريط — عدّله */
  background: rgba(0, 0, 0, 0.07);
  z-index: 9999;         /* فوق كل عناصر الصفحة */
}
#reading-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(to left, #2563eb, #7c3aed); /* اللون */
  transition: width 0.15s ease-out;   /* انسيابية الحركة */
  border-radius: 0 3px 3px 0;
}

٣ — كود JavaScript (منطق الحركة)

يحسب نسبة التقدم ويحدّثها تلقائيًا مع كل حركة تمرير. مُغلّف داخل IIFE لمنع أي تعارض مع أكواد المدونة الأخرى.

JavaScript

(function () {
  var bar = document.getElementById('reading-progress-bar');
  if (!bar) return;

  function updateProgress() {
    var scrollTop = window.scrollY || document.documentElement.scrollTop;
    var docH = document.documentElement.scrollHeight
             - document.documentElement.clientHeight;
    var pct = docH > 0 ? (scrollTop / docH) * 100 : 0;
    bar.style.width = Math.min(pct, 100) + '%';
  }

  // passive: true يحسّن الأداء على الهواتف
  window.addEventListener('scroll', updateProgress, { passive: true });
  updateProgress(); // تشغيل أولي
})();

🚀 الكود الموحّد الكامل — انسخ وألصق مرة واحدة

هذا هو كل شيء في مكان واحد. HTML + CSS + JavaScript دفعة واحدة، جاهز للصق في قالب بلوجر أو مباشرةً في HTML التدوينة.

الكود الموحّد الكامل ✅

<!-- ====== شريط تقدم القراءة | الحلاوي ميديا ====== -->

<div id="reading-progress-container">
  <div id="reading-progress-bar"></div>
</div>

<style>
#reading-progress-container {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: rgba(0, 0, 0, 0.07);
  z-index: 9999;
}
#reading-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(to left, #2563eb, #7c3aed);
  transition: width 0.15s ease-out;
  border-radius: 0 3px 3px 0;
}
</style>

<script>
(function () {
  var bar = document.getElementById('reading-progress-bar');
  if (!bar) return;
  function updateProgress() {
    var scrollTop = window.scrollY || document.documentElement.scrollTop;
    var docH = document.documentElement.scrollHeight
             - document.documentElement.clientHeight;
    var pct = docH > 0 ? (scrollTop / docH) * 100 : 0;
    bar.style.width = Math.min(pct, 100) + '%';
  }
  window.addEventListener('scroll', updateProgress, { passive: true });
  updateProgress();
})();
</script>

<!-- ====== نهاية شريط تقدم القراءة ====== -->

✅ هذا الكود آمن تمامًا مع AdSense وبلوجر. لا يجمع بيانات، لا يُحمّل مكتبات خارجية، ومُغلّف داخل دالة معزولة لمنع أي تضارب.

📲 كيفية التثبيت على مدونة بلوجر

الطريقة الأمثل هي إضافة الكود في قالب المدونة مرة واحدة ليعمل على جميع الصفحات تلقائيًا.

١
افتح لوحة تحكم بلوجر
سجّل الدخول على blogger.com واختر مدونتك.
٢
انتقل إلى القالب ← تعديل HTML
من القائمة الجانبية اختر القالب (Theme) ثم انقر على تعديل HTML.
٣
ابحث عن وسم <body>
استخدم Ctrl + F وابحث عن <body — ستجده في بداية هيكل الصفحة.
٤
الصق الكود بعد وسم body
انسخ الكود الموحّد الكامل من الأعلى وألصقه مباشرةً بعد <body ...>.
٥
احفظ وجرّب
انقر على حفظ القالب، ثم افتح مدونتك في نافذة جديدة وتمرّل للأسفل.

⚠️ تنبيه مهم: قبل أي تعديل على القالب، احفظ نسخة احتياطية منه (تنزيل القالب) حتى تتمكن من الاستعادة إذا حدث خطأ.

طريقة بديلة: التفعيل لتدوينة بعينها

لإضافة الشريط لتدوينة واحدة فقط: افتح التدوينة للتحرير، انتقل لوضع HTML في المحرر، وألصق الكود الموحّد في مطلع المحتوى.

🎨 تخصيص الشريط حسب مدونتك

يمكنك تعديل الكود بسهولة لتغيير مظهر الشريط وتلاؤمه مع تصميم مدونتك:

الخاصية	الوصف	الافتراضي	مثال بديل
`height: 5px`	سُمك الشريط	`5px`	`3px` رفيع / `8px` سميك
`background: linear-gradient...`	لون الشريط	أزرق ← بنفسجي	أي لون أو تدرج تريده
`top: 0`	موضع الشريط	أعلى الصفحة	`bottom: 0` للأسفل
`transition: 0.15s`	سرعة الحركة	`0.15s`	`0.3s` أبطأ / `0s` فوري
`z-index: 9999`	الترتيب الطبقي	`9999`	زد القيمة إذا اختفى خلف عنصر

أمثلة على تدرجات جاهزة

CSS — خيارات الألوان

/* أزرق إلى بنفسجي — الافتراضي */
background: linear-gradient(to left, #2563eb, #7c3aed);

/* برتقالي ناري */
background: linear-gradient(to left, #f97316, #ef4444);

/* أخضر هادئ */
background: linear-gradient(to left, #10b981, #059669);

/* ذهبي فاخر */
background: linear-gradient(to left, #f59e0b, #d97706);

/* وردي زهري */
background: linear-gradient(to left, #ec4899, #be185d);

/* لون واحد مخصص */
background: #2563eb;

🏁 خلاصة القول

شريط تقدم القراءة واحد من تلك التفاصيل الصغيرة التي تصنع فرقًا كبيرًا في تجربة زوار مدونتك. يمكنك تثبيته في دقائق باتباع الخطوات أعلاه، وتخصيصه ليناسب هوية مدونتك بالكامل.

الكود الذي قدمناه خفيف ونظيف، لا يؤثر على سرعة الموقع، ولا يتعارض مع أكواد بلوجر أو AdSense. جرّبه الآن وشارك رأيك في التعليقات — ما اللون الذي اخترته لمدونتك؟

حيدر الحلاوي

مدوّن تقني ومطور ويب متخصص في مدونات بلوجر وأدوات الذكاء الاصطناعي. يشارك خبراته في منصة الحلاوي ميديا لمساعدة المدونين العرب على تطوير مواقعهم وتحسين تجربة زوارهم.