Cara membuat Image slider di postingan seperti merdeka.com dan web lainya

Image Slider adalah image yang bergerak sendiri dengan otomatis.Tempat image slider yang kali ini tempat nya di postingan bagaimana cara membuat nya berikut

Caranya sangat mudah :

TAHAP 1.
klik HTML di postingan (bukan Compose)
Tahap2.
masukan kode berikut

Jquery

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

CSS + HTML

    <script src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
       $('#BUS-slider').s3Slider({
          timeOut: 3000
       });
    });
    </script>
    <style>
    #BUS-slider {
       width: 550px; /* Keep it 20px-40PX greater than ACTUAL Image size */
       height: 335px;
       position: relative;
       overflow: hidden;
       margin-left: 0;
    }
    #BUS-sliderContent {
       width: 550px;
       position: absolute;
       top: 0;
       margin-left: 0;
    }
    .BUS-sliderImage {
       float: left;
       position: relative;
       display: none;  top: 0;
       border:1px solid #ddd;
    }
    .BUS-sliderImage span {
    position: absolute;
        font: 10px/15px sans-serif,Arial, Helvetica;
        padding: 10px 10px;
        background-color: #000;
        color: #fff;
        filter:'alpha(opacity=70)';
        -moz-opacity: .5;
        -khtml-opacity: .5;
        opacity: .5;
        text-align:justify;
    }
    .BUS-sliderImage span a {
    text-decoration:underline;
    color:#FE6602;
    }
    .clear {
       clear: both;
    }
    .top {
        top: 0;
        left: 0;
        width: 550px !important;
        height: 70px;
    }
    .bottom {
        bottom: 0;
        left: 0;
        width: 550px !important;
        height:90px;
    }
    .left {
        left: 0;
        top: 0;
        width: 110px !important;
        height: 335px;
    }
    .right {
        right: 0;
        bottom: 0;
        width: 110px !important;
        height: 315px;
    }
    </style>
    <br />
<div id="BUS-slider">
<ul id="BUS-sliderContent">
<li class="BUS-sliderImage">
    <img height="335" src="CODE IMAGE GAMBAR ANDA" width="550" /><a href="URLYANG DITUJU"><span class="top"><h3> JUDUL GAMBAR</h3>
TEXT ISI DARI GAMBAR TERSEBUT</span></a><span class="short_text" id="result_box" lang="en"><span class="hps"></span></span>
    </li>
<li class="BUS-sliderImage">
    <img height="335" src="CODE IMAGE GAMBAR ANDA" width="550" /><a href="URLYANG DITUJU"><span class="top"><h3>
JUDUL GAMBAR</h3>
TEXT ISI DARI GAMBAR TERSEBUT</span></a><span class="short_text" id="result_box" lang="en"><span class="hps"></span></span>
    </li>
<li class="BUS-sliderImage">
    <a href="URLYANG DITUJU"><img height="335" src="CODE IMAGE GAMBAR ANDA" width="550" />
    <span class="top"><h3>
JUDUL GAMBAR</h3>
TEXT ISI DARI GAMBAR TERSEBUT</span>
    </a></li>
<li class="BUS-sliderImage">
    <a href="URLYANG DITUJU"><img height="335" src="CODE IMAGE GAMBAR ANDA" width="550" />
    <span class="bottom"><h3>
JUDUL GAMBAR</h3>
TEXT ISI DARI GAMBAR TERSEBUT</span>
    </a></li>
<li class="BUS-sliderImage">
    <a href="URLYANG DITUJU"><img height="335" src="CODE IMAGE GAMBAR ANDA" width="550" />
    <span class="bottom"><h3>
JUDUL GAMBAR</h3>
TEXT ISI DARI GAMBAR TERSEBUT</span>
    </a></li>
<div class="clear BUS-sliderImage">
</div>
</ul>
</div>
<br />

Sekian Tutorial dari saya semoga bermanfaat , terima kasih