كود سلايدر أنيق وسهل التنسيق | | |
| كود سلايدر أنيق وسهل التنسيق | |
|
|
كاتب الموضوع | رسالة |
---|
زائر زائر
| موضوع: كود سلايدر أنيق وسهل التنسيق الثلاثاء سبتمبر 01, 2015 10:17 am | |
| السلام عليكم ورحمة الله وبركاته اولا لنتعرف عن معنى سلايدر شو السلايد شو أو السلايدر Slider هي إضافة تمكنك من عرض صور بشكل متعاقب وأنيق وطبعا يمكن إستخدمها في عرض مواضيعك المميزة أو أى شئ ترغب بعرضه يكون واضح ولافت للأنظار صورة لسلايدر 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 العمر : 33
| موضوع: رد: كود سلايدر أنيق وسهل التنسيق الثلاثاء سبتمبر 01, 2015 1:29 pm | |
| طرحت فأبدعت دمت ودام عطائك ودائما بأنتظار جديدك الشيق لك خالص تقديري واحترامي |
|
| |
Arabian Star
سوبر الإبداع
عدد المساهمات : 14443 نقاط النشاط : 17328 السٌّمعَة : 87 بلد العضو : العمر : 25
| موضوع: رد: كود سلايدر أنيق وسهل التنسيق الثلاثاء سبتمبر 01, 2015 10:02 pm | |
| |
|
| |
زائر زائر
| موضوع: رد: كود سلايدر أنيق وسهل التنسيق الأربعاء سبتمبر 02, 2015 10:33 pm | |
| |
|
| |
ѕαα∂ ∂єѕιgη
سوبر الإبداع
عدد المساهمات : 43578 نقاط النشاط : 48235 السٌّمعَة : 302 بلد العضو : العمر : 25
| موضوع: رد: كود سلايدر أنيق وسهل التنسيق الخميس سبتمبر 03, 2015 8:56 am | |
| |
|
| |
زائر زائر
| موضوع: رد: كود سلايدر أنيق وسهل التنسيق الجمعة سبتمبر 04, 2015 12:53 pm | |
| |
|
| |
Abshahad
سوبر الإبداع
عدد المساهمات : 23607 نقاط النشاط : 27156 السٌّمعَة : 90 بلد العضو : العمر : 44
| |
| |
زائر زائر
| موضوع: رد: كود سلايدر أنيق وسهل التنسيق الأحد فبراير 07, 2016 3:51 pm | |
| |
|
| |
THE ROCK
عضو خبير
عدد المساهمات : 668 نقاط النشاط : 988 السٌّمعَة : 24 بلد العضو :
| |
| |
Mr. Loay
سوبر الإبداع
عدد المساهمات : 6242 نقاط النشاط : 7090 السٌّمعَة : 65 بلد العضو : العمر : 21
| |
| |
زائر زائر
| موضوع: رد: كود سلايدر أنيق وسهل التنسيق الثلاثاء فبراير 09, 2016 3:24 pm | |
| |
|
| |
Abshahad
سوبر الإبداع
عدد المساهمات : 23607 نقاط النشاط : 27156 السٌّمعَة : 90 بلد العضو : العمر : 44
| |
| |
زائر زائر
| موضوع: رد: كود سلايدر أنيق وسهل التنسيق الأحد فبراير 14, 2016 7:48 pm | |
| |
|
| |
ahmedkhalifa
عضو فعال
عدد المساهمات : 138 نقاط النشاط : 263 السٌّمعَة : 13 بلد العضو :
| موضوع: رد: كود سلايدر أنيق وسهل التنسيق الأحد فبراير 14, 2016 9:53 pm | |
| جميل ولكن انت الاجمل بمواضيعك الحصريه |
|
| |
زائر زائر
| موضوع: رد: كود سلايدر أنيق وسهل التنسيق الأحد فبراير 14, 2016 10:05 pm | |
| |
|
| |
| كود سلايدر أنيق وسهل التنسيق | |
|