كيفية إضافة مسار تصفح (Breadcrumbs) إلى مدونة بلوجر

Blogger

إذا كنت جديدًا على بلوجر، قد يبدو من المستحيل وجود مسار تصفح، لكن من السهل جدًا إضافته إلى مدونة بلوجر ببعض التعديلات البسيطة. يبدو مسار التصفح النموذجي كالتالي:

الصفحة الرئيسية > التصنيف > المقال الحالي

ما هو مسار التصفح؟

مسار التصفح (Breadcrumbs) هو أداة تنقل ثانوية تظهر عادةً أعلى المحتوى الرئيسي، توضح للمستخدم موقعه الحالي ضمن هيكل الموقع. مثال:

الصفحة الرئيسية > التصنيف > المقال الحالي

فوائد إضافة Breadcrumbs لمدونتك:

• تحسين تجربة المستخدم: يساعد الزوار على فهم هيكل موقعك والتنقل بسهولة
• تحسين SEO: تعتبر إشارة إيجابية لمحركات البحث
• تقليل معدل الارتداد: يشجع الزوار على استكشاف المزيد من المحتوى

خطوات الإضافة:

1. انتقل إلى لوحة التحكم القالب تحرير HTML
2. ابحث عن الكود التالي:

   <b:include data='top' name='status-message'/>

3. إذا وجدت الكود أعلاه مرتين، تأكد من تنفيذ نفس الخطوات مع الثانية
4. قبل الكود أعلاه، الصق المقتطف التالي:

   <b:include data='posts' name='breadcrumb'/>

5. الآن ابحث عن الكود التالي:

   <b:includable id='main' var='top'>

6. والصق الكود التالي قبله:

   
   <b:includable id='breadcrumb' var='posts'>
   <b:if cond='data:blog.homepageUrl == data:blog.url'>
   <b:else/>
   <b:if cond='data:blog.pageType == "item"'>
   <p class='breadcrumbs'>
   <span class='post-labels'>
   <a expr:href='data:blog.homepageUrl' rel='tag'>الصفحة الرئيسية</a>
   <b:loop values='data:posts' var='post'>
   <b:if cond='data:post.labels'>
   <b:loop values='data:post.labels' var='label'>
   <b:if cond='data:label.isLast == "true"'> »
   <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
   </b:if>
   </b:loop>
   <b:else/>
   »غير مصنف
   </b:if>
   » <span><data:post.title/></span>
   </b:loop>
   </span>
   </p>
   <b:else/>
   <b:if cond='data:blog.pageType == "archive"'>
   <p class='breadcrumbs'>
   <span class='post-labels'>
   <a expr:href='data:blog.homepageUrl'>الصفحة الرئيسية</a> » أرشيف <data:blog.pageName/>
   </span>
   </p>
   <b:else/>
   <b:if cond='data:blog.pageType == "index"'>
   <p class='breadcrumbs'>
   <span class='post-labels'>
   <b:if cond='data:blog.pageName == ""'>
   <a expr:href='data:blog.homepageUrl'>الصفحة الرئيسية</a> » جميع المقالات
   <b:else/>
   <a expr:href='data:blog.homepageUrl'>الصفحة الرئيسية</a> » مقالات تحت تصنيف <data:blog.pageName/>
   </b:if>
   </span>
   </p>
   </b:if>
   </b:if>
   </b:if>
   </b:if>
   </b:includable>

تنسيق مسار التصفح:

يمكنك تنسيق مسار التصفح عن طريق إضافة CSS التالي قبل ]]>:

.breadcrumbs {
  padding:5px 5px 5px 0px;
  margin: 0px 0px 15px 0px;
  font-size:90%;
  line-height: 1.4em;
  border-bottom:3px double #e6e4e3;
  font-weight:bold;
}

نصائح احترافية:

• استخدم فواصل واضحة مثل > أو /
• تأكد من أن الروابط تعمل بشكل صحيح
• حافظ على تنسيق متسق في جميع صفحات المدونة
• اختبر ظهور Breadcrumbs على الأجهزة المحمولة

استكشاف الأخطاء الشائعة:

• إذا لم يظهر المسار: تأكد من وضع الكود في المكان الصحيح
• إذا ظهرت أخطاء: تحقق من أن جميع الوسوم مغلقة بشكل صحيح
• إذا لم تظهر التنسيقات: تأكد من وضع كود CSS في المكان الصحيح

بعد حفظ التغييرات، ستظهر أدوات التنقل على مدونتك لمساعدة الزوار على تصفح المحتوى بسهولة أكبر.

هذا كل شيء! احفظ القالب وقم بزيارة مقالات مدونتك لرؤية مسار التصفح يعمل.

كيف كان المقال؟