دروس و شروحاتشروحات بلوجر

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

كيفية وضع ظل للصور في مدونة بلوجر

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

From digital to Polaroid effect intro - طريقة وضع إطار أنيق حول الصور في مدونة بلوجر

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

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

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


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

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

انظر الصورة :

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

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

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

.post-body img

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

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

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

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

.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);
}

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

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

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

6 11 e1567187109705 300x227 - طريقة وضع إطار أنيق حول الصور في مدونة بلوجر

 ملاحظة :

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


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

إذا كنت ترغب في زيادة أو تقليل حجم الحد الأبيض ، فاضبط  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);
}

 

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

الوسوم

مقالات ذات صلة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى
إغلاق

أنت تستخدم إضافة Adblock

برجاء دعمنا عن طريق تعطيل إضافة Adblock