[Nassro]

السلام عليكم
و كالعادة من أخوكم Nassro
مع الإضافات السهلة و الإحترافية
اليوم جايب ليكم كود سهل التركيب لمعرض صور خفيف على المدونة و احترافي في تبديل الصور




و لمعاينة الإضافة
http://iwares0.blogspot.com/

نأتي الى طريقة التركيب السهلة قم بأضافة أداة من نوع HTML
ولصق فيها الكود التالي

<script src='http://code.jquery.com/jquery-latest.js'></script>      
<script   src='http://mybloggertricks.googlecode.com/files/jquery.jcarousel.min.js'  type='text/javascript'></script>       
<script src='http://mybloggertricks.googlecode.com/files/mycarousel.js' type='text/javascript'></script>       
  <style>
    .jcarousel-skin-tango .jcarousel-container {      
    -moz-border-radius: 10px;       
    -webkit-border-radius: 10px;       
   border-radius: 10px;       
    background: #F0F6F9;       
    
}
    .jcarousel-skin-tango .jcarousel-direction-rtl {      
    direction: rtl;       
}
    .jcarousel-skin-tango .jcarousel-container-horizontal {      
   width:425px;        
    padding: 20px 40px;       
}
    .jcarousel-skin-tango .jcarousel-container-vertical {      
    width: 75px;       
    height: 245px;       
    padding: 40px 20px;       
}
    .jcarousel-skin-tango .jcarousel-clip {      
    overflow: hidden;       
}
    .jcarousel-skin-tango .jcarousel-clip-horizontal {      
    width:  425px;        
    height: 75px;       
}
    .jcarousel-skin-tango .jcarousel-clip-vertical {      
    width:  75px;       
    height: 245px;       
}
    .jcarousel-skin-tango .jcarousel-item {      
    width: 75px;       
    height: 75px;       
}
    .jcarousel-skin-tango .jcarousel-item-horizontal {      
    margin-left: 0;       
    margin-right: 10px;       
}
    .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {      
    margin-left: 10px;       
    margin-right: 0;       
}
    .jcarousel-skin-tango .jcarousel-item-vertical {      
    margin-bottom: 10px;       
}
    .jcarousel-skin-tango .jcarousel-item-placeholder {      
    background: #fff;       
    color: #000;       
}
    /**      
*  Horizontal Buttons       
*/       
.jcarousel-skin-tango .jcarousel-next-horizontal {       
    position: absolute;       
    top: 43px;       
    right: 5px;       
    width: 32px;       
    height: 32px;       
    cursor: pointer;       
    background: transparent url(http://mybloggertricks.googlecode.com/files/next-horizontal.png) no-repeat 0 0;       
}
    .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {      
    left: 5px;       
    right: auto;       
    background-image: url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png);       
}
    .jcarousel-skin-tango .jcarousel-next-horizontal:hover,      
.jcarousel-skin-tango .jcarousel-next-horizontal:focus {       
    background-position: -32px 0;       
}
    .jcarousel-skin-tango .jcarousel-next-horizontal:active {      
    background-position: -64px 0;       
}
    .jcarousel-skin-tango .jcarousel-next-disabled-horizontal,      
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,       
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,       
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {       
    cursor: default;       
    background-position: -96px 0;       
}
    .jcarousel-skin-tango .jcarousel-prev-horizontal {      
    position: absolute;       
    top: 43px;       
    left: 5px;       
    width: 32px;       
    height: 32px;       
    cursor: pointer;       
    background: transparent url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png) no-repeat 0 0;       
}
    .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {      
    left: auto;       
    right: 5px;       
    background-image: url(http://mybloggertricks.googlecode.com/files/next-horizontal.png);       
}
    .jcarousel-skin-tango .jcarousel-prev-horizontal:hover,      
.jcarousel-skin-tango .jcarousel-prev-horizontal:focus {       
    background-position: -32px 0;       
}
    .jcarousel-skin-tango .jcarousel-prev-horizontal:active {      
    background-position: -64px 0;       
}
    .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,      
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,       
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,       
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {       
    cursor: default;       
    background-position: -96px 0;       
}
    /**      
*  Vertical Buttons       
*/       
.jcarousel-skin-tango .jcarousel-next-vertical {       
    position: absolute;       
    bottom: 5px;       
    left: 43px;       
    width: 32px;       
    height: 32px;       
    cursor: pointer;       
    background: transparent url(http://mybloggertricks.googlecode.com/files/next-horizontal.png) no-repeat 0 0;       
}
    .jcarousel-skin-tango .jcarousel-next-vertical:hover,      
.jcarousel-skin-tango .jcarousel-next-vertical:focus {       
    background-position: 0 -32px;       
}
    .jcarousel-skin-tango .jcarousel-next-vertical:active {      
    background-position: 0 -64px;       
}
    .jcarousel-skin-tango .jcarousel-next-disabled-vertical,      
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,       
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:focus,       
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {       
    cursor: default;       
    background-position: 0 -96px;       
}
    .jcarousel-skin-tango .jcarousel-prev-vertical {      
    position: absolute;       
    top: 5px;       
    left: 43px;       
    width: 32px;       
    height: 32px;       
    cursor: pointer;       
    background: transparent url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png) no-repeat 0 0;       
}
    .jcarousel-skin-tango .jcarousel-prev-vertical:hover,      
.jcarousel-skin-tango .jcarousel-prev-vertical:focus {       
    background-position: 0 -32px;       
}
    .jcarousel-skin-tango .jcarousel-prev-vertical:active {      
    background-position: 0 -64px;       
}
    .jcarousel-skin-tango .jcarousel-prev-disabled-vertical,      
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,       
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:focus,       
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {       
    cursor: default;       
    background-position: 0 -96px;       
}
     
      </style>      
  
      <ul id="mycarousel" class="jcarousel-skin-tango">      
    
     <li><a href="#"><img src="

<li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li> 
     
    <li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li> 
         
<li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li> 
         
<li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li> 
         
<li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li>  
 
         
  </ul>

قم بتغيير IMAGE LINK برابط الصورة المباشر
# برابط موضوع الصورة

و ادا أردت اضافة عدة صور أنسخ

<li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li>

وضعه تحت الكود و قم بتغيير ما يجب تغييره


أتمنى أن تكون هده الإضافة قد عجبت الجميع
أنتظر ردودكم الحلوة

www.3arabsecurity.uni.me