Membuat slide show pada posting

Buat sobat yang mau mencoba untuk blog sobat cara agak gampang-gampang susah alias gasus , tapi kalau sobat teliti cara nya cukup mudah yaitu copy paste kode di bawah ini kehalaman HTML Postingan blog

<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: 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="http://3.bp.blogspot.com/-1nqN2n-bxqc/UOlEiGJN40I/AAAAAAAAE9A/dCelZ2rCb2E/s1600/Untitled-2.jpg" width="550" /><a href="http://blog-rangga.blogspot.com/"><span class="top"><h3> Mother And Rangga</h3>The road to the lake Singkarak west sumatera all back home</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="http://1.bp.blogspot.com/-jKNi9EeXeEk/UOlEudoq3hI/AAAAAAAAE9U/0lnuoRGv6UQ/s1600/Untitled-6.jpg" width="550" /><a href="http://blog-rangga.blogspot.com/"><span class="top"><h3>Mother And Rangga</h3>Rangga photo on the bridge leighton 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://blog-rangga.blogspot.com/"><img height="335" src="http://1.bp.blogspot.com/-haXpszup8FE/UOlsZL5WxTI/AAAAAAAAE-A/XUGrXP7vviA/s1600/Untitled-1.jpg" width="550" /> <span class="top"><h3>Rangga photo</h3>Rangga in the Clock Tower Bukitinggi West Sumatera</span> </a></li><li class="BUS-sliderImage"> <a href="http://blog-rangga.blogspot.com/"><img height="335" src="http://1.bp.blogspot.com/-HTT6ExcljAU/UOmTXLaInDI/AAAAAAAAE-Q/UNJRmGExphE/s1600/Untitled-1.jpg" width="550" /> <span class="bottom"><h3>Rangga Photo</h3>Rangga posing overpass Kelok sembilan west sumatera</span> </a></li><li class="BUS-sliderImage"> <a href="http://blog-rangga.blogspot.com/"><img height="335" src="http://4.bp.blogspot.com/-387pM5uD_yo/UOmTjcug3rI/AAAAAAAAE-c/eZv82I8P1Bo/s1600/Untitled-2.jpg" width="550" /> <span class="bottom"><h3>Rangga , Father and Mother</h3>Rangga with beloved family</span> </a></li><div class="clear BUS-sliderImage"></div></ul>

</div><br />

Keterangan   :

Kode yang berwarna Orange atau kuning adalah URL yang bisa sobat ganti dengan URL blog sobat.

Kode warna merah adalah URL Gambar , ganti dengan URL blog yang mau sobat tampilkan 

Tulisan warna hijau atau green Ganti dengan judul yang sobat inginkan kan  Tulisan warna biru ganti dengan deskripsi