Pembuatan Fotto Slider pada blog

Membuat slider fotto postingan dalam blog biasanya digunakan untuk menarik pengunjung untuk melihat gambar apa yang baru di posting

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <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: 450px; /* Keep it 20px-40PX greater than ACTUAL Image size */
       height: 200px;
       position: relative;
       overflow: hidden;
       margin-left: 0;
    }
    #BUS-sliderContent {
       width: 450px;
       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: 450px !important;
        height: 70px;
    }
    .bottom {
        bottom: 0;
        left: 0;
        width: 550px !important;
        height:90px;
    }
    .left {
        left: 0;
        top: 0;
        width: 110px !important;
        height: 200px;
    }
    .right {
        right: 0;
        bottom: 0;
        width: 110px !important;
        height: 200px;
    }
    </style>
    <br />
<div id="BUS-slider">
<ul id="BUS-sliderContent">
<li class="BUS-sliderImage">
    <img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGHLYk_yezqIm_3bxiLzjHTEm7bwqYnRTPdj0cxrdg8CLQeY9TGSwI-he0He925KoEsVXGwqaLmK2AJZkpFir9W4f1SayocvL7CV7IYf1Y4da6w4dQggy90V-utjdV2C4o_Am85oNCFkcF/s320/window+7.JPG" width="450" /><a href="http://go-detik.blogspot.com/ "><span class="top"><h3> WELCOME</h3>
home</span></a><span class="short_text" id="result_box" lang="en"><span class="hps"></span></span>
    </li>
<li class="BUS-sliderImage">
    <img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjinumniGWwulwIkqoX3e9lelRB7aMmx4vf_6bP9C4nxNcnTs_WOpcIuFmKreJAHw07lUSlU0S7bfCCJ3t4mLNBZtrtlKqHdhHZfiJDn9pAzViZvPk9p-e8dpWnlLGBFOxEwGTn2KrP1Zd9/s320/bare.jpg" width="450" /><a href="http://go-detik.blogspot.com/"><span class="top"><h3>
Go-Detik</h3>
  III</span></a><span class="short_text" id="result_box" lang="en"><span class="hps"></span></span>
    </li>
<li class="BUS-sliderImage">
    <a href="http://go-detik.blogspot.com/"><img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtx3CPp6f6c1VgJxC4NG3Jnrjcrtnec0cYr9S1Z4vccrVOqf4ndODmLgDuW6wVi-xzTPS4JKVuH5Z1tt0zR-ok4Pbbi1Q09SHwPhBc6dIkLyw5rUdZF2oQ5-W6-DHmT54aVcBtmYTOXO2j/s320/69.JPG" width="450" />
    <span class="top"><h3>
GO-DETIK</h3>
Sumatera</span>
    </a></li>
<li class="BUS-sliderImage">
    <a href="http://go-detik.blogspot.com/"><img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL0t_xJienjxhSWuqO-TpPL_Nhdb7ulaRcYJ9SftF1ChBphuoP-PssNCTFPuUDzXpRUQ2gN1UpJtSCotEbaXxUZW4bu5xDBIhcG_bn6_H0nL8ATSt81lTh9iV1Qqb32tDoTjt0eZuH7xJz/s320/66.JPG" width="450" />
    <span class="bottom"><h3>
GO-DETIK</h3>
west sumatera</span>
    </a></li>
<li class="BUS-sliderImage">
    <a href="http://go-detik.blogspot.com/"><img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieZr4RnIE3EHh7fWQdIFdwwdkz7FECizfgtFgizSFCSPjYYVnRiR4Oai1_xWriD7ocHiENDgWYihD43ibCZL6yxHWa2-qorNJeqE6rjHe1nvP5HdwP967qazbp4KGiz8U27fv5wiGitsKY/s320/crisis.jpg" width="450" />
    <span class="bottom"><h3>
GO-DETIK</h3>
family</span>
    </a></li>
<div class="clear BUS-sliderImage">
</div>
</ul>
</div>
<br />

Catatan:
Untuk tulisan yang berwarna BIRU ganti dengan Url gambar yang anda postingkan
Untuk tulisan berwarna HIJAU silahkan anda ganti untuk membuat judul gambar
Untuk tulisan yang berwarna KUNING silahkan ganti untuk keterangan descripsi anda.