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

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

أولا: ضبط حجم الصور عن طريق وضع مقاسات تقييد خروجها عن إطار الصفحة. اتبع الخطوات التالية:

1- قم بالدخول الى لوحة التحكم ثم القالب ثم تعديل القالب Template > Edit HTML

2- اضغط Ctrl + F وقم بالبحث عن الكود التالي

]]></b:skin>

3- ضع فوقه الكود التالي

.post img {
max-width:500px;
max-height:500px;
padding : 10px;
clear: both;
}

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

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

1- قم بالدخول الى لوحة التحكم ثم القالب ثم تعديل القالب Template > Edit HTML

2- اضغط Ctrl + F وقم بالبحث عن Post Blockquote

3- قم بتعديل الكود أسفل منه علي الصورة التالية (صندوق الاقتباس سيكون بإطار أسود رفيع) يمكنك تغيير لون الإطار بتغيير الكود الملون بالأحمر للكود الذي يناسب مدونتك.

/*- Post Blockquote -*/
blockquote {
margin:1em 20px;
border: 1px solid #000000;
padding: 5px;
}

شكل الكود بعد اضافته فى مكانه الصحيح - اضغط على الصورة لتكبيرها

هنا صورة أخري للتعديل علي شكل صندوق الاقتباس (سيكون بإطار نقطي أحمر سميك بخلفية بيضاء) يمكنك تغيير لون الإطار والخلفية بتغيير الكود الملون بالأحمر للكود الذي يناسب مدونتك.

/*- Post Blockquote -*/
.post blockquote {
background:#ffffff;
margin:1em 20px;
border: 3px dotted #ff0000;
padding: 10px;
overflow:hidden;
}

هذه معاينة للمثال السابق - اضغط على الصورة لتكبيرها

هنا صور أخري للتعديل بحيث يكون عبارة عن خلفية مظللة فقط ويمكن تغيير لونها بما يناسب مدونتك.

/*- Post Blockquote -*/
.post blockquote {
margin:1em 20px; background: #cccccc;
}

أى سؤال لا تتردد فى طرحه فدائما نحن بخدمتك على قدر المستطاع. :)