اضافة معرض صور الى مدونتك مع الوصف

السلام عليكم ورحمة الله وبركاتة

اليوم سنتعلم كيف نضيف معرض جى كويرى للصور مع الوصف

المعرض رائع جدا وفعلا يستحق التثبيت - خطواته بسيطة جدا

- اذهب الى لوحة بلوجر - ثم الى التخطيط - اضافة أداة
- افتح

HTML/JavaScript إضافة وظيفة طرف ثالث أو شفرة أخرى إلى مدونتك الإلكترونية. بواسطة Blogger

ثم قم بوضع الكود التالى مع التعديل

 
#excerpt {
 filter:alpha(opacity=60);
 -moz-opacity:0.6;  
 -khtml-opacity: 0.6;
 opacity: 0.6;  

 list-style:none;
 margin:0;
 padding:0;

 z-index:10;
 position:absolute;
 top:0;
 left:0;

 width:100px;
 background-color:#000;
 overflow:hidden;
 font-family:arial;
 font-size:14px;
 color:#fff; 
}

 #excerpt li {
 padding:5px;
 }

.clear {
 clear:both; 
}
#btn-prev {
 border-top: 1px solid #96d1f8;
 background: #65a9d7;
 padding: 4px 8px;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
 -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
 -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
 box-shadow: rgba(0,0,0,1) 0 1px 0;
 text-shadow: rgba(0,0,0,.4) 0 1px 0;
 color: white;
 font-size: 9px;
 font-family: Georgia, serif;
 text-decoration: none;
 vertical-align: middle;
 }
#btn-prev:hover {
 border-top-color: #28597a;
 background: #28597a;
 color: #ccc;
 }
#btn-prev:active {
 border-top-color: #238acf;
 background: #238acf;
 }
#btn-next {
 border-top: 1px solid #96d1f8;
 background: #65a9d7;
 padding: 4px 8px;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
 -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
 -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
 box-shadow: rgba(0,0,0,1) 0 1px 0;
 text-shadow: rgba(0,0,0,.4) 0 1px 0;
 color: white;
 font-size: 9px;
 font-family: Georgia, serif;
 text-decoration: none;
 vertical-align: middle;
 }
#btn-next:hover {
 border-top-color: #28597a;
 background: #28597a;
 color: #ccc;
 }
#btn-next:active {
 border-top-color: #238acf;
 background: #238acf;
 }
</style>
<div id="debug"></div>
<div id="slider">

 <div id="mask-gallery">
 <ul id="gallery">
 <li><img src="رابط الصورة" width="660" height="275" alt=""/></li>
 <li><img src="رابط الصورة" width="660" height="275" alt=""/></li> <li><img src="رابط الصورة" width="660" height="275" alt=""/></li> <li><img src="رابط الصورة" width="660" height="275" alt=""/></li> <li><img src="رابط الصورة" width="660" height="275" alt=""/></li> </ul>
 </div>

 <div id="mask-excerpt">
 <ul id="excerpt">
 <li>ضع وصفك هنا</li> <li>ضع وصفك هنا</li> <li>ضع وصفك هنا</li> <li>ضع وصفك هنا</li> <li>ضع وصفك هنا</li> </ul>
 </div>

</div>

<div id="buttons" style="width: 100px;margin-left: 260px;padding-left: 25px;height: 25px;">
 <a href="#" id="btn-prev">prev</a> 
 <a href="#" id="btn-next">next</a>
</div>

<div></div> 

اللون الاخضر < لتعديل العرض
اللون الاحمر < لتعديل الطول
اللون الازرق < لتعديل رابط الصورة
اللون البرتقالى < لتعديل الوصف على الصور

ارجو ان اكون وفقت فى الشرح 

تحياتى - احمد المآأجيك