تنسيق وتصميم ادوات بلوجر في السايدبار | قالب كوداتي ستارتر

تصميم البطاقات وتوحيد عناوين أدوات السايدبار

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

إذا أردت مستقبلاً تغيير ألوان العناوين، أو تعديل المسافات الداخلية للبطاقات، أو تغيير شكل الحواف، فلن تحتاج للغوص في تعقيدات القالب لتعديل كل أداة بمفردها؛ بل ستقوم بتعديل سطر واحد فقط في ملف التنسيق لتنعكس النتيجة على كافة الأدوات فوراً. لتطبيق هذا التصميم الموحد، ابحث داخل محرر المظهر عن الوسم </b:skin>، وقم بلصق الكود التالي فوقه مباشرة:

/* --- تنسيق بطاقات أدوات السايدبار: قالب كوداتي ستارتر --- */
.sidebar .widget {
  background-color: #fff;
  margin-bottom: 2rem;
  border: 1px solid #d7d8d9;
  border-radius: 0.25rem;
}

.sidebar .widget .title {
  padding: 0.8rem 1rem;
  background-color: #f1f2f3;
  color: #212529;
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 1rem;
  border-bottom: 1px solid #d7d8d9; 
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}
.sidebar .widget-content {
    padding: 1.5rem;
}

تخصيص وتصميم أداة مربع البحث

يُعد تصميم مربع البحث في بلوجر خطوة حاسمة لتحسين تجربة المستخدم (UX). فالزائر الذي يستخدم البحث هو زائر يمتلك نية واضحة للوصول إلى معلومة محددة، وتوفير أداة سريعة وواضحة يضمن بقاءه في مدونتك لفترة أطول. في قالب "كوداتي ستارتر"، نهدف إلى التخلص من المظهر القديم والافتراضي لأداة البحث، وتحويلها إلى عنصر تفاعلي عصري يشجع على الاستخدام.

سنعتمد في طريقة إضافة صندوق بحث احترافي على استخدام خصائص الـ Flexbox الحديثة لتوزيع مساحة حقل الإدخال وزر البحث بشكل متناسق. من خلال الاعتماد على CSS نقي فقط، نضمن توافق الأداة مع بيئة عمل بوتستراب 5، حيث سنضيف تأثير تغيير الألوان عند التمرير (Hover) دون الحاجة لاستدعاء أي نصوص برمجية إضافية قد تضر بسرعة الموقع.

قم بإضافة أداة "البحث في المدونة" من لوحة التخطيط في بلوجر، ثم انسخ كود الـ CSS التالي وضعه أسفل التنسيقات السابقة لتطبيق التصميم الفوري:

/* --- تنسيق أداة مربع البحث في بلوجر: قالب كوداتي ستارتر --- */
.BlogSearch .widget-content {
  display: block;
}

.BlogSearch form {
  display: flex;
  gap: 0.5rem;
}

/* تخصيص حقل إدخال النص */
.BlogSearch .search-input{
   width: 100%;
}
.BlogSearch .search-input input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  font-size: 0.95rem;
  color: #212529;
  background-color: #f8f9fa;
  border: 1px solid #d7d8d9;
  border-radius: 0.25rem;
  outline: none; 
}

.BlogSearch .search-action {
  padding: 0.6rem 1.2rem;
  font-weight: bold;
  color: #ffffff;
  background-color: #0d6efd;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.BlogSearch .search-action:hover {
  background-color: #0b5ed7;
}

تصميم وتنسيق أداة المشاركات الشائعة

تُعد خطوة إضافة المشاركات الشائعة في بلوجر من أقوى الاستراتيجيات لخفض معدل الارتداد (Bounce Rate). فعندما يتصفح الزائر مدونتك، فإن عرض المقالات الأكثر تفاعلاً أمامه يشجعه على النقر وقراءة المزيد من المحتوى. في قالب "كوداتي ستارتر"، صممنا هذه الأداة لتكون جذابة بصرياً ولا تشغل حيزاً عشوائياً، مما يعزز من قوة الروابط الداخلية ويزيد من مدة بقاء الزائر.

بشكل افتراضي، تقوم بنية XML في منصة بلوجر بتوليد كود عنوان المقال قبل كود الصورة المصغرة. ولتحقيق المظهر الاحترافي المتوافق مع الاتجاه العربي (الصورة يميناً والعنوان يساراً) دون الحاجة لتعديل أكواد المنصة المعقدة، سنعتمد على تنسيق المشاركات الشائعة بـ CSS نقي. استخدمنا تقنية Flexbox وخاصية العكس (Row-reverse) لإعادة ترتيب العناصر بصرياً بكل سهولة. هذا الأسلوب يضمن توافق الأداة مع كافة الشاشات بشكل ذكي، مع منح الصور حواف دائرية تتناسب مع هوية القالب وتنسيقات بوتستراب.

بعد إضافة أداة "المشاركات الشائعة" من لوحة التخطيط، توجه إلى محرر المظهر وابحث عن الوسم </b:skin>، ثم انسخ كود التنسيق التالي وضعه فوقه مباشرة ليتم تطبيقه فوراً:

/* --- تنسيق أداة المشاركات الشائعة: قالب كوداتي ستارتر --- */
.PopularPosts .post {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #dee2e6;
}

.PopularPosts .post:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.PopularPosts .post-content {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
}

.PopularPosts .item-thumbnail {
  flex-shrink: 0;
  margin: 0;
}

.PopularPosts .item-thumbnail img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 0.25rem;
}

.PopularPosts .post-title {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  font-weight: 600;
  text-align: right;
}

.PopularPosts .post-title a {
  color: #212529;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.PopularPosts .post-title a:hover {
  color: #0d6efd;
}

إعدادات أداة التسميات في بلوجر وطريقة تفعيل عرض مجموعة

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

للوصول إلى أفضل نتيجة في تصميم تصنيفات المدونة، يُنصح دائماً بالدخول إلى إعدادات الأداة من لوحة التخطيط، وتغيير طريقة العرض من "قائمة" إلى خيار "مجموعة". عند تفعيل هذا الخيار، يقوم محرك بلوجر بتوليد كلاس برمجي يحمل اسم .cloud-label-widget-content ليجمع الروابط بجانب بعضها بدلاً من تكديسها عمودياً.

أثناء تصميم قالب "كوداتي ستارتر"، قمنا بكتابة كود CSS مخصص يستهدف هذا الكلاس بدقة، ليقوم بتطبيق عرض التسميات كأزرار ذات حواف دائرية أنيقة تتوزع بانسيابية وتتغير ألوانها عند مرور الماوس (Hover). هذا التصميم الاحترافي يتوافق بسلاسة مع إطار العمل بوتستراب، ويحسن بشكل مباشر من تجربة المستخدم (UX). انسخ الكود التالي وضعه أسفل التنسيقات السابقة:

/* تنسيق التسميات عند اختيار عرض مجموعة */
.sidebar .cloud-label-widget-content {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sidebar .cloud-label-widget-content .label-name {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  color: #475569;
  background-color: #f1f5f9;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.sidebar .cloud-label-widget-content .label-name:hover {
  background-color: #0d6efd;
  color: #ffffff;
}

التنسيق التلقائي لأدوات بلوجر وتأثيره على السيو (SEO)

بهذا الإعداد، أصبح القالب ذكياً؛ بمجرد الدخول إلى لوحة تحكم بلوجر "التنسيق" وإضافة أي أداة (سواء كانت تسميات، مشاركات شائعة، أو كود HTML خارجي)، سيقوم القالب تلقائياً بتغليفها داخل تصميم البطاقة الاحترافي ذي الإطار الخفيف دون أي تدخل إضافي. من منظور تحسين محركات البحث، يضمن هذا التقسيم توزيع الروابط الداخلية بشكل متوازن ويحافظ على نظافة الأكواد، مما يسرع عملية زحف العناكب ويجعل من تصفح موقعك تجربة متماسكة وممتعة على كافة أنواع الأجهزة.