منتدى الابداع العربي

للإبداع لمسات ! ... ولمسـات الإبــداع إختصاصـنا !
 
الرئيسيةالرئيسية  المنشوراتالمنشورات  البوابةالبوابة  التسجيلالتسجيل  دخولدخول  


كود سلايدر أنيق وسهل التنسيق
 

 كود سلايدر أنيق وسهل التنسيق

اذهب الى الأسفل 
انتقل الى الصفحة : 1, 2  الصفحة التالية
كاتب الموضوعرسالة
زائر
زائر
avatar


كود سلايدر أنيق وسهل التنسيق Empty
مُساهمةموضوع: كود سلايدر أنيق وسهل التنسيق   كود سلايدر أنيق وسهل التنسيق Emptyالثلاثاء سبتمبر 01, 2015 10:17 am

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

اولا لنتعرف عن معنى سلايدر شو

السلايد شو أو السلايدر Slider هي إضافة تمكنك من عرض صور بشكل متعاقب وأنيق وطبعا يمكن إستخدمها في عرض مواضيعك المميزة أو أى شئ ترغب بعرضه يكون واضح ولافت للأنظار

صورة لسلايدر

كود سلايدر أنيق وسهل التنسيق 2q37s52

https://2img.net/h/oi61.tinypic.com/2q37s52.gif

الكود متميز وذو شاشة سهل التحكم له مؤثر بالتنقل للموضوع الثاني

الان للكود تفضلوا

الكود:
<style type="text/css">


 #mcis {
  display: none;
 }

 #sliderFrame {
  position: relative;
  width: 600px;
  margin: 0 auto;
 border:5px solid #000;
 border-bottom:25px solid #000;
 background:#fff;
 border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;
 margin-bottom:5px;
 }
 #slider img {
  position: absolute;
  border: none;
 display: none;
 }

 #slider {
  width: 600px;
  height: 218px;
  background: #fff url(https://lh4.googleusercontent.com/-k6J7L0AmqnE/UV7FswW-qsI/AAAAAAAABC0/iwjr-yjs8Tg/s39/cnmuslidlod.gif) no-repeat 50% 50%;
  position: relative;
  margin: 0 auto;
  box-shadow: 0px 1px 5px #999999;
 }

 #slider a.imgLink {
  z-index: 2;
  display: none;
  position: absolute;
  top: 0px;
  left: 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;
  left: 0px;
  bottom: 0px;
  z-index: 3;
  overflow: hidden;
  font-size: 0;
 }

 div.mc-caption-bg {
  background-color: black;
 }

 div.mc-caption {
  font: bold 14px/20px Arial;
  color: #EEE;
  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:225px;
 background: none;
  position: relative;
  z-index: 5;
  cursor: pointer;
 }

 div.navBulletsWrapper div {
  width: 11px;
  height: 11px;
  background:transparent url(https://lh5.googleusercontent.com/-7NRCeJsVpFQ/UV7Fs6xP8RI/AAAAAAAABCw/REtO-oLoX7Q/s22/cnmu-sliddot.png) no-repeat 0 0;
  float: left;
  overflow: hidden;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 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 src="https://cnmu.googlecode.com/svn/trunk/cnmuslid.js" type="text/javascript"></script>

 <div id="sliderFrame">
                 <div id="slider">
<a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a>
 <a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a>
 </div></div>

شرح الكود

بالنسبة للرقم 600 هذا هو عرض السلايدر وهو متكرر لذا إن أردت ان تعدل عرض السلايد يجب ان تغير الرقم في كل المرات المتكرر فيها
الرقم 218 هو إرتفاع السلايد يمكنك تعديله لكن بنفس القدر الذي ستعدله به يجب ان تعدل به هذا الرقم أيضا 225 فإن قمت بالزيادة مثلا بنسبة 20 يجب أن تزيد الآخر 20 وإن قمت بالإنقاص نفس الشئ تنقص الآخر بنفس النسبة
أما هذا الكود #000 وهو متكرر مرتين هذا لون السلايد قم بتعديله باللون الذي يعجبك أكواد الألوان
أما هذا الكود <a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a>
هو كود الصور او الموضوعات قم بتكراره بحسب العدد الذي ستضيفه
ملاحظة حجم الصور يجب ان يكون بحجم العرض والإرتفاع الذي ستحدده
 فمثلا في الكود العرض محدد بـ 600 والإرتفاع 218
إذا الصورة ستكون بحجم 600x218

طريقة التركيب

يوضع الكود فى اى مكان يقبل HTML

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

صرخة ألم

ذكر
السرطان
عدد المساهمات : 281
نقاط النشاط : 461
السٌّمعَة : 12
العمر : 29

كود سلايدر أنيق وسهل التنسيق Empty
مُساهمةموضوع: رد: كود سلايدر أنيق وسهل التنسيق   كود سلايدر أنيق وسهل التنسيق Emptyالثلاثاء سبتمبر 01, 2015 1:29 pm

طرحت فأبدعت
دمت ودام عطائك
ودائما بأنتظار جديدك الشيق
لك خالص تقديري واحترامي وردة حمراء


كود سلايدر أنيق وسهل التنسيق Aouk9w
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Arabian Star
سوبر الإبداع 

Arabian Star

ذكر
الحمل
عدد المساهمات : 14443
نقاط النشاط : 17328
السٌّمعَة : 87
بلد العضو : كود سلايدر أنيق وسهل التنسيق Egypt10
العمر : 22

كود سلايدر أنيق وسهل التنسيق Empty
مُساهمةموضوع: رد: كود سلايدر أنيق وسهل التنسيق   كود سلايدر أنيق وسهل التنسيق Emptyالثلاثاء سبتمبر 01, 2015 10:02 pm

شكرا لك
واصلى تميزك


كود سلايدر أنيق وسهل التنسيق Bntpal_1424432722_253
الرجوع الى أعلى الصفحة اذهب الى الأسفل
زائر
زائر
avatar


كود سلايدر أنيق وسهل التنسيق Empty
مُساهمةموضوع: رد: كود سلايدر أنيق وسهل التنسيق   كود سلايدر أنيق وسهل التنسيق Emptyالأربعاء سبتمبر 02, 2015 10:33 pm

منور الموضوع
الرجوع الى أعلى الصفحة اذهب الى الأسفل
ѕαα∂ ∂єѕιgη
سوبر الإبداع 

ѕαα∂ ∂єѕιgη

ذكر
الدلو
عدد المساهمات : 43577
نقاط النشاط : 48233
السٌّمعَة : 302
بلد العضو : كود سلايدر أنيق وسهل التنسيق Saudi-10
العمر : 22

كود سلايدر أنيق وسهل التنسيق Empty
مُساهمةموضوع: رد: كود سلايدر أنيق وسهل التنسيق   كود سلايدر أنيق وسهل التنسيق Emptyالخميس سبتمبر 03, 2015 8:56 am

جججميل جدآآ آلككود , شككرآ وردة حمراء.
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://t-altwer.yoo7.com/
زائر
زائر
avatar


كود سلايدر أنيق وسهل التنسيق Empty
مُساهمةموضوع: رد: كود سلايدر أنيق وسهل التنسيق   كود سلايدر أنيق وسهل التنسيق Emptyالجمعة سبتمبر 04, 2015 12:53 pm

منور الموضوع
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Abshahad
سوبر الإبداع 

Abshahad

ذكر
الاسد
عدد المساهمات : 23607
نقاط النشاط : 27156
السٌّمعَة : 90
بلد العضو : كود سلايدر أنيق وسهل التنسيق Sudan10
العمر : 40

كود سلايدر أنيق وسهل التنسيق Empty
مُساهمةموضوع: رد: كود سلايدر أنيق وسهل التنسيق   كود سلايدر أنيق وسهل التنسيق Emptyالسبت فبراير 06, 2016 1:29 pm

بارك الله فيك  وجعله الله لك في ميزان
حسناتك دمت في  حمي الرحمن
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.ibda3araby.com/
زائر
زائر
avatar


كود سلايدر أنيق وسهل التنسيق Empty
مُساهمةموضوع: رد: كود سلايدر أنيق وسهل التنسيق   كود سلايدر أنيق وسهل التنسيق Emptyالأحد فبراير 07, 2016 3:51 pm

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

THE ROCK

ذكر
عدد المساهمات : 668
نقاط النشاط : 988
السٌّمعَة : 24
بلد العضو : كود سلايدر أنيق وسهل التنسيق Egypt10

كود سلايدر أنيق وسهل التنسيق Empty
مُساهمةموضوع: رد: كود سلايدر أنيق وسهل التنسيق   كود سلايدر أنيق وسهل التنسيق Emptyالأحد فبراير 07, 2016 6:52 pm

كوددد جميل
شكككرآ كود سلايدر أنيق وسهل التنسيق 1607768772 كود سلايدر أنيق وسهل التنسيق 2070821343 ~



كود سلايدر أنيق وسهل التنسيق 1011_md_13129827261
كود سلايدر أنيق وسهل التنسيق 1411_m10
كود سلايدر أنيق وسهل التنسيق Uia_oo10
كود سلايدر أنيق وسهل التنسيق Uia_oo12
كود سلايدر أنيق وسهل التنسيق Dua_ui10
كود سلايدر أنيق وسهل التنسيق Uia_od10
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Mr. Loay
سوبر الإبداع 

Mr. Loay

ذكر
الجوزاء
عدد المساهمات : 6242
نقاط النشاط : 7090
السٌّمعَة : 65
بلد العضو : كود سلايدر أنيق وسهل التنسيق Saudi-10
العمر : 17

كود سلايدر أنيق وسهل التنسيق Empty
مُساهمةموضوع: رد: كود سلايدر أنيق وسهل التنسيق   كود سلايدر أنيق وسهل التنسيق Emptyالأحد فبراير 07, 2016 7:11 pm

كوددد جميل
شكككرآ كود سلايدر أنيق وسهل التنسيق 1607768772 كود سلايدر أنيق وسهل التنسيق 2070821343 ~


سبحان الله وبحمده ..
          سبحان الله العظيم ...

اللهم صلِّ وسلم على محمد.. وعلى آله وصحبه أجمعين


كود سلايدر أنيق وسهل التنسيق Uia_io10
الرجوع الى أعلى الصفحة اذهب الى الأسفل
زائر
زائر
avatar


كود سلايدر أنيق وسهل التنسيق Empty
مُساهمةموضوع: رد: كود سلايدر أنيق وسهل التنسيق   كود سلايدر أنيق وسهل التنسيق Emptyالثلاثاء فبراير 09, 2016 3:24 pm

منور الموضوع
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Abshahad
سوبر الإبداع 

Abshahad

ذكر
الاسد
عدد المساهمات : 23607
نقاط النشاط : 27156
السٌّمعَة : 90
بلد العضو : كود سلايدر أنيق وسهل التنسيق Sudan10
العمر : 40

كود سلايدر أنيق وسهل التنسيق Empty
مُساهمةموضوع: رد: كود سلايدر أنيق وسهل التنسيق   كود سلايدر أنيق وسهل التنسيق Emptyالخميس فبراير 11, 2016 9:51 am

جزاك الله خير دمتي في حمي الرحمن
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.ibda3araby.com/
زائر
زائر
avatar


كود سلايدر أنيق وسهل التنسيق Empty
مُساهمةموضوع: رد: كود سلايدر أنيق وسهل التنسيق   كود سلايدر أنيق وسهل التنسيق Emptyالأحد فبراير 14, 2016 7:48 pm

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

ahmedkhalifa

ذكر
عدد المساهمات : 137
نقاط النشاط : 262
السٌّمعَة : 13
بلد العضو : كود سلايدر أنيق وسهل التنسيق Egypt10

كود سلايدر أنيق وسهل التنسيق Empty
مُساهمةموضوع: رد: كود سلايدر أنيق وسهل التنسيق   كود سلايدر أنيق وسهل التنسيق Emptyالأحد فبراير 14, 2016 9:53 pm

جميل ولكن انت الاجمل بمواضيعك الحصريه


وردة حمراء  وردة حمراء ahmedkhalifa وردة حمراء  وردة حمراء

كود سلايدر أنيق وسهل التنسيق 2l93alv








painting painting painting painting painting جارى جارى جارى gfifeee
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://totwerkm.ibda3.info/
زائر
زائر
avatar


كود سلايدر أنيق وسهل التنسيق Empty
مُساهمةموضوع: رد: كود سلايدر أنيق وسهل التنسيق   كود سلايدر أنيق وسهل التنسيق Emptyالأحد فبراير 14, 2016 10:05 pm

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

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