معهد خبراء بلوجر - أفضل معرض صور احترافي

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

http://im13.gulfup.com/iwh11.gif

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

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

كود بلغة 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 برابط الصورة المباشر
# برابط موضوع الصورة

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

كود بلغة HTML:

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

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

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

www.3arabsecurity.uni.me