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

صفحة 1 من اصل 3 1, 2, 3  الصفحة التالية

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

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

مُساهمة من طرف زائر في الثلاثاء سبتمبر 01, 2015 9:17 am


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

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

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

صورة لسلايدر



http://i61.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

عند النقل اذكر المصدر


زائر
زائر


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

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

مُساهمة من طرف صرخة ألم في الثلاثاء سبتمبر 01, 2015 12:29 pm


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




التوقيع



صرخة ألم
عضو نشيط
عضو نشيط

الجنس : ذكر

السرطان

عدد المساهمات : 281

نقاط النشاط : 461

السٌّمعَة : 12

العمر : 25


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

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

مُساهمة من طرف Arabian Star في الثلاثاء سبتمبر 01, 2015 9:02 pm


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




التوقيع



Arabian Star
بصمة خالدة
بصمة خالدة

الجنس : ذكر

الدلو

عدد المساهمات : 13706

نقاط النشاط : 16547

السٌّمعَة : 79

بلد العضو :

العمر : 5


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

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

مُساهمة من طرف زائر في الأربعاء سبتمبر 02, 2015 9:33 pm


منور الموضوع


زائر
زائر


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

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

مُساهمة من طرف ѕαα∂ ∂єѕιgη في الخميس سبتمبر 03, 2015 7:56 am


ѕαα∂ ∂єѕιgη
بصمة خالدة
بصمة خالدة

الجنس : ذكر

الدلو

عدد المساهمات : 37067

نقاط النشاط : 41613

السٌّمعَة : 280

بلد العضو :

العمر : 17


http://WwW.t-AlTwEr.CoM

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

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

مُساهمة من طرف زائر في الجمعة سبتمبر 04, 2015 11:53 am


منور الموضوع


زائر
زائر


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

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

مُساهمة من طرف almaldin في السبت فبراير 06, 2016 12:29 pm


بارك الله فيك  وجعله الله لك في ميزان
حسناتك دمت في  حمي الرحمن





almaldin
الادارة العليا
الادارة العليا

الجنس : ذكر

الاسد

عدد المساهمات : 18419

نقاط النشاط : 20779

السٌّمعَة : 56

بلد العضو :

العمر : 36





http://www.ibda3araby.com/

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

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

مُساهمة من طرف زائر في الأحد فبراير 07, 2016 2:51 pm


منور الموضوع


زائر
زائر


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

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

مُساهمة من طرف THE ROCK في الأحد فبراير 07, 2016 5:52 pm


كوددد جميل
شكككرآ   ~




التوقيع




THE ROCK
عضو فعال
عضو فعال

الجنس : ذكر

عدد المساهمات : 668

نقاط النشاط : 988

السٌّمعَة : 24

بلد العضو :


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

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

مُساهمة من طرف Mr.LoLo في الأحد فبراير 07, 2016 6:11 pm


كوددد جميل
شكككرآ   ~




التوقيع


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

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




Mr.LoLo
عضو دهبي
عضو دهبي

الجنس : ذكر

نقاط التفاعل : 3 نقاط

الجدي

عدد المساهمات : 5435

نقاط النشاط : 6163

السٌّمعَة : 54

بلد العضو :

العمر : 99


http://bank.ahlamontada.com/

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

صفحة 1 من اصل 3 1, 2, 3  الصفحة التالية

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

سجل دخولك لتستطيع الرد بالموضوع

لابد تكون لديك عضوية لتستطيع الرد سجل الان

سجل معنا الان

انضم الينا بمنتدي الابداع العربي فعملية التسجيل سهله جدا ؟


تسجيل عضوية جديدة

سجل دخولك

لديك عضوية هنا ؟ سجل دخولك من هنا .


سجل دخولك

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى