11‏/11‏/2014

السلام عليكم إخواني الكرام هذه التدوينة مخصصة للجميع أو بالأحرى من لا تتواجد لديهم خاصية تكبير الصورة التي تكون بداخل الموضوع بمعنى عند الضغط على الصورة تظهر بصندوق وبحجمها الطبيعي أيضا تتيح لك إظهار صور أخرى ضمن الموضوع

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




2. حرر القالب وابحث باستعمال CTRL+F عن <b:skin/><[[
3. ضع الكود التالي فوقه
/* CSS Image Lightbox Ar1web */
#jquery-overlay{position:absolute;top:0;left:0;z-index:95;width:100%;height:500px;}
#jquery-lightbox{position:absolute;top:0;left:0;width:100%;z-index:100;text-align:center;line-height:0}
#jquery-lightbox a,#jquery-lightbox a:hover{border:none;}
#jquery-lightbox a img{border:none;}
#lightbox-container-image-box{position:relative;background-color:#fff;width:250px;height:250px;margin:0 auto;max-width:100%!important;}
#lightbox-container-image{padding:10px;}
#lightbox-loading{display:none!important;}
#lightbox-nav{position:absolute;top:25%;left:0;height:100%;width:100%;z-index:10}
#lightbox-container-image-box > #lightbox-nav{left:0;transition:All 0.2s ease;}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;display:block;transition:All 0.2s ease;}
#lightbox-nav-btnPrev{left:10%;float:left;transition:All 0.2s ease;}
#lightbox-nav-btnNext{right:10%;float:right;transition:All 0.2s ease;}
#lightbox-container-image-data-box{font-size:10px;font-family: 'Open Sans',Helvetica,sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;overflow:hidden;max-width:100%!important;padding:0 10px;}
#lightbox-container-image-data{padding:0 10px;color:#818d99}
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:normal}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em}
4. ابحث عن </body> ثم ضع الكود التالي فوقه
<script src='https://ar1web-com.googlecode.com/svn/Hm/previewimg.js' type='text/javascript'/> 
5. قم بحفظ العمل واذهب لتجرب الإضافة
السلام عليكم إخواني الكرام هذه التدوينة مخصصة للجميع أو بالأحرى من لا تتواجد لديهم خاصية تكبير الصورة التي تكون بداخل الموضوع بمعنى عند الضغط على الصورة تظهر بصندوق وبحجمها الطبيعي أيضا تتيح لك إظهار صور أخرى ضمن الموضوع

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




2. حرر القالب وابحث باستعمال CTRL+F عن <b:skin/><[[
3. ضع الكود التالي فوقه
/* CSS Image Lightbox Ar1web */
#jquery-overlay{position:absolute;top:0;left:0;z-index:95;width:100%;height:500px;}
#jquery-lightbox{position:absolute;top:0;left:0;width:100%;z-index:100;text-align:center;line-height:0}
#jquery-lightbox a,#jquery-lightbox a:hover{border:none;}
#jquery-lightbox a img{border:none;}
#lightbox-container-image-box{position:relative;background-color:#fff;width:250px;height:250px;margin:0 auto;max-width:100%!important;}
#lightbox-container-image{padding:10px;}
#lightbox-loading{display:none!important;}
#lightbox-nav{position:absolute;top:25%;left:0;height:100%;width:100%;z-index:10}
#lightbox-container-image-box > #lightbox-nav{left:0;transition:All 0.2s ease;}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;display:block;transition:All 0.2s ease;}
#lightbox-nav-btnPrev{left:10%;float:left;transition:All 0.2s ease;}
#lightbox-nav-btnNext{right:10%;float:right;transition:All 0.2s ease;}
#lightbox-container-image-data-box{font-size:10px;font-family: 'Open Sans',Helvetica,sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;overflow:hidden;max-width:100%!important;padding:0 10px;}
#lightbox-container-image-data{padding:0 10px;color:#818d99}
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:normal}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em}
4. ابحث عن </body> ثم ضع الكود التالي فوقه
<script src='https://ar1web-com.googlecode.com/svn/Hm/previewimg.js' type='text/javascript'/> 
5. قم بحفظ العمل واذهب لتجرب الإضافة
10 Blogger تعليقات
Disqus
10 التعليقات
المشرف
avatar

يعطيك العافية أخوي حسام شرح جميل .. | + ممكن شرح كيف اضع اعلانات داخل الموضوع زي مدونتك . ؟
اانا لدي القالب لكن لا اعرف كيف اضيف الاعلانات ارجو شرح الطريقة .

المشرف
avatar

تفضل : http://www.ar1web.com/2014/10/ads-unit-inside-posts.html

المشرف
avatar

شكرا لك اخي الحبيب على الموضوع
انا اريد طريقة وضعك انت للاعلانات كما في مدونتك اخي الكريم بمقياس 728*90 يعني يوجد موضوع وضعته انت لكن لم يعجبني شكلها اريدها هكذا الله يحفظك مثل هذه
http://im56.gulfup.com/W1Aozd.png
و شكرا

المشرف
avatar

يعطيك عافية اخي بس كيف اضيف هذه الى مدونتي
http://im79.gulfup.com/nUtFH3.png

المشرف
avatar

ستكون تدوينة لطريقة الإضافة في القريب العاجل

المشرف
avatar

شكرا لك اخي انت من افضل اشخاص الذين عرفتهم

المشرف
avatar

السلام عليكم ورحمة الله وبركة يا اخي ممكن طلب
ماهو الموقع المسخدم لعمل هذة الصورة
http://im85.gulfup.com/2au5AH.png
ارجو الرد علي سؤالي :)

المشرف
avatar
أزال المؤلف هذا التعليق. - حذف
المشرف
avatar

شكرا اخي ولكن ارجو نشر موضوع عن مواقع المعاينه مع الشرح وشرح مثل لملعاينه التي عملتها للي الي 19 اضافه انتظار التحميل التي عملت المعاينه مع بعضها

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة