جعل وصف التدوينة سطر واحد في بلوجر باستخدام CSS

هل تواجه مشكلة ظهور وصف التدوينة طويلًا وفوضويًا في الصفحة الرئيسية؟ هذا الكود يجعل الوصف يظهر في سطر واحد بشكل مختصر ومرتب.

01إيش فائدة هذا الكود؟

هذا الكود مخصص لاختصار وصف التدوينات الطويل في الصفحة الرئيسية أو صفحات الفئات داخل بلوجر.

1. اختصار الوصف: يجعل الوصف يظهر في سطر واحد مع (...).
2. مظهر مرتب: يوحد ارتفاع بطاقات التدوينات.
3. تجربة أفضل: يعرض لمحة مختصرة بدل النصوص الطويلة.

وإذا كانت المشكلة في حجم صور المعاينة نفسها، راجع blogger-thumbnail-image-css.

02متى تحتاج إلى هذا الكود؟

1. عندما يظهر وصف التدوينات بعدة أسطر مختلفة.
2. عندما تكسر النصوص الطويلة تنسيق البطاقات.
3. عندما تختلف ارتفاعات بطاقات التدوينات بسبب طول الوصف.
4. عندما تريد واجهة رئيسية أكثر ترتيبًا.

03مميزات هذا الكود

1. سطر واحد فقط: يقصر الوصف عند السطر الأول.
2. تصميم أنيق: يساعد على توحيد ارتفاع البطاقات.
3. سهل التخصيص: يمكن تغيير عدد الأسطر بتعديل القيمة.
4. خفيف: يعتمد على CSS فقط.

04لماذا هذا الكود مناسب للمبتدئين؟

1. لا يحتاج خبرة برمجية: نسخ ولصق في المكان الصحيح.
2. سهل الإزالة: يمكن حذف CSS إذا لم يناسب القالب.
3. تعديله سهل: عدد الأسطر مرتبط بقيمة واضحة.
4. النتيجة مباشرة: تستطيع مراجعتها بعد الحفظ.

ولفحص العنصر أو معرفة الكلاس الصحيح في القالب يمكنك الاستفادة من inspect-tool-guide.

05طريقة الاستخدام

انسخ الكود التالي وضعه في قسم إضافة CSS داخل إعدادات المظهر في بلوجر.

06الكود المستخدم

/* جعل وصف التدوينة سطر واحد فقط في المعاينة */
.post-body .snippet-container, 
.post-body .snippet-item, 
.post-body .resizer {
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important; /* تحديد عدد الأسطر بـ 1 */
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important; /* إضافة ثلاث نقاط (...) في نهاية السطر */
  white-space: normal !important;
  max-height: 1.6em !important; /* ارتفاع السطر لضمان عدم ظهور الزيادة */
}

07كيفية دمج الكود خطوة بخطوة

1. اذهب إلى المظهر في لوحة تحكم بلوجر.
2. اضغط تخصيص.
3. اختر خيارات متقدمة.
4. انتقل إلى إضافة CSS.
5. ألصق الكود كاملًا.
6. اضغط حفظ.

08نصائح عند استخدام الكود

1. لتغيير عدد الأسطر عدّل قيمة -webkit-line-clamp.
2. إذا زدت عدد الأسطر راجع قيمة max-height أيضًا.
3. إذا لم يعمل الكود، تحقق من أسماء الكلاسات المستخدمة في قالبك.
4. ولإضافة عناصر أخرى للقالب دون خلطها بهذا الكود يمكنك مشاهدة blogger-profile-button-code.

09الخلاصة

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