اضافة فتح صورة الموضوع بدون جى كويرى

اضافة فتح صورة الموضوع بدون جى كويرى - هذه المرة على مدونة روتكس فى هذا الدرس التعليمى عن كيفية إصلاح صور العرض المبسط او عرض الصور (Lightbox) التى لا تظهر بشكل مثالى فى المدونة عند الضغط عليها، تعمل اضافة عرض الصور عند استخدام رابط URL الصورة واضافة ارتباط للصورة.

لإصلاح معرض صور اللايت بوكس لا تطلب جافاسكريبت او جى كويرى، ببساطة باستخدام اكواد CSS فقط.

يفضل اضافة كود CSS التالى من تحرير القالب وليس من تخصيص القالب او التخطيط حتى تعمل الاضافة.

اضافة فتح صورة الموضوع بدون جى كويرى

1. اذهب الى لوحة التحكم > القالب > تحرير HTML 

2. ابحث عن ]]></b:skin> ، وضع الكود التالي فوقه

/* lightbox image, etc */

.CSS_LIGHTBOX {z-index:99999999!important;}

.CSS_LIGHTBOX_BG_MASK_TRANSPARENT {opacity:.95!important;}

.CSS_LIGHTBOX_SCALED_IMAGE_IMG {width:auto!important;max-width:100%;box-shadow:0 0 10px rgba(0,0,0,0.1);}

.CSS_LIGHTBOX_BTN_CLOSE {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCD0Pm9Ap7wyxbbj7060VxPNdtduBWHt1D-82Wlvv5LxnkDkLjuJ6is4VMBCx9SLh3QfVRfOZM0SNldmnK6zNhK-GfhMx8WtsJVKfrOg0lmjqnvhTjcPbaJ2gkmQ9APj_NCIF3jexq/s1600/delete.png') no-repeat!important;width:32px!important;height:32px!important;top:30px!important;opacity:0.7;transition:all .3s;}

.CSS_LIGHTBOX_BTN_CLOSE:hover{opacity:1;}

.CSS_LIGHTBOX_BTN_CLOSE_POS {left:10px!important;}

.CSS_LIGHTBOX_BG_MASK{background-color:rgba(0,0,0,0.8)!important}

.CSS_LIGHTBOX_FILMSTRIP{background-color:rgba(0,0,0,0.5)!important}

3. احفظ القالب.

للاطلاع على النتائج، توجه الى معاينة احدى مشاركات مدونتك ثم اضغط على صورة المشاركة، ستظهر لك الصور فى العرض المبسط بشكل رائع وانيق.

https://rotkx.blogspot.com/2017/11/lightbox-image-for-blogger.html