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

عدد مشاهدات الموضوع:

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

أولا: ضبط حجم الصور عن طريق وضع مقاسات تقييد خروجها عن إطار الصفحة. اتبع الخطوات التالية:
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;
}
أى سؤال لا تتردد فى طرحه فدائما نحن بخدمتك على قدر المستطاع. :)

هناك 7 تعليقات:

  1. شراك شرح رائع
    بمدونتي لايوجد هذه Post Blockquote
    انا قمت بوضع الكود اول واحد لتظبي الكتابة والصور والان اختلف شكل الصور واصبحت تظهر عن الاطار فماذا افعل

    ردحذف
  2. @Nour aldeen alzaim

    شكرا لك .. ابحث عن blockquote
    ومنتظر ردك :)

    ردحذف
  3. لم أجد كلمة Post Blockquote ما هو الحل

    ردحذف
  4. شرح جميل
    http://basmatkhair.blogspot.com

    ردحذف
  5. لم تنجح طريقة ضبط الصور

    ردحذف
  6. اخي انا لدي تقريبا نفس المشكل لكن بشكل اخر
    يعني انا النص هو الذي يخرج لي من اطار الموضوع
    شاهد مصال على الموقع:
    http://www.mota9afon.com/
    و شكرا على الشرح

    ردحذف
  7. شكرا ... لكن لا تنجح الطريقة معي

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية