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

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


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

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

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


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

تذكير بمساهمة فاتح الموضوع :

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

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

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

صورة لسلايدر

كود سلايدر أنيق وسهل التنسيق - صفحة 2 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

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

كاتب الموضوعرسالة
ahmedkhalifa
عضو فعال 



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

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

جميل ولكن انت الاجمل بمواضيعك الحصريه
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://totwerkm.ibda3.info/
زائر
زائر



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

منور الموضوع
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Mr.TnT
عضو محترف 

Mr.TnT

ذكر
الجدي
عدد المساهمات : 1691
نقاط النشاط : 1794
السٌّمعَة : 9
بلد العضو : كود سلايدر أنيق وسهل التنسيق - صفحة 2 Lebano10
العمر : 23

كود سلايدر أنيق وسهل التنسيق - صفحة 2 Empty
مُساهمةموضوع: رد: كود سلايدر أنيق وسهل التنسيق   كود سلايدر أنيق وسهل التنسيق - صفحة 2 Emptyالسبت مارس 05, 2016 3:40 am

شكرا


كود سلايدر أنيق وسهل التنسيق - صفحة 2 2_ouuu10
                                
                      كود سلايدر أنيق وسهل التنسيق - صفحة 2 Uia_oa11
                                 كود سلايدر أنيق وسهل التنسيق - صفحة 2 Uau10
كود سلايدر أنيق وسهل التنسيق - صفحة 2 Uia_oo10
كود سلايدر أنيق وسهل التنسيق - صفحة 2 Uia_oo12
كود سلايدر أنيق وسهل التنسيق - صفحة 2 Dua_ui10
كود سلايدر أنيق وسهل التنسيق - صفحة 2 Uia_od10
الرجوع الى أعلى الصفحة اذهب الى الأسفل
زائر
زائر
avatar


كود سلايدر أنيق وسهل التنسيق - صفحة 2 Empty
مُساهمةموضوع: رد: كود سلايدر أنيق وسهل التنسيق   كود سلايدر أنيق وسهل التنسيق - صفحة 2 Emptyالثلاثاء مايو 17, 2016 8:48 pm

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

تحياتــي
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Basil Abdallah
سوبر الإبداع 

Basil Abdallah

ذكر
السمك
عدد المساهمات : 11107
نقاط النشاط : 11943
السٌّمعَة : 70
بلد العضو : كود سلايدر أنيق وسهل التنسيق - صفحة 2 Jordan10
العمر : 26

كود سلايدر أنيق وسهل التنسيق - صفحة 2 Empty
مُساهمةموضوع: رد: كود سلايدر أنيق وسهل التنسيق   كود سلايدر أنيق وسهل التنسيق - صفحة 2 Emptyالأربعاء يوليو 13, 2016 12:51 am

شكر جزيلا للطرح القيم
ننتظر المزيد من ابداع مواضيعك الرائعة
تحياتي وتقديري لك
@CLARO@
الرجوع الى أعلى الصفحة اذهب الى الأسفل
زائر
زائر
avatar


كود سلايدر أنيق وسهل التنسيق - صفحة 2 Empty
مُساهمةموضوع: رد: كود سلايدر أنيق وسهل التنسيق   كود سلايدر أنيق وسهل التنسيق - صفحة 2 Emptyالسبت أغسطس 27, 2016 6:59 pm

كود جميل شكرا لك

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


كود سلايدر أنيق وسهل التنسيق - صفحة 2 Empty
مُساهمةموضوع: رد: كود سلايدر أنيق وسهل التنسيق   كود سلايدر أنيق وسهل التنسيق - صفحة 2 Emptyالسبت أغسطس 27, 2016 11:28 pm

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


كود سلايدر أنيق وسهل التنسيق - صفحة 2 Empty
مُساهمةموضوع: رد: كود سلايدر أنيق وسهل التنسيق   كود سلايدر أنيق وسهل التنسيق - صفحة 2 Emptyالخميس سبتمبر 15, 2016 12:19 am

شكرااا

كود رائع
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Picasso-Des
سوبر الإبداع 

Picasso-Des

ذكر
الجدي
عدد المساهمات : 10775
نقاط النشاط : 11119
السٌّمعَة : 136
بلد العضو : كود سلايدر أنيق وسهل التنسيق - صفحة 2 Ioao10
العمر : 37

كود سلايدر أنيق وسهل التنسيق - صفحة 2 Empty
مُساهمةموضوع: رد: كود سلايدر أنيق وسهل التنسيق   كود سلايدر أنيق وسهل التنسيق - صفحة 2 Emptyالسبت يونيو 16, 2018 11:29 pm

يعطيكم العافية على الطرح كود سلايدر أنيق وسهل التنسيق - صفحة 2 837876428
كل الاحترام كود سلايدر أنيق وسهل التنسيق - صفحة 2 433646733
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://medialive.pro
مصطفى ستيتان
عضو محترف 

مصطفى ستيتان

ذكر
عدد المساهمات : 1130
نقاط النشاط : 1203
السٌّمعَة : 11
بلد العضو : كود سلايدر أنيق وسهل التنسيق - صفحة 2 Ioao10

كود سلايدر أنيق وسهل التنسيق - صفحة 2 Empty
مُساهمةموضوع: رد: كود سلايدر أنيق وسهل التنسيق   كود سلايدر أنيق وسهل التنسيق - صفحة 2 Emptyالإثنين يوليو 23, 2018 9:31 am

   جزاكم الله خيراً  
 وردة حمراء وردة حمراء وردة حمراء وردة حمراء 


سبحان الله والحمدلله ولا إله إلا الله 
 
كود سلايدر أنيق وسهل التنسيق - صفحة 2 Do
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.elmanal.com
 
كود سلايدر أنيق وسهل التنسيق
الرجوع الى أعلى الصفحة 
صفحة 2 من اصل 2انتقل الى الصفحة : الصفحة السابقة  1, 2

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