افضل وأخف كود slide show لعرض الصور والفيديو للمدونات عن طريق اضافة أداه

السلام عليكم :

كود عرض الصور والفيديو  سلايد شو slide show ،

هذا الكود الرائع والمميز حقيقة والذي يمتاز بخفته وسهولة تركيبه ،

حيث يتم تركيبه في المدونه عن طريق اضافة أداه ( تخطيط ----> اضافة اداه )

كما يمكنك عرض صور فقط او صور وفيديو او عرض مواضيع 

وتستطيع التحكم في مكان الكود عن طريق سحب الأداه  في المكان الذي تريده

كما يمكنك التحكم في طول وعرض الكود ، وزيادة عدد المواضيع المعروضه بتكرار الرابط

صورة الكود

الكود

<style type="text/css"> /* JavaScript Image Slider By http://alnaje7oon.blogspot.com/ */ #mcis { display: none; } #sliderFrame { position: relative; width: 468px; margin: 0 auto; border:3px solid #E1E0E2; } #ribbon { width: 111px; height: 111px; position: absolute; top: -4px; right: -4px; } #slider { width: 468px; height: 260px; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikiISXwzQ5w-HqUArxiecavMQM957tO0N3nx7rJOfMvhkY2WvUh_eI_d-_bUjXaLQYW7vvNBOSFB0EagEU6hW-ICWa2lZ_5BPDRmkUnT7d8_v-puSCEQKNqjjLWGlmcB5a8pFLxV4LxA/h120/mdonti-n.blogspot.com-loading.gif) no-repeat 50% 50%; position: relative; margin: 0 auto; box-shadow: 0px 1px 5px 010007; } #slider img { position: absolute; border: none; display: none; } #slider a.imgLink { z-index: 2; display: none; position: absolute; top: 0px; right: 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; right: 0px; bottom: 0px; z-index: 3; overflow: hidden; font-size: 0; } div.mc-caption-bg { background-color: #0066CC; } div.mc-caption { font: bold 25px/21px traditional arabic ; color: #0000; 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; right: 190px; width: 150px; background: none; padding-right: 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/AVvXsEgqftftgbLOoXnseLOlEZkOeLLLkjRz_PhJTUmErc49LZSspuqVc2v-O9rwzwuyBGJNQJZml0V2H3TBt4EBFKcGmBr7G-t8zzP3rXP30sWXkGNu_UlNDWoDjiK7msn85nFQ_-Ej4SdohQ/h120/mdonti-n.blogspot.com-bullet.png) no-repeat 0 0; float: right; overflow: hidden; vertical-align: middle; cursor: pointer; margin-left: 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://my-mdonti.googlecode.com/files/js-image-slider.js" type="text/javascript"></script> <div id="sliderFrame"> <div id="ribbon"></div><div id="slider"> <a target="_blank" href="رابط الموضوع"><img src="رابط الصوره" alt="عنوان الموضوع"/></a> <a target="_blank" href="رابط الموضوع"><img src="رابط الصوره" alt="عنوان الموضوع"/></a> <a target="_blank" href="رابط الموضوع"><img src="رابط الصوره" alt="عنوان الموضوع"/></a> <a target="_blank" href="رابط الموضوع"><img src="رابط الصوره" alt="عنوان الموضوع"/></a> <a target="_blank" href="رابط الموضوع"><img src="رابط الصوره"alt=" عنوان الموضوع"/></a> </div></div>