لمحبي السلايد شو أقدم لكم سلايد شو جميل ومميز

لمحبي السلايد شو أقدم لكم سلايد شو جميل ومميز وما يميز هذا الأخير هو سهولة تركيبه

فأنت لن تحتاج للتعديل على قالب مدونتك لكي تستفيد من هذه السلايد شو

هذه هي الميزة التي تجعله محبوبا من طرف الكثيرين لأن الاغلبية تخاف من التعديل على القالب وقد لا تسير الأمور كما نشتهي

وتقع مشكلة في القالب لا قدر الله  :( 

والآن يمكنك إضافته دون خوف :)

كل ما عليك هو إضافة أداة جديدة ثم ضع فيها هذا الكود

 <style type="text/css"> /* JavaScript Image Slider By http://www.helperblogger.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/AVvXsEiQAv1g0Tz_InbHsyCeZfbEkHiPoVBo2VDwVFj8vfwVq35D6L8WbCpEMmVsO2BJXJFsS3-a2gAXWU6XyVTCnlVk7oAzWS6OYrH41wthSOKwSgQBy6sljYHEx44SRGQGVuwYmCDkgO8A8FU/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/AVvXsEjinExrvrp1Eu9CiAQGxLQdVoPG3ZQV_LwOPCkDycKkdRQf_ieP1svSKUIxGGKUoUP01IkdlaBZL8Z_V8sfQ2Wr8HkEkpSahy1VlHV2a8bjA2wU0QjRJmV7m8FTojvjNLXPAgmpTTrXJCM/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/AVvXsEj4g6n1VbjxrqBpPzGiIwxe3IS10L_Fb24wMYFt7LP5tddZBkl-uU_2uYDr1HhASbPMSdh_o-IzhAbXATSzi88A3zXTdmkuXCOL97Cy0gbtOnWBMAgMmg4ioTCV_QHvgdRqxOBjNW4vubE/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="http://images.helperblogger.com/jsSlider/helperblogger.com-1.jpg" alt="Image Slider By helperblogger.com"/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-2.jpg" alt=""/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-3.jpg" alt="The slide is a linking image"/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-4.jpg" alt="Pure Javascript. No jQuery. No flash."/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-5.jpg" alt="#htmlcaption"/></a> </div> </div>

 التغيرات التي قد تريد تطبيقها على هذا السلايد شو هي الحجم

إبحث عن 

 width: 500px;
 height: 218px;

500 تخص الطول و 218 تخص العرض بخصوص الطول قد تجد الكود مرتين غيره أيضا

ثم لتغير الصور إبحث عن 

http://images.helperblogger.com/jsSlider/helperblogger.com-1.jpg 

ستجد أكثر من صورة عليك تغيرها كلها بالصور التي تريد عرضها في السلايد شو

ولوضع الرابط ستجد قبل كل صورة هذا الكود

 <a href="#">

غير # برابط الموضوع