إضافة سليدر (Slider) بتقنية JavaScript لمدونات بلوجر

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

اليوم الشرح سيكون حول كيفية اضافة Slider الى مدونات بلوجر ، هذه الإضافة تمكنك من عرض صور على مدونتك وهي بتقنية الجافاسكربت JavaScript ، الإضافة جميلة جدا والكود جد سهل .

لإضافة الـ Slider الى مدونتك اتبع الخطوات التـاليـة :

• توجه الى لوحت تحكم مدونتك Blogger Dashboard .
• اضغط على تخطيط Layout  .
• اضغط على اضافة ادات Add a Gadget فوق الرسائل .
•  اختر ادات HTML/JavaScript.
• ثم الصق الكود اسفله في الصندوق بعد التعديل عليه .

معاينة

  <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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDAIn_pVlrV_1Fgr3WCzHGskSfi41Wz3nPmSLRGgiv3jgi5683C-ITw2cvIj-YikxTJ5SUHIZRvbqY2jyTnIst8b0j_ZbPQ_VXbXyRuW4TmiYI44yuerEwDi7xVB90YQFpYw0kxY7owrA/s1600/helperblogger.com-ribbon.png) no-repeat; z-index: 7; } #slider { width: 500px; height: 218px; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3oq0ZQE7kXSW_4iAsZCL85HMogqOLCSrLQ5UBDMk_Z6kMh3iZNh17_odt1dlZwqTGQ5P1MM3ndEnUVOseqtisZSlUxK8MiYVsiibnO3fgGSOEQ9OCZgdlgM9TLOdlKhlOGTOsXHdAkPo/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicS0iIkyONRak7OBamP0j5EZ8RRB0Eo6Cgf4cKbrufoi2ZR0aGU3jCY4KJpCa4Ko1fFhW5CEPSaF6-EfQiPwnwmVURTGEfhvZchyJVbIaRiGuY-FKWBPoNRbmjUqbn1ulfxyzndqAojJ0/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>

شرح التغييرات الواجبة تغييها :

• رابط الصورة    :   قم بتغييرها برابط الصورة المراد ادراجها في Slider .
• الرابط             :  غيره بـالـ Link .
• وصف الصورة  :  وصف قصير للصورة .
• لحذف كلمة What's hot احذف الكود التالــي :

 #ribbon { width: 111px; height: 111px; position: absolute; top: -4px; left: -4px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDAIn_pVlrV_1Fgr3WCzHGskSfi41Wz3nPmSLRGgiv3jgi5683C-ITw2cvIj-YikxTJ5SUHIZRvbqY2jyTnIst8b0j_ZbPQ_VXbXyRuW4TmiYI44yuerEwDi7xVB90YQFpYw0kxY7owrA/s1600/helperblogger.com-ribbon.png) no-repeat; z-index: 7; }

ملاحظة : يمكنك تغيير المقاسات عن طريق تغيير ما يــلــي :

• width: 500px;  يمكنك تغيير القيمة 500 لتغيير العرض .

• height: 218px; يمكنك تغيير القيمة 218 لتغيير الطول .

قالب بلوجر