كيفية تثبيت ميزة وقت القراءة في بلوجر لزيادة التفاعل والزوار

طريقة تثبيت ميزة وقت القراءة (دقائق القراءة) في مدونة بلوجر

هل ترغب في تحسين تجربة زوار مدونتك وزيادة مدة بقائهم في الصفحة؟ ميزة وقت القراءة (Reading Time) أصبحت من الأدوات الشائعة التي تضيف لمسة احترافية وجذابة على المدونات والمواقع الإلكترونية. في هذا المقال، سنتعرّف على كيفية إضافة ميزة وقت القراءة إلى بلوجر خطوة بخطوة، مع كود جاهز للتركيب.

كيفية تثبيت ميزة وقت القراءة في بلوجر لزيادة التفاعل والزوار

ما هي ميزة وقت القراءة ولماذا تستخدم؟

قد تكون لاحظت ظهور عبارة مثل "3 دقائق قراءة" أسفل عناوين المقالات في بعض المدونات. هذه الميزة تُظهر الوقت التقديري الذي يحتاجه الزائر لقراءة المقالة بالكامل، وتُعرض غالبًا بجوار اسم المؤلف أو تاريخ النشر.

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

• تشجيع الزائر على القراءة: عندما يعرف القارئ المدة التي سيقضيها، تزداد احتمالية بدء القراءة.

• خفض معدل الارتداد: كلما طالت مدة بقاء الزائر في الصفحة، تحسّنت سمعة المدونة في نظر محركات البحث.

• تحسين شكل وتصميم المدونة: تضيف هذه الميزة لمسة جمالية ومهنية للواجهة.

شرح طريقة تركيب ميزة وقت القراءة في بلوجر

لإضافة هذه الميزة، كل ما عليك فعله هو تنفيذ الخطوات التالية داخل لوحة تحكم بلوجر الخاصة بك:

1. الدخول إلى تحرير القالب

• افتح لوحة تحكم Blogger

• انتقل إلى قسم المظهر

• اضغط على رمز السهم بجانب "تخصيص"

• اختر تحرير HTML

2. إضافة كود CSS لتصميم الميزة

ابحث داخل القالب عن الكود التالي:]]></b:skin>

ثم الصق الكود التالي فوقه مباشرة:

/* كود CSS لتنسيق مظهر وقت القراءة */
.read-time {
  font-weight: bold;
  color: #444;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
}
.read-time-icon {
  width: 24px;
  height: 24px;
}

3. إضافة كود الجافاسكربت لحساب وقت القراءة تلقائيًا

ابحث عن الكود التالي في نهاية القالب:</body>

ثم الصق الكود التالي فوقه مباشرة:

<script>
document.addEventListener(&quot;DOMContentLoaded&quot;, function () {
  const wordsPerMinute = 200; // متوسط سرعة القراءة
  const posts = document.querySelectorAll(&quot;.post-body&quot;);
  
  posts.forEach(function (post) {
    const text = post.innerText || post.textContent;
    const wordCount = text.trim().split(/\s+/).length;
    const readTime = Math.ceil(wordCount / wordsPerMinute);
    
    const timeElement = document.createElement(&quot;div&quot;);
    timeElement.className = &quot;read-time&quot;;
    timeElement.innerHTML = `
      <img alt='وقت القراءة' class='read-time-icon' src='https://img.icons8.com/ios-filled/50/000000/time.png'/>
      <span>${readTime} دقيقة قراءة</span>
    `;

    const header = post.parentElement.querySelector(&quot;.post-header&quot;);
    if (header) {
      header.appendChild(timeElement);
    }
  });
});
</script>

4. وضع عنصر ميزة وقت القراءة في المكان المناسب

لضمان ظهور الميزة بجانب اسم الكاتب أو تاريخ النشر، ابحث في القالب عن الكود المتعلق بعرض معلومات المقال مثل :<b:if cond='data:post.author'> نعم، قد يختلف الكود البرمجي في بعض القوالب لذلك عليك البحث حتى تجد المكان المناسب للكود البرمجي

ثم أضف الكود التالي بعده مباشرة حسب التنسيق المناسب لقالبك: ثم حفظ

  <div class='read-time'>
  <img alt='وقت القراءة' class='read-time-icon' src='https://img.icons8.com/ios-filled/50/000000/time.png'/>
  <span><data:post.body/></span>
</div>

ملاحظة مهمة عمل نسخة احتياطية من القالب قبل إضافة الاكواد

نصائح إضافية لتخصيص الأداة

• تغيير الأيقونة: يمكنك استبدال رابط الصورة بأي أيقونة تناسب تصميم مدونتك.

• تعديل اللون والخط: باستخدام CSS، يمكن تغيير لون النص، أو جعله بالخط العريض أو المائل.

• دعم الواجهة العربية: تأكد من أن الكود يدعم اتجاه الكتابة من اليمين لليسار إذا كانت مدونتك عربية.

الخاتمة

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

إذا وجدت هذا الشرح مفيدًا، لا تتردد في مشاركته مع أصدقائك أو تقييمه بخمس نجوم. وإذا واجهتك أي مشكلة في تركيب الكود، لا تتردد في ترك تعليق وسأساعدك بإذن الله.