انبثاق الصور في صندوق مثل الوردبرس

بسم الله الرحمان الرحيم 

السلام عليكم ورحمة الله وبركاته اهلن وسلهن بزوارنا الكرام في درس جديد واضافة حصرية بمدونة علمني.

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

اليكم التجريب المباشر للاداة : هنا

 عدد المشاهدات : 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"