The document provides instructions for adding a slideshow to blog posts using jQuery and s3Slider.js. It includes the necessary code to add, style, and populate the slideshow with images, titles, and descriptions. The code provided can be copied and pasted into blog posts, modifying the image URLs, titles, and descriptions as needed.

1. 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;

2. 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 />

3. <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>

4. </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