منتديات احفاد الرسول

بسم الله الرحمن الرحيم قُلْ هُوَ اللَّهُ أَحَدٌ اللَّهُ الصَّمَدُ لَمْ يَلِدْ وَلَمْ يُولَدْ وَلَمْ يَكُن لَّهُ كُفُوًا أَحَدٌ
 
الرئيسيةاليوميةس .و .جبحـثالأعضاءالمجموعاتالتسجيلدخولتفسير القران الكريم قراءة القران الكريماذاعات القران الكريمكتبقنواتقصص رائعة منتديات الياس عيساوي بث قناة الجزيرةاوقات الصلاةاستماع للقراءن الكريم
دليل سلطان للمواقع الإسلامية

شاطر | 
 

 تغير شكل lightbox الخاص ببلوجر بآخر مميز

اذهب الى الأسفل 
كاتب الموضوعرسالة
eliasissaoui
Admin
avatar

ذكر عدد المساهمات : 16999
تاريخ التسجيل : 04/07/2013
الموقع : https://www.youtube.com/watch?v=QriWAmC6_40

مُساهمةموضوع: تغير شكل lightbox الخاص ببلوجر بآخر مميز   السبت مايو 10, 2014 3:02 am

كيف الحال إخواني اليوم يستم طرح تطبيق مميز على خصائص مدونات بلوجر

هذا التطبيق سيغير شكل lightbox الخاص ببلوجر بآخر مميز

صورة من الشكل الجديد




ما هي خاصية lightbox أولا؟

هذه الخاصية تهم الصور التي ترفعها في مواضيع مدونتك بحيث عندما يضغط الزائر على الصورة لروئيتها تضهر هذه الخاصية جميع الصور المتوفرة في الموضوع على شكل سلايد شو وهذه الإضافة ستغير شكله كما في مثال الصورة


لتطبيق هذا التغير على خاصية lightbox اتبع الخطوات التالية:

إبحث عن الوسم التالي ]]></b:skin>

ثم فوقه ضع الكود التالي


اقتباس :
#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;}
#jquery-lightbox{position:absolute;top:10%;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;max-width: 960px;max-height: 560px;margin:0 auto;}
#lightbox-container-image{padding:10px;}
img#lightbox-image {max-height: 540px;max-width: 940px;}
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0;}
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width: 100%;z-index:10;}
#lightbox-container-image-box > #lightbox-nav{left:0;}
#lightbox-nav a{outline:none;}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block;}
#lightbox-nav-btnPrev{left:10%;float:left;}
#lightbox-nav-btnNext{right:10%;float:right;}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;max-width: 940px;;padding:0 10px 0;}
#lightbox-container-image-data{padding:0 10px;color:#555;}
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left;}
#lightbox-image-details-caption{font-weight:bold;}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em;}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em;}

هذا الأول يخص اللون الأبيض


اقتباس :
#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;}
#jquery-lightbox{position:absolute;top:10%;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:#000;max-width: 960px;max-height: 560px;margin:0 auto}
#lightbox-container-image{padding:10px;}
img#lightbox-image {max-height: 540px;max-width: 940px;}
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0}
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width: 100%;z-index:10}
#lightbox-container-image-box > #lightbox-nav{left:0;}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block}
#lightbox-nav-btnPrev{left:10%;float:left}
#lightbox-nav-btnNext{right:10%;float:right}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#000;margin:0 auto;line-height:1.4em;overflow:auto;max-width: 940px;;padding:0 10px 0}
#lightbox-container-image-data{padding:0 10px;color:#fff}
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:bold}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em}

وهذا الكود يخص اللون الأسود


بعد ان اخترت اللون الذي تريد ووضعته فوق الوسم ]]></b:skin>

إبحث أيضا عن الوسم التالي </head>

ثم فوقع ضع هذا الكود


اقتباس :

يخص الكود الاول اي اللون الابيض




يخص الكود التاني اي اللون الاسود


الآن إنتهينا من تركيب الشكل الجديد الخاص بخاصية lightbox

آخر خطوة هي إيقاف تشغيل النمط القديم لخاصية lightbox  لكي يشتغل النمط الجديد الذي قمنا بتركيبه

فقط اتبع الصورة التالية



 

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

بالتوفيق للجميع ودمتم في رعاية الله وحفظه


بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ  قُلْ هُوَ اللَّهُ أَحَدٌ (1) اللَّهُ الصَّمَدُ (2) لَمْ يَلِدْ وَلَمْ يُولَدْ (3) وَلَمْ يَكُنْ لَهُ كُفُوًا أَحَدٌ (4) 

 
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://info-noor-islam.ahlamontada.com
 
تغير شكل lightbox الخاص ببلوجر بآخر مميز
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» سيدي محمد الطاهر ايت علجت
» سب اللي ببالك ببيت شعر...
» بدء الزيارات الميدانية للمراجعين
» مدارس القليوبية تحتل المرتبة الثانية فى الإعتماد التربوى
» تهنئة لمدرسة مصطفى كامل التجريبية

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات احفاد الرسول :: منتدى: المعلوميات :: إضافات بلوجر المميزة Blogger widget-
انتقل الى:  
تعليقات فيسبوك

تابعنا على فيسبوك
online
تويتر طائر


هذه الرسالة تفيد أنك غير مسجل .

و يسعدنا كثيرا انضمامك لنا ...

للتسجيل اضغط هـنـا