Cara Membuat Slideshow Foto Di Dalam Postingan Blog

1.Masuk ke Blogger Kemudian tentunya ke Dasbor
2.Pilih buat Entri Baru yang warna orange
3.Ingat pilih yang HTML jangan yang Compose
4.Pastekan kode di bawah ini pada HTML jangan di compose













<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: 600px; /* 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP6D680hgoyJJ1N6S9536yX9kUG0OIj1g_rRBMKPp7W56vHd8Yb75w1qtD3e3ViZRLHI6F4picis-GWtLw8zNWs6P-AJ2XTuWmoUHzixuBimiSpmzD5p8UuYuzF9YcW8612cflEL6Gkf8G/s320/378272_479201225486675_466622634_n.jpg" width="550" /><a href="http://kotasumberjaya.blogspot.com/"><span class="top"><h3>
</h3>
</span></a></li>
<li class="BUS-sliderImage">
    <img height="335" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFRQ94lG1xiG4cqeLKnoFlEfvXiIePqp14A7UVVPPMtSl2D9wI8SnNR-IZlF-890dYnSAuKrQZI9J4HR-9jEXiaKe4IC9O9P2hbaZhKli_PrqDNGAq8ICbI2JgQGPMIyB1UPFo3nhHejiV/s320/63508_474519129288218_1379512577_n.jpg" width="550" /><span class="top"><h3>
</h3>
</span></li>
<li class="BUS-sliderImage">
    <a href="http://kotasumberjaya.blogspot.com/"><img height="335" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqfTkDiwKI98CRk6skcP-HRXqospf0KlLPPxTiUNp7Ur9VW9FCZDvw38fSKS3wuFeT_F994NWu4-mpDLfo0PNLaIBMVnbqhhMCFwRueIyTfO-aRvMJldY3ofPLZ3hPMhkgVup3mOda-YOA/s320/63542_473642129375918_2053031270_n.jpg" width="550" />
    <span class="top"><h3>
</h3>
</span></a></li>
<li class="BUS-sliderImage">
    <a href="http://wandijulian.blogspot.com/"><img height="335" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9rW7MoLj9WnOtBCg5ec8Pf89lwpkLTRs5a3yLCDMQ4EyYQPrtvpNj69eBeBAl9ESvpQrPmYi2vA25tYr_zOgmZc6er7UlFWj7c_Kt2UaO1r5q4BuFW_h7MN0Yq2zTt8zdQr2rw1GxCBpO/s320/733763_473642119375919_1672914095_n.jpg" width="550" />
    <span class="bottom"><h3>
</h3>
</span></a></li>
<li class="BUS-sliderImage">
    <a href="http://kotasumberjaya.blogspot.com/"><img height="335" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAMpxKqiaujFq4fnzPXmEOtnsebXK7aV-YtUvjODW5b2_UgGHAQl2kypG44aE7bJAudTKn8vcIokuTC-g8_UWYeuq0ugbeFB6JaWSOnxGSH6cMfRAdFZjRN3oB3xKxIePT6PQn26LX7WW3/s320/934769_479200755486722_873014454_n.jpg" width="550" />
    </a><span class="bottom"><h3>
</h3>
</span></li>
</ul>
</div>


Keterangan Kode diatas
kode warna orange : itu harus diganti dengan alamat URL Blog sobat sendiri
kode warna merah : Itu URL Gambar dan silahkan sobat ganti dengan URL Gambar yang sobat inginkan
semoga sukses :) 

Share on :

Tweet

Posted in: creative by taufik,Tips