أسهل وأشيك سلايد شو للمدونة 2016

السلايد ده انا أستعمله مع موقع رياضى ليا سلايد شو تحفة كمان بالخصوص وشيك جدا وأنيق فى عرض المواضيع أو أخبار

وسهل جدا فى التركيب

بخطوه واحده فقط وهي اضافة اداهHTML/JavaScript وهتلاقيها موجود فى التخطيط فى المدونة

الطريقة مفصلة

1. انتقل إلى لوحة تحكم مدونتك
2.      إختر "تخطيط" ثم إضافة أداة ثم اختر (  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 urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4DJzCh95IVB77ujrlmJAKYHnfoTmso8vo7SsMhD13sv0tumf1JrRGIUVLQPXvYje6z6hJ9SY-QbqXXNNJ4KBJwE2dIpSTDeBsMC78ZW_MZzG435DmL4k-Cp-cDKv2OV8TMYR1l-RFA3MR/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 undefinedif 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 urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGxtbXjBdG22LbOxcWTUINqkzbe7K13YFqxGPda5ZhqLztcwaGwZVQpteeXddb-qALB01PORj1QPgYvef4IIiZDVE10QfgdD9x3tYAY3xbnyiz7hQ3Act_Cnz67uNQKZtR1KQrJORXkfF4/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: translate3dundefined0,0,0);
-ms-transform:translate3dundefined0,0,0);
-moz-transform:translate3dundefined0,0,0);
-o-transform:translate3dundefined0,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="#"><img src="رابط الصوره الثانيه" alt="عنوان الموضوع الثاني" /></a>
<a href="#"><img src="رابط الصوره الثالثه"alt="عنوان الموضوع الثالث" /></a>
<a href="#"><img src="رابط الصوره الرابعه"alt="عنوالن الموضوع الرابع" /></a>
<a href="#"><img src="رابط الصوره الخامسه" alt="عنوان الموضوع الخامس"/></a>
</div>
</div>