wowo

هل تعاني من ظهور صور المعاينة بأحجام عشوائية أو مشوهة في مدونتك؟ في هذه المقالة، سأشاركك الكود الذي أستخدمه في WowoLabs لضبط أبعاد الصور وجعلها تظهر بشكل متناسق واحترافية. 🌟 مميزات هذا الكود: ✅ التحكم في الأبعاد: يضمن عدم تجاوز الصورة لحجم محدد لتبقى المعاينة أنيقة. ✅ الحفاظ على الجودة: تضمن ظهور الصورة كاملة دون قص (Crop) عشوائي. ✅ التوسط التلقائي: يجعل الصورة دائماً في منتصف المساحة المخصصة لها. ✅ التنسيق المنضبط: الصورة لن "تفرش" وتأخذ عرض الصفحة كله بل ستترتب بذكاء. 🛠️ طريقة الاستخدام: ببساطة، قم بنسخ الكود التالي ووضعه في قسم إضافة CSS داخل إعدادات المظهر بمدونتك: CSS CODE WowoLabs Exclusive /* كود ضبط حجم صور المعاينة في الصفحة الرئيسية */ .snippet-thumbnail img { width: auto !important; max-width: 200px !important; /* يمكنك تعديل الرقم حسب رغبتك */ h...

CSS /* جعل وصف التدوينة سطر واحد فقط في المعاينة */ .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; /* ارتفاع السطر لضمان عدم ظهور الزيادة */ } 🛠️ طريقة وضع الكود: المظهر ← تخصيص ← الإعدادات المتقدمة ← إضافة CSS ⚠️ نصيحة: أنا (أعوذ بالله من كلمة أنا) عدت شغلي عشرات المرات.. لا تحاول تقرب جنب تعديل HTML لو ما كنت مبرمج أو مطور، الأفضل والآمن لك هو خيار "إضافة CSS".