طريقة وضع إطار أنيق حول الصور في مدونة بلوجر

طريقة وضع إطار أنيق حول الصور في مدونة بلوجر

اذا كنت من هوات تنسيق الصور في مدونتك ، و تريد جعل كل الصور تبدو بإطار أنيق كما بالصورة الموالية

فهذا الشرج البسيط سيعطيك افضل طريقة تمكنك من ذلك

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

---

الخطوة الأولى :

بعد تسجيل الدخول إلى مدونتك ، و في لوحة تحكم المدونة توجه إلأى القوالب   Template ثم و من ثم تخصيص   Edit HTML.

انظر الصورة :

الخطوة الثانية :

من داخل المحرر قم بالاستعانة باختصار لوحة المفاتيح  CTRL + F  و هذا من أجل فتح مربع البحث ثم اكتب الكود التالي :

.post-body img

الخطوة الثالثة :

قم بتظليل الكود الخاص بصور التدوينة مثلما يظهر بالصورة :

بعدها قم بحذفه و استبدله بالكود التالي :

.post-body img {
padding: 1px;
background: transparent !important;
border: 9px solid transparent !important;

-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .3);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .3);
box-shadow: 3px 3px 10px rgba(0, 0, 0, .3);
}

انظر الصورة بعد التعديل :

قم بحفظ التغيير الذي قمت بإجرائه ثم تفحص الصور بمدونتك و ستصبح الصور كلها بالشكل الإنيق مثل الصورة التالية :

 ملاحظة :

هذا التعديل سيعطي كل صورك التي بالمدونة الظل و الإطار

---

كيف تقوم بتخصيص الكود السابق :

إذا كنت ترغب في زيادة أو تقليل حجم الحد الأبيض ، فاضبط  9px  في الكود أو الشيفرة التالية :

.post-body img {
padding: 1px;
background: transparent !important;
border: 9px solid transparent !important;

-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .3);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .3);
box-shadow: 3px 3px 10px rgba(0, 0, 0, .3);
}

 

قم مثلا بتغييرها نحو 15px إذا أردت أن تجعل الحدود سميكة ، و العكس مثلا 5px إذا أردت ان تجعلها رقيقة

بالنسبة للظل  :

يمكنك التعديل على رقم 3 المتواجد بالكود و تغييره بالزيادة إذا اردت ان تجعل الظل بارز

و تقيله إذا اردت أن تجعل الظل خفيف :

.post-body img {
padding: 1px;
background: transparent !important;
border: 9px solid transparent !important;

-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .3);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .3);
box-shadow: 3px 3px 10px rgba(0, 0, 0, .3);
}

 

يرجى ترك تعليق أو مراسلتنا  إذا كان لديك أي أسئلة أو ترغب في  طلب شرح أو حل مشكلة ما .