شروحات تك | شروحات تقنية بالعربية: وداعا الفراغات البيضاء في بلوجر حل نهائي بكود CSS بسيط

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

سنوضح خطوات ضبط عرض القالب لضمان مظهر احترافي ومتناسق يضمن راحة الزوار.

عندما تكتشف أن المشكلة ليست في محتوى المدونة

حذف جميع الصور والفيديوهات مع استمرار رسالة "لا توجد مساحة كافية" يشبه تماماً فتح مدونة "بلوجر" لتجد فراغاً كبيراً على الجانبين، بينما يُحشر محتوى المقال في المنتصف دون استغلال مساحة الشاشة.

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

غالباً ما يعود السبب إلى شريط تمرير أفقي يظهر بسبب عنصر تجاوز حدود القالب، أو إعدادات `margin` أو `padding` غير مضبوطة داخل `body` أو الحاوية الرئيسية.

تجربتي الأولى مع الفراغ الجانبي

عندما واجهت هذه المشكلة لأول مرة، اعتقدت أن القالب تالف أو أن هناك خطأ في إعدادات العرض. 

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

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

حل مشكلة التمرير الأفقي في "بلوجر"

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

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

يتضمن هذا الشرح شيفرة CSS منظمة، وطريقة إدراجها في قالب "بلوجر"، مع حلول إضافية في حال استمرار ظهور الفراغ بعد تطبيق الشيفرة.

جدول المحتويات

ما القصة وما الذي يحدث فعلًا؟

الشيفرة المستخدمة لحل المشكلة

طريقة تركيب الشيفرة في قالب بلوجر

ماذا تفعل كل خاصية داخل الشيفرة؟

3 أخطاء قاتلة الكل يقع فيها

نصيحتي لك بعد التجربة

أسئلة شائعة

ما القصة وما الذي يحدث فعلًا؟

الفراغ الموجود في الأطراف الجانبية لمدونة بلوجر لا يكون سببه واحدًا في كل القوالب. 

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

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

النتيجة أن المتصفح يضيف مساحة جانبية، فتشعر أن المدونة غير مرتبة.

في قوالب بلوجر القديمة، قد تجد أيضًا تنسيقات مثل:

CSS

body {
  margin: 10px;
  padding: 10px;
}

وهذا يضيف فراغًا حول كامل الصفحة. كذلك يمكن أن يكون العنصر الرئيسي مثل .content-wrapper أو .outer-wrapper أعرض من الشاشة.

الشيفرة التالية تساعد على منع التمرير الأفقي وإجبار الصفحة على استخدام التمرير العمودي:

CSS

<style>
  body {
    overflow: -moz-scrollbars-vertical;
    overflow-x: hidden;
    overflow-y: scroll;
    position: initial;
  }
</style>

هذه ليست سكريبت JavaScript، بل شيفرة CSS مسؤولة عن تنسيق طريقة ظهور الصفحة والتحكم في أشرطة التمرير.

الشرح العملي خطوة بخطوة

1. انسخ الشيفرة كما هي

CSS

<style>
  body {
    overflow: -moz-scrollbars-vertical;
    overflow-x: hidden;
    overflow-y: scroll;
    position: initial;
  }
</style>

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

2. ادخل إلى لوحة تحكم بلوجر

1. افتح مدونتك في بلوجر، ثم اختر:

2. المظهر.

3. السهم الموجود بجانب زر تخصيص.

4. تعديل HTML.

5. استخدم البحث داخل القالب بالضغط على Ctrl + F.

6. ابحث عن الوسم: </head>

3. ضع الشيفرة قبل وسم </head>

يجب أن يكون شكلها قريبًا من هذا:

CSS

<style>
  body {
    overflow: -moz-scrollbars-vertical;
    overflow-x: hidden;
    overflow-y: scroll;
    position: initial;
  }
</style>

</head>

لا تضع الشيفرة بعد </html>، ولا تلصقها داخل وسم آخر بطريقة عشوائية. الأفضل وضعها مباشرة قبل </head> حتى يقرأها القالب عند تحميل الصفحة.

4. احفظ القالب وجرب المدونة

اضغط على أيقونة الحفظ، ثم افتح المدونة من نافذة خاصة أو امسح ذاكرة التخزين المؤقت للمتصفح.

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

📚 مقالات مقترحة لك:

✅ حل مشكلة عدم ظهور مواضيع ذات صلة أسفل التدوينة على موقعك

✅ كيفية إنشاء روابط داخلية تلقائية في منشور بلوجر

ما وظيفة كل خاصية في الشيفرة؟

cssoverflow-x: hidden;

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

overflow-y: scroll;

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

cssoverflow: -moz-scrollbars-vertical;

هذه خاصية قديمة كانت مرتبطة بمتصفح Firefox. غالبًا لن تحتاج إليها في المتصفحات الحديثة، لكنها موجودة في الشيفرة الأصلية ويمكن إبقاؤها دون تأثير مهم.

cssposition: initial;

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

إذا كان القالب يستخدم مسافات داخلية كبيرة، استخدم:

body {  margin: 0;  padding: 0;}

أما إذا كان الفراغ يظهر داخل المقال فقط، فالمشكلة قد تكون في حاوية المحتوى وليس في body. في هذه الحالة يمكن تجربة:

#content-wrapper,.content-wrapper,.post-body {  max-width: 100%;  box-sizing: border-box;}

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

3 أخطاء قاتلة الكل يقع فيها

الخطأ الأول: وضع الشيفرة في المكان الخطأ

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

المكان الأفضل هو قبل وسم:

 


                                                                              </head>

الخطأ الثاني: إخفاء المشكلة بدل معرفة سببها

استخدام:

overflow-x: hidden;

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

راجع الصور والإعلانات، واجعل الصور متجاوبة بهذا الشكل:

img {  max-width: 100%;  height: auto;}

الخطأ الثالث: حذف أجزاء من الشيفرة دون معرفة وظيفتها

قد ترى تعليقًا يحتوي على اسم المدونة أو رابط صاحب القالب، وهذا التعليق لا يؤثر في عمل الشيفرة. لكن حذف الأقواس أو علامات التنصيص أو الفاصلة المنقوطة قد يجعل التنسيق لا يعمل.

مثال صحيح:

body {  overflow-x: hidden;  margin: 0;  padding: 0;}

ومثال غير صحيح:

body  overflow-x hidden

في CSS يجب وضع الخصائص داخل الأقواس، مع استخدام النقطتين : بعد اسم الخاصية.

نصيحتي لك بعد التجربة

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

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

إذا اختفى الفراغ من الكمبيوتر وبقي في الهاتف، فابحث عن العناصر ذات العرض الثابت، مثل الإعلانات أو الجداول أو الصور الكبيرة.

يمكنك أيضًا استخدام أدوات المطور في متصفح Chrome، ثم تصغير عرض الشاشة ومراقبة العنصر الذي يخرج خارج حدود الصفحة. غالبًا ستجد المشكلة في:

• صورة كبيرة.
• جدول غير متجاوب.
• إعلان بعرض ثابت.
• قائمة جانبية لا تختفي في الهاتف.
• margin-left أو margin-right بقيمة كبيرة.
• حاوية يتجاوز عرضها 100%.

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

أسئلة شائعة

هل هذه الشيفرة تزيل الفراغ الجانبي من مدونة بلوجر؟

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

إذا كان الفراغ بسبب margin أو padding أو عرض ثابت داخل القالب، فستحتاج إلى تعديل العنصر المسبب للمشكلة.

أين أضع كود إزالة الفراغ في قالب بلوجر؟

ضعه مباشرة قبل وسم الإغلاق:

</head>

وتأكد من أن الشيفرة موجودة داخل وسم:

<style></style>

هل أستخدم position: initial دائمًا؟

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

<style>  body {    overflow-x: hidden;    overflow-y: scroll;  }</style>

هل واجهت فراغًا كبيرًا على أطراف مدونة "بلوجر"؟ ما السبب الذي اكتشفته في قالبك؟ يمكنك مشاهدة فيديو توضيحي لحل المشكلة.