<style type="text/css">

 /* JavaScript Image Slider By http://mdonti-n.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/AVvXsEgQk4dq1uTVUnIwqtlXbM9nhLQcxvprhfNll276xtxO2h7n3Mw4_1TvC7G4tnEwqVjwLvDczD60ZEaroZku7l28Wz_ZeqNZUfXDwdUFKoyCzTVVE14SsWUAigvgaV9ycLo1abjYRsjkag/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/AVvXsEhqXFpAvFrZGu3jT0fYn_hvdvrFRZAjfdEz62dCReTkr6qy57QPIIO93DlrfVHm3tAWvOSU4Y8cBqiLuLVePEsITrFJLzkmSMgYaX1zcyTzl8bOdgQc-beaqicfYRsbb6nBtlbZuAwOzw/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 href="xxxxxx"><img src="ppppp" alt="ttttt"/></a>

<a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a>

<a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a>

<a href="xxxxxx"><img src="ppppp" alt="ttttt"/></a>

<a href="xxxxxx"><img src="ppppp"alt=" ttttt"/></a>

                </div></div>

• نضع مكان الرمز xxxxx رابط الموضوع (الرابط الإلكتروني للموضوع )
• نضع مكان الرمز ppppp رابط الصورة (الرابط الإلكتروني لصورة الموضوع)
• نضع مكان الرمز ttttt عنوان الموضوع (أو نختار عنوان أخر للموضوع )