ضبط حجم جميع الصور تلقائيا وجعلها متجاوبة في مدونة بلوجر

ضبط حجم جميع الصور تلقائيا وجعلها متجاوبة في مدونة بلوجر

الكاتب : Gx Records التاريخ : الخميس، 10 مايو 2018 التعليقات : 1

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

1. 1 ـ من لوحة التحكم Blogger إذهب إلى قالب => تحرير HTML.

(ننصح بأخذ نسخة احتياطية من القالب)

1. 2 ـ ابحث بالإستعانة بـ (CTRL+F) عن الكود ]]></b:skin> وضع قبله الكود التالي:

.post-body img {
width: 600px!important;
height: 400px!important; } 

1. 3 ـ إمكانية تعديل عرض وطول الصور: 

غير الرقم 600 برقم العرض الذي تريده. غير الرقم 400 برقم الطول الذي تريده.

1. 4 ـ اضغط حفظ ... هنيئا لك :) 

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

1. 1 ـ ابحث بالإستعانة بـ (CTRL+F) عن الكود ]]></b:skin> وضع قبله الكود التالي:

.post-body img {
width: 80%!important;
height: *px!important; } 

1. 2 ـ غير الرقم 80% بنسبة العرض الذي تريدها.
2. 3 ـ اضغط حفظ ... هنيئا لك :)

تطبيق ضبط الحجم بشكل متجاوب مع مختلف الوسائط:

1. 1 ـ أضف الكود التالي:

@media screen and (max-width:900px){
.post-body img {
width: 200px!important;
height: 200px!important; }
          } 

1. 2 ـ غير القيم التالية بما يناسب مدونتك:

غير 900px بحجم العرض الذي تريد تطبيق الكود عليه.
غير 200px بما يناسب العرض والطول الذي تريد أن تظهر الصور به
هذا الكود يمكن وضعه أسفل الكود الأول، كما يمكن وضع متكررا مع تغيير القيم المذكورة بمايناسب كل حجم عرض.

فيسبوك توتير جوجل + لينكدان بينتريست

معلومات عنك أكتب هــنــا

الكاتب : Gx Records

مواضيع مهمة أيضا