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

النشرة البريدية @

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

دروس، شرح، طريقة، بلوجر

تحتوي هذه المقالة على ما يلي

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

الطريقة:

1 ـ من لوحة التحكم Blogger إذهب إلى قالب => تحرير HTML.
(ننصح بأخذ نسخة احتياطية من القالب)
2 ـ ابحث بالإستعانة بـ (CTRL+F) عن الكود ]]></b:skin> وضع قبله الكود التالي:
.post-body img {
width: 600px!important;
height: 400px!important; } 
3 ـ إمكانية تعديل عرض وطول الصور: 
غير الرقم 600 برقم العرض الذي تريده. غير الرقم 400 برقم الطول الذي تريده.
4 ـ اضغط حفظ ... هنيئا لك :)

تطويرات الكود:

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

أحجام الصور قد تكون مختلفة في مدونتك، بعضها يكون مستطيلا عموديا، وبعضها يكون مستطيلا أفقيا، وبعضها مربعا.. الخ... وبالتالي فإن تحديد حجمها جميعا بأرقام محددة بالكيفية التي ذكرناها سابقا، قد تجعل أحجام الصور ومظهرها غير منسقا، لأنها ستصبح جميعها في أبعاد موحدة، مما قد يؤثر على مظهر بعضها، بحيث يكون العرض والطول لا يتناسب مع العرض والطول الطبيعي للصورة. فما الحل إذا؟ أنظر الصورة التوضيحية التالية، واكتشف الحل:
ضبط حجم جميع الصور تلقائيا في مدونة بلوجر
أنصح بتحديد عرض الصورة فقط، مع وضع نجمة في طولها، لتأخذ جميع صور الموقع عرضا موحدا، مع اختلاف الطول، تماشيا مع الأبعاد الطبيعية للصورة. وعليه، فإني وضع هذا الكود
1 ـ ابحث بالإستعانة بـ (CTRL+F) عن الكود ]]></b:skin> وضع قبله الكود التالي:
.post-body img {
width: 80%!important;
height: *px!important; } 
2 ـ غير الرقم 80% بنسبة العرض الذي تريدها.
3 ـ اضغط حفظ ... هنيئا لك :)

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

1 ـ أضف الكود التالي:
@media screen and (max-width:900px){
.post-body img {
width: 200px!important;
height: 200px!important; }
          } 
2 ـ غير القيم التالية بما يناسب مدونتك:
غير 900px بحجم العرض الذي تريد تطبيق الكود عليه.
غير 200px بما يناسب العرض والطول الذي تريد أن تظهر الصور به
هذا الكود يمكن وضعه أسفل الكود الأول، كما يمكن وضع متكررا مع تغيير القيم المذكورة بمايناسب كل حجم عرض.

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

أضف تعليق