اللون : # أزرق # رمادي
: HTML / Javascript
<style type="text/css">/* alb33dani.blogspot.com */#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}#slider {width:700px;height:306px;/* Make it the same size as your images */background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLQl-MDnE7JzUUQvbEmUksRYqL-cXkkMug3Qx6WULUtVZjW9MEMmxV2gZKukw_gKDI46VZmPyZuvW04yavsuX8zN5NWBPqhqdS_RzmJyTfZ7ptWkXtVwz_yk6mQ3Rhlok9EIAk6_S6NHBx/s1600/loading.gif) no-repeat 50% 50%;position:relative;margin:0 auto;/*make the image slider center-aligned */box-shadow: 0px 1px 5px #999999;}#slider img {position:absolute;border:none;display:none;}/* the link style (if an image is wrapped in a link) */#slider a.imgLink {z-index:2;display:none;position:absolute;top:0px;left:0px;border:0;padding:0;margin:0;width:100%;height:100%;}/* Caption styles */div.mc-caption-bg, div.mc-caption-bg2 {position:absolute;width:100%;height:auto;padding:0;left:0px;bottom:15px;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;}/* ------ built-in navigation bullets wrapper ------*/div.navBulletsWrapper {top:320px; left:280px; /* Its position is relative to the #slider */width:150px;background:none;padding-left:20px;position:relative;z-index:5;cursor:pointer;}/* each bullet */div.navBulletsWrapper div{width:11px; height:11px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUec35Ttp9wfrL5uD1z2Y6OvUu0mn2xzlJAJNYK7TPRDiB8IVOvD2xCmZaBQ4T2PL9wleNeVsUaV71Vi8kPajcBmZplzsKOgdN3yUT6kVRJWxbkdrKqzbshAFDJ1u0uIwhPLteTfAS7mlv/s1600/bullet.png) no-repeat 0 0;float:left;overflow:hidden;vertical-align:middle;cursor:pointer;margin-right:11px;/* distance between each bullet*/_position:relative;/*IE6 hack*/}div.navBulletsWrapper div.active {background-position:0 -11px;}/* --------- Others ------- */#slider{transform: translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);}</style><script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script><div id="sliderFrame"><div id="slider"><a href="#"><img src="رابط الصوره الاولى" alt="عنوان الموضوع الاول" /></a>
<a href="<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><a href="#"><img src=""alt="عنوان الموضوع الثالث" /></a>رابط الصوره الثالثه
<a href="<a href="#"><img src=""alt="عنوالن الموضوع الرابع" /></a>رابط الصوره الرابعه
<a href="<a href="#"><img src="" alt="عنوان الموضوع الخامس"/></a>رابط الصوره الخامسه
</div>
</div></div></div>
# معلومات للمبتدئين:
تعرف على طريقة اضافة أداة HTML/ Javascript إلى قالب بلوجر
شرح بالصور
شرح بالفيديو
سلايد شو رائع و بسيط اعجبني جدا و انصح به
ردحذف