مركز الإعتمادات العربى
مرحبا بك في مركز الإعتمادات العربي

تشرفنا زيارتك لنا وندعوك الى التسجيل وانضمام لنا والتمتع بخدماتنا المتميزة

مركز الإعتمادات العربى

إعتمادات أحلى منتدى , خدمات الإعتمادات و المعاملات المالية
 
الرئيسيةالرئيسية  البوابةالبوابة  اليوميةاليومية  س .و .جس .و .ج  بحـثبحـث  المجموعاتالمجموعات  التسجيلالتسجيل  دخولدخول  

شاطر | 
 

  كود سلايد شو

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
Arabian Star
عضو سوبر
عضو سوبر



ذكر
عدد المساهمات : 8928
التقييم : 1
العمر : 17
احترام قوانين المنتدى :

مُساهمةموضوع: كود سلايد شو    الأحد 23 أغسطس - 15:26

السلام عليكم

اليوم اعطيكم كود جميل لسلايد شو

وان شاء الله يعجبكمم

الكود





الرمز:
     <style type="text/css">     #mcis {    display: none;    }     #sliderFrame {    position: relative;    width: 468px;    margin: 0 auto;            border:3px solid #E1E0E2;    }     #ribbon {    width: 111px;    height: 111px;    position: absolute;    top: -4px;    right: -4px;    }     #slider {    width: 468px;    height: 260px;    background: #fff url(https://lh3.googleusercontent.com/-jr3u7sHVNzc/T_9iyf5egvI/AAAAAAAAC9c/jwanynfbt7Y/h120/mdonti-n.blogspot.com-loading.gif) no-repeat 50% 50%;    position: relative;    margin: 0 auto;    box-shadow: 0px 1px 5px 010007;    }     #slider img {    position: absolut;    border: none;    display: none;    }     #slider a.imgLink {    z-index: 2;    display: none;    position: absolute;    top: 0px;    right: 0px;    border: 0;    padding: 0;    margin: 0;    width: 100%;    height: 100%;    }     div.mc-caption-bg, div.mc-caption-bg2 {    position: absolute;    width: 100%;    height: auto;    padding: 0;    right: 0px;    bottom: 0px;    z-index: 3;    overflow: hidden;    font-size: 0;    }      div.mc-caption-bg {    background-color: #0066CC;    }     div.mc-caption {    font: bold 25px/21px traditional arabic ;    color:  #0000;    z-index: 4;    padding: 10px 0;    text-align: center;    }     div.mc-caption a {    color: #FB0;    }     div.mc-caption a:hover {    color: #DA0;    }     div.navBulletsWrapper {    top: 250px;    right: 190px;    width: 150px;    background: none;    padding-right: 20px;    position: relative;    z-index: 5;    cursor: pointer;    }     div.navBulletsWrapper div {    width: 11px;    height: 11px;    background: transparent url(http://i18.servimg.com/u/f18/15/90/68/93/mdonti10.png) no-repeat 0 0;    float: right;    overflow: hidden;    vertical-align: middle;    cursor: pointer;    margin-left: 11px;    _position: relative;    }     div.navBulletsWrapper div.active {    background-position: 0 -11px;    }     #slider {    transform: translate3d(0,0,0);    -ms-transform: translate3d(0,0,0);    -moz-transform: translate3d(0,0,0);    -o-transform: translate3d(0,0,0);    -webkit-transform: translate3d(0,0,0);    }    </style>      <script type="text/javascript" src="http://my-mdonti.googlecode.com/files/js-image-slider.js"></script>      <div id="sliderFrame">              <div id="ribbon">   </div>                      <div id="slider">            <img alt="ttttt" src="pppp" />      <img alt="ttttt" src="ppppp" />      <img alt="ttttt" src="ppppp" />      <img alt="ttttt" src="ppppp" />    <img alt=" ttttt" src="ppppp" />                       </div></div>

قبل حفظ الأداة نقوم باضافة الصور التي نود ظهورها على السلايد شو كما يلي :


  • نضع مكان الرمز ppppp رابط الصورة (الرابط الإلكتروني لصورة الموضوع)

  • نضع مكان الرمز ttttt عنوان الموضوع (أو نختار عنوان أخر للموضوع )




1- اذا أردنا زيادة عدد المواضيع المعروضة نقوم بزيادة عدد الأكواد التالية

الكود: ---------تضليل المحتوى
الرمز:
    <img src="pppp" alt="ttttt"/></a>


اي نقوم بنسخها ولصقها الواحدة تلو الأخرى حسب عدد المواضيع التي نريد عرضها على السلايد شو (Slideshow ).

2- التحكم في ارتفاع وعرض الأداة (الإطار الخارجي) نقوم بالبحث عن الكود التالي :

لتغيير عرض الأداة width 
لتغيير ارتفاع الأداة height


#slider {
 width: 468px;
 height: 260px;

3- تغيير لون السلايدشو الصغيرة (التي يتم بها عرض عنوان الموضوع ) نبحث عن الكود التالي
 background-color: #0066CC;

ونقوم بتغيير الرمز 0066cc (للحصول على الألوان بصيغة html انتقل للصفحة التالية )

4- تغيير حجم ولون خط عنوان الموضوع (عناوين  المواضيع المعروضة على السلايد شو) ابحث عن الكود التالي :



الرمز:
 font: bold 25px/21px traditional arabic ;


الرمز traditional arabic لإستبدال نوع الخط 
الرمز   25px حجم الخط .
هذه هي اهم التعديلات التي نحتاج اليها لتنسيق الأداة بما يتناسب مع الشكل والتصميم
ملاحظة : الكود ليس من تصميمى ولكن تم التعديل عليه بما يناسب احلى منتدى

طريقة وضع الكود : يوضع الكودفى اى مكان يقبل HTML
انتهى
Arabian Star

الرجوع الى أعلى الصفحة اذهب الى الأسفل
JAR7
عضو سوبر
عضو سوبر



انثى
عدد المساهمات : 13599
التقييم : 39
احترام قوانين المنتدى :

مُساهمةموضوع: رد: كود سلايد شو    الأحد 23 أغسطس - 16:29

روووووعه الكود تم تقيمك

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



ذكر
عدد المساهمات : 402
التقييم : 0
العمر : 23
احترام قوانين المنتدى :

مُساهمةموضوع: رد: كود سلايد شو    الإثنين 4 يناير - 20:42

بِآرَﻛَ آلَلَﮩ فْيْﻛَ

جَزَآﻛَ آلَلَﮩ آلَفْ خِيْرَ

طٌـــــــــبِــــــتْ

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

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
مركز الإعتمادات العربى :: دعم وتطوير المواقع و المنتديات ::   :: قسم الاكواد و التقنيات-