|
|
|
|
أدوات الموضوع | انواع عرض الموضوع |
01-31-2013, 05:07 PM | #1 |
مدون نشيط
تاريخ التسجيل: Jul 2012
المشاركات: 159
|
إضافة سليدر (Slider) بتقنية JavaScript لمدونات بلوجر
السلام عليكم ورحمة الله تعالى وبركاته اليوم الشرح سيكون حول كيفية اضافة Slider الى مدونات بلوجر ، هذه الإضافة تمكنك من عرض صور على مدونتك وهي بتقنية الجافاسكربت JavaScript ، الإضافة جميلة جدا والكود جد سهل . لإضافة الـ Slider الى مدونتك اتبع الخطوات التـاليـة :
معاينة كود بلغة HTML:
<style type="text/css"> /* JavaScript Image Slider By http://www.4we-eb.blogspot.com/ */ #mcis { display: none; } #sliderFrame { position: relative; width: 500px; margin: 0 auto; border:5px solid #000; } #ribbon { width: 111px; height: 111px; position: absolute; top: -4px; left: -4px; background: url(http://4.bp.blogspot.com/-2AdmLJaub9w/T_2NGQHAKfI/AAAAAAAACjk/ZHsOsqRyBEk/s1600/helperblogger.com-ribbon.png) no-repeat; z-index: 7; } #slider { width: 500px; height: 218px; background: #fff url(http://3.bp.blogspot.com/-5y0QxGG9wcM/T_2NFVukvgI/AAAAAAAACjg/lgnDtn_n-7w/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%; position: relative; margin: 0 auto; box-shadow: 0px 1px 5px #999999; } #slider img { position: absolute; border: none; display: none; } #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: 250px; left: 190px; width: 150px; background: none; padding-left: 20px; position: relative; z-index: 5; cursor: pointer; } div.navBulletsWrapper div { width: 11px; height: 11px; background: transparent url(http://3.bp.blogspot.com/-G-iekYUr83U/T_2NEluoaDI/AAAAAAAACjY/TR1wfeuaO_k/s1600/helperblogger.com-bullet.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="http://code.helperblogger.com/js-image-slider.js" type="text/javascript"></script> <div id="sliderFrame"> <div id="ribbon"> </div> <div id="slider"> <a href="الرابط"><img src="رابط الصورة" alt="وصف الصورة"/></a> <a href="الرابط"><img src="رابط الصورة" alt="وصف الصورة"/></a> <a href="الرابط"><img src="رابط الصورة" alt="وصف الصورة"/></a> <a href="الرابط"><img src="رابط الصورة" alt="وصف الصورة"/></a> <a href="الرابط"><img src="رابط الصورة" alt="وصف الصورة"/></a> </div> </div> شرح التغييرات الواجبة تغييها :
ملاحظة : يمكنك تغيير المقاسات عن طريق تغيير ما يــلــي :
__________________
دروس بلوجر ,قوالب , اضافات http://TadwiinPro.blogspot.com/ التعديل الأخير تم بواسطة ilyass kéng ; 01-31-2013 الساعة 05:10 PM |
مواقع النشر (المفضلة) |
الكلمات الدلالية (Tags) |
بلوجر, جافاسكربت, سليدر |
الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
إضافة تأثيرات حركية على الصور لمدونات بلوجر | Dr Help | إضافات وأدوات بلوجر | 1 | 03-30-2013 06:31 PM |
نافذة منبثقة بتقنية jQuery بها صندوق اعجابات الفيسبوك لمدونات بلوجر | ilyass kéng | إضافات وأدوات بلوجر | 2 | 02-28-2013 08:52 PM |
اضافة اقرء المزيد بتقنية css3 لمدونات بلوجر | بلال حمدان | إضافات وأدوات بلوجر | 0 | 01-23-2013 02:29 PM |
إضافة المقاطع الصوتية لمدونات بلوجر | yosefssss | إضافات وأدوات بلوجر | 5 | 08-30-2012 07:44 PM |
إضافة مربع البحث لمدونات بلوجر بشكل إحترافي | yacine | إضافات وأدوات بلوجر | 1 | 08-14-2012 09:57 PM |
الساعة الآن 12:50 AM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو
تعاوني بين الأعضاء فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر) |