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

صفحة 2 من اصل 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

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


زائر
زائر


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


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

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


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


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

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


http://bank.ahlamontada.com/

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

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

مُساهمة من طرف زائر في الثلاثاء فبراير 09, 2016 2:24 pm


منور الموضوع


زائر
زائر


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

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

مُساهمة من طرف almaldin في الخميس فبراير 11, 2016 8:51 am


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

الجنس : ذكر

الاسد

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

نقاط النشاط : 20744

السٌّمعَة : 56

بلد العضو :

العمر : 36





http://www.ibda3araby.com/

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

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

مُساهمة من طرف زائر في الأحد فبراير 14, 2016 6:48 pm


منور الموضوع


زائر
زائر


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

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

مُساهمة من طرف ahmedkhalifa في الأحد فبراير 14, 2016 8:53 pm


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




التوقيع


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










painting painting painting painting painting جارى جارى جارى gfifeee

ahmedkhalifa
عضو نشيط
عضو نشيط

الجنس : ذكر

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

نقاط النشاط : 257

السٌّمعَة : 13

بلد العضو :


http://totwerkm.ibda3.info/

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

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

مُساهمة من طرف زائر في الأحد فبراير 14, 2016 9:05 pm


منور الموضوع


زائر
زائر


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

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

مُساهمة من طرف Mr.TnT في السبت مارس 05, 2016 2:40 am


شكرا




التوقيع



                                
                     
                                




Mr.TnT
عضو خبير
عضو خبير

الجنس : ذكر

الجدي

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

نقاط النشاط : 1526

السٌّمعَة : 8

بلد العضو :

العمر : 18


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

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

مُساهمة من طرف زائر في الثلاثاء مايو 17, 2016 7:48 pm


السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك

تحياتــي


زائر
زائر


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

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

مُساهمة من طرف Basil Abdallah في الثلاثاء يوليو 12, 2016 11:51 pm


شكر جزيلا للطرح القيم
ننتظر المزيد من ابداع مواضيعك الرائعة
تحياتي وتقديري لك
@CLARO@




التوقيع


من الحقائق الثابتة أنك تستطيع أن تنجح بسرعة وبأفضل طريقة، عندما تساعد الآخرين على النجاح
   

Basil Abdallah
اشراف عام الدردشة
اشراف عام الدردشة

الجنس : ذكر

السمك

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

نقاط النشاط : 11297

السٌّمعَة : 69

بلد العضو :

العمر : 21






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

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

مُساهمة من طرف 1M ThE BesT في السبت أغسطس 27, 2016 5:59 pm


1M ThE BesT
مؤسس الابداع العربي

مؤسس الابداع العربي

الجنس : ذكر

الدلو

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

نقاط النشاط : 27783

السٌّمعَة : 304

بلد العضو :

العمر : 20


http://jalil.assassino

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

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

مُساهمة من طرف زائر في السبت أغسطس 27, 2016 10:28 pm


منور الموضوع


زائر
زائر


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

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

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

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

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

سجل معنا الان

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


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

سجل دخولك

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


سجل دخولك

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