21

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

بعدما شاهدتم الاداة مباشرة لننتقل الى كيفية اضافتها الى بلوغر 
الخطوة الاولى :
نتجه نحو : Dashboard/Edit HTML 
تنويه يجى تحميل نسخة احتياطية لقالب مدونتك قبل الشروع في اضافة هاته الاداة 
 اولا نتبحث عن :

</head>
 ونستبدلها بي 
 




<!--Light Box Code Starts 3alymni.blogspot.com -->
<style>
#lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer&gt;#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6i8qUndHr73Gu7y4cjuOVeGWHh-1dpnD00RkOMfVvTLJ8V-Du8Uk8PRdA71QCdo6rlh1IAC5ZwA1eMiHJgJjrDGKMjshWSayxRxpbKWI51NP13P1zistxYnoCTkW1fmYsuYfzMD4fxdw/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaDHW1WPBmmhafG9C7I5-oR5aLbdh_DhV8ezmetCBeUVh-ltUUfYW6YRor9RVq9U11PQ6QqSdrD1lsV6Cr2H-e6DrQDOygiVDQvQ6I8gBNRbJ7w-dkTjeK4PMOX7OZ8y4wPaPD2nIuK-c/) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }

#imageData{    padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; } 
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }         
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}      

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/>
<script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/>
<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>
<!--Light Box Code Ends 3alymni.blogspot.com-->
</head>
ثم اضغط 
Save Template
الخطوة الثانية :
بعد ذلك لتجرب بان الاداة تعمل ارفع صور من محرر ثم اضغط على edit html 
بعد ذلك قم بإضافة السطر التالي : 
el="lightbox" title="3alymni.blogspot.com" 
كما في الصورة :
 


هكذا ينتهي درسنا نتمنى ان تنال الاضافة رضاكم واعاجبكم 
وفي جالة اردت اي يكون الصندوق على هيئة البوم 
السطر الازرق اعلاه استبدله بهذا :
rel="lightbox[albumname]" title="3alymni.blogspot.com"

Stumble
Delicious
Twitter
Facebook
Digg
Digg

غير معرف يقول... @ 27 سبتمبر 2010 في 9:59 م  أضف ردا

اضافه حلووه :)
لكن عندي استفسار
بالنسبه للخطوه الثانيه << هل تكرر الخطوه كلما اضفنا صوره بكل موضوع ...؟

Nora يقول... @ 28 سبتمبر 2010 في 8:06 ص  أضف ردا

اضافه جدا رائعه
لاكن الشرح مو واضح
مافهمت بعد مااستبدل الكود ايش اسوي الحين؟؟

ويعطيك العافيه

soufian يقول... @ 28 سبتمبر 2010 في 11:54 ص  أضف ردا

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

soufian يقول... @ 28 سبتمبر 2010 في 11:58 ص  أضف ردا

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

jamal يقول... @ 28 سبتمبر 2010 في 6:28 م  أضف ردا

اضافة ولا اروع اخ سفيان مشكور على الدرس المطروح كما اشكرك على طريقة شرحك السهلة جدا + ساضيفها الى مدونتي على فور
تحياتي

غير معرف يقول... @ 29 سبتمبر 2010 في 5:03 ص  أضف ردا

:) اوكي خيو مشكور على حسن التقبل
موفق ~

احمد خان يقول... @ 5 أكتوبر 2010 في 8:29 م  أضف ردا

والله اضافة ولا اجمل اخي الكريم تشكر عليها جاري اضافتها الى مدونتي الله يوفقك

Key يقول... @ 6 أكتوبر 2010 في 10:22 م  أضف ردا

اداة رائعة فعلاً ,, منذ فترة وانا ابحث عن شسبيهه لها ممكن تساعدني في تطويرة

اريد نافذة منبثة كهذة تظهر عند فتح رابط ونظع فية المعلومات التي نريد مع الرابط في هذه النافذة

او اعلانات ادسنس

soufian يقول... @ 9 أكتوبر 2010 في 5:23 م  أضف ردا

اهلن بك اخ key
بخصوص وضع اعلانات ادسنس في نافذة منبثقة مخالف لقوانين غوغل + اما بخصوص طلبك الاول بحول الله سنعمل على وضع درس لاضافة شبيه بهذه لكن مهتما وضع نص او ما شابه

Key يقول... @ 11 أكتوبر 2010 في 1:24 ص  أضف ردا

بوركت اخي

بالنسبة للأضافة ليست مخالفة على حد علمي لسياسة ادسنس اعرف موقع من فترة عاملها ولم يتوقف جوجل ادسنس عنها ! اعتقد يكون مخالف اذا كانت فتحة اجبارية وانبثاق
--
على كل حال ياريت لو تعمل عليها مع اضافة نص ( وصف لرابط لمن رغب ) يكون افضل وتمشل شريحة اكبر

وبوركت على المجهود المبذول وهذة الاضافات الرائعة

سهير يقول... @ 13 أكتوبر 2010 في 6:33 م  أضف ردا

بروكت ياخ سفيان على اضافة الاكثر من رائعة جاري اضافتها الى مدونتي تحياتي لك

سارة العطار يقول... @ 24 نوفمبر 2010 في 11:31 م  أضف ردا

ممكن صورة توضحية لتوضيح كيف تظهر تقنية انبثاق الصور في صندوق

ممكن مثال توضيح يوضح شكلها فى النهاية

soufian يقول... @ 25 نوفمبر 2010 في 11:48 ص  أضف ردا

حياك الله اختي سوسي :
بخصوص استفسارك انا واضع الديمو في الموضوع بس الواضح انو ما شفتيه بس اليك : http://demo-3alymni.blogspot.com/2010/09/test-of-light-box-image-viewer.html

سارة العطار يقول... @ 25 نوفمبر 2010 في 2:14 م  أضف ردا

جزاك الله خير وهى تقنية رائعة كنت ابحث عنها من زمان حيث ان مدونتى انشر فيها الكثير من الصور

اخى بالنسبة لخطوه لاولى تم عملها والحمد لله
اما الخطوة الثانية عندما اقم باضافة السطر من تحرير html لموضوع وانشر الموضوع اما ان يظهر السطر او لا يظهر ولكن الصورة كما هى لا تنبثق فى صندوق

فارجوا توضيح الخطوة الثانية لانه يمكن ان اكون باضيف السطر فى مكان خطأ

غير معرف يقول... @ 14 ديسمبر 2010 في 11:42 ص  أضف ردا

اخوي الخطوه الثانيه مو فاهمتها

الان عملت الاولى

طيب الثانيه شو تقصد

1\ ان " ارفع الصوره من المحرر "

2\ اين اضع الكود اللى باللون الازرق

3\ الكود اللى وضعت صوره له بحثت عنه لم اجده


ارجوا تفصل الخطوه الثانيه اكثر

لان الاضافه رائعه وبودي اضعها

soufian يقول... @ 14 ديسمبر 2010 في 2:00 م  أضف ردا

السلام عليكم
بخصوص مشكليكما اختي سوسي والاخ "غير معرف" اليكما الحل
اولا نرفع اي صورة ثم نجعل المحرر في وضعية edit html بعد ذلك ستظهر لنا الاسطر البرمجية سنبحث عن رابط الصورة بعد ان نجده نتجه قبيل رابط الصورة سنجد التالي : > a href بعد حرف a سنضع السطر المشار اليه بلون الازرق
ثم نحذف h- من رابط الصورة وعادة تكون هكذا s600-h وهذا يتحكم في الحجم الاصلي للصورة

奧拉謝里夫 يقول... @ 24 ديسمبر 2010 في 10:17 م  أضف ردا

اضافة بحق رائعه
كان نفسي اعرفها من زمان
سلمت اليمين وجعلها جزاءها في عليين
اخي ياليت تعلمنا كيفية وضع كود عدد مشاهدات الموضوع كما عندك.
وأكون لك شاكرة

奧拉謝里夫 يقول... @ 24 ديسمبر 2010 في 10:43 م  أضف ردا

جربته وللأسف لم يضبط معي
يكتب لي بأنه لايمكن توزيع القالب:/

soufian يقول... @ 25 ديسمبر 2010 في 12:37 م  أضف ردا

@奧拉謝里夫
وعليكم السلام اختي الكريمة
ان شاء الله وبحول الله راح اضع درس لكيفية اضافة هاك المشاهدات على منصة بلوجر
اما بخصوص مشكلتك في اضافة هاك انبثاق الصور الى مدونتك يمكن يكون الخطا منك

مدونة ابو معاذ يقول... @ 24 يناير 2011 في 12:16 ص  أضف ردا

ممكن التوضيح اكثر

soufian يقول... @ 24 يناير 2011 في 4:24 م  أضف ردا

@مدونة ابو معاذ
اهلن فيك اخي الكريم
بخصوص استفسارك ايش تقصد ؟