حصريا سلايدرشو اوتوماتيكي اسهل طريقة اضافتها في مدونتك

 <style type="text/css">

#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}

#slides ul{height:250px}

#slides li{width:49.9%;height:100%;position:absolute;displ  ay:none}

#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}

#slides li:nth-child(1){left:0;top:0}

#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}

#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}

#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}

#slides a{display:block;width:100%;height:100%;overflow:hi  dden}

#slides img{display:block;width:100%;height:100%;border:0; 
padding:4px;background-color:#18B3FB;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}

#slides .overlayx{width:100%;height:100%;position:absolute  ;z-index:2;background-image:url(http://softglad.at.ua/images/fadebg....d-position:50% 50%;background-repeat:repeat-x;border:4px solid #18B3FB;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}

#slides
h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Arial;left:0;padding:0
 10px;color:white;z-index:3;line-height:20px;font-weight:normal}

#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}

#slides
.label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}

#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}

#slides .overlayx,#slides li{-webkit-transition:all .4s
ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s
ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s
ease-in-out}

#slides li:hover
.overlayx{-ms-filter:"progid:DXImageTransform.Microsoft.
Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}

#buttons{margin: 5px auto;text-align: center;background:#18B3FB;width: 10%;}

#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}

#buttons a::before{content:"";width:0;height:0;border-width:8px
7px;border-style:solid;border-color:transparent #ffffff transparent
transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}

#buttons a#nextx::before{border-color:transparent transparent transparent #ffffff;margin-left:-3px}

@media only screen and (max-width:600px){

  #slides ul{height:600px}

  #slides li:nth-child(1){width:100%;height:49.8%}

  #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%  }

  #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:2  4.8%}

  #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}

}

</style>

<div id="featuredpost"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script src="http://softglad.at.ua/widgets/slider.js" type="text/javascript"></script>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function () {

FeaturedPost({

blogURL:"http://alam3arb.com/",

MaxPost:8,

idcontaint:"#featuredpost",

ImageSize:300,

interval:5000,

autoplay:true,

tagName:false

});

});

//]]>

</script>