أفضل معرض صور احترافي

10-15-2012, 12:19 PM

Nassro

مدون نشيط

تاريخ التسجيل: Jul 2012

الدولة: Algeria,Adrar

المشاركات: 178

أفضل معرض صور احترافي

أنا : Nassro

سجل معنا لتتمتع بهذه الخاصية

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

و لمعاينة الإضافة
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

__________________

من مواضيع Nassro

12-17-2012, 07:45 PM	#2
خالد الاحمري مدون مميز تاريخ التسجيل: May 2012 المشاركات: 320	رد: أفضل معرض صور احترافي أنا : خالد الاحمري سجل معنا لتتمتع بهذه الخاصية لم تعمل معي بالشكل المطلوب ! حيث تظهر كل صورة في سطر لوحدها # أعتقد المشكلة في اكواد الجافا , ربما لم تعد تعمل ويجب تجديدها ,. تقبل مروري وشكراً لك . Nassro معجب بهذا __________________ أضف مدونتك في دليل تثمين للمدونات http://tathmen.blogspot.com/ .: أشهد أن لا إله الا الله وأشهد أن محمداً عبده ورسوله :. من مواضيع خالد الاحمري بالنسبة للاعلانات حسوب وبلوجر, أجتماع اعضاء المعهد لدعم المعهد عن طريق مدوناتهم إضافة[التصويت+المشاهدات ] للتدوينة بشكل جديد و انيق الى بلوجر حاسة الشم من google [تستطيع شم الروائح على جهازك] شرح : كيفية تفعيل خاصية ردود الافعال المقدمة من بلوجر للمدونات

12-17-2012, 07:47 PM	#3
خالد الاحمري مدون مميز تاريخ التسجيل: May 2012 المشاركات: 320	رد: أفضل معرض صور احترافي أنا : خالد الاحمري سجل معنا لتتمتع بهذه الخاصية لم تعمل معي بالشكل المطلوب ! حيث تظهر كل صورة في سطر لوحدها # أعتقد المشكلة في اكواد الجافا , ربما لم تعد تعمل ويجب تجديدها ,. تقبل مروري وشكراً لك . __________________ أضف مدونتك في دليل تثمين للمدونات http://tathmen.blogspot.com/ .: أشهد أن لا إله الا الله وأشهد أن محمداً عبده ورسوله :. من مواضيع خالد الاحمري موقع لألتقاط صورة لموقعك او مدونتك شرح العلامات المستخدمة في اكواد المدونة على منصة بلوجر موقع فتحات العرب -شرح التسجيل بة واشهار مدونتك مجانا . أفضل المواقع [العربية] لقوالب بلوجر قالب WPZine معرب للمدونات الشخصية والاخبارية

12-20-2012, 09:13 PM	#4
youba8000 مدون جديد تاريخ التسجيل: Oct 2012 المشاركات: 21	رد: أفضل معرض صور احترافي أنا : youba8000 سجل معنا لتتمتع بهذه الخاصية اضافة رائعة ...شكرا على الموضوع http://www.histgeo-college.blogspot.com/ __________________ مدونتي المتواضعة http://www.histgeo-college.blogspot.com/

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

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
قالب احترافي لعرض الأفلام	مصري وافتخر	قوالب بلوجر عربية ومعربة	2	08-18-2013 10:00 AM
قالب لعرض الفيديوهات	saheralialy	قوالب بلوجر أجنبية	0	01-22-2013 03:11 PM
قالب لعرض الافلام	saheralialy	قوالب بلوجر أجنبية	0	01-22-2013 03:01 PM
طلب قالب لعرض البرامج	كوبا كبانا	طلبات قوالب بلوجر	0	10-12-2012 04:50 PM
seo أفضل لبلوجر	tao101	دروس بلوجر	9	09-08-2012 12:16 AM

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)

إضافات وأدوات بلوجر