Cara Buat Galery Otomatis

 CUKUP PASANG DI HTML AGAN..!!


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
   $('#MBT-slider').s3Slider({
      timeOut: 3000
   });
});
</script>
<style>
#MBT-slider {
   width: 400px; /* Keep it 20px-40PX greater than ACTUAL Image size */
   height: 250px;
   position: relative;
   overflow: hidden;
   margin-left: 0;
}
#MBT-sliderContent {
   width: 400px;
   position: absolute;
   top: 0;
   margin-left: 0;
}
.MBT-sliderImage {
   float: left;
   position: relative;
   display: none;  top: 0;
   border:1px solid #ddd;
}
.MBT-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;
}
.MBT-sliderImage span a {
text-decoration:underline;
color:#FE6602;
}
.clear {
   clear: both;
}
.top {
    top: 0;
    left: 0;
    width: 400px !important;
    height: 70px;
}
.bottom {
    bottom: 0;
    left: 0;
    width: 400px !important;
    height:90px;
}
.left {
    left: 0;
    top: 0;
    width: 110px !important;
    height: 335px;
}
.right {
    right: 0;
    bottom: 0;
    width: 80px !important;
    height: 319px;
}
</style>

<div id="MBT-slider">
<ul id="MBT-sliderContent">
<li class="MBT-sliderImage">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAKBNI834maHZZhSBi69jjacY6vfkoP0Zga8lYzWmVUEJxhw1Jb-7atjsJD1n8oPYCL4Z2iaJGHpIXbP7o9W-zZZDnvefURqFv0DNbcWUyUEdfbpmwVB9xpAC5HWUP27F1kGrFkq1eyIqJ/s1600/deep-freezers-125x125.jpg" />
<span class="right"><h3>HEADING-1 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<li class="MBT-sliderImage">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqp5ju-h-1_S3cPG-nx4tzWsYRjhuJSpzs2jR-Ox2_oPCDVy3IfKeG-M_ql0gF6wEnlu9fti6dM-o4HapHiT4eZbTbvXfvURPrHEkNQsTtkA9wH6GzTMBjI92CY-uPbJWSqDP5DYvaLjl/s1600/fc61289e6aab64689c2783e2846147a2.jpg" />
<span class="left"><h3>HEADING-2 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>

<li class="MBT-sliderImage">
<img src="URL OF IMAGE" />
<span class="top"><h3>HEADING-3 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<li class="MBT-sliderImage">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA-t38642aC0nefRTvo7BHDURhHl2uysMFbuUFbDwsGD-lywg2utjQnEh8hp89jMx8wg8D92kkqY_AUswGHLbipVO-forxYbTHrqUhjvdYbutR6IphXfbmFW3gEJj1M7IKUWzLJlKtwUvx/s200/1ca8a840bd4c993d8e30d5fffd0b5243-fullsize.jpg" />
<span class="bottom"><h3>HEADING-4 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>

<li class="MBT-sliderImage">
<img src="https://lh5.googleusercontent.com/-a6iAsRk4f4s/T-KLUpLMMEI/AAAAAAAAALI/XZ8D2JPoR0s/w497-h373/onlinesupport.jpg" />
<span class="bottom"><h3>HEADING-5 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<div class="clear MBT-sliderImage"></div>
</ul>
</div>
<br/>

Note :
Ganti Warna Merah Dengan URL Gambar Agan