Membuat S3Slider Image Show

Sobat pernah melihat di beberapa blog ada yang pernah buat blognya itu dengan fasilitas S3 Slider Image Show. Pengen memasangnya di blog sendiri.
kamu harus download script dibawah ini, agar cara ini dapat bekerja dgn baik

S3Slider Js
Jquery Js

langsung saja ikuti cara berikut :

1. Login ke account blogger kamu, pilih Layout >> Edit HTML
2. Kemudian Masukkan Code CSS dibawah ini sebelum kode ]]></b:skin>

/* Slider Control ----------------------------------------------- */ h2.slider { color: #000000; font-size: 14px; line-height: 14px; text-transform: uppercase; margin: 0px 0px 0px 0px; padding: 0px 0px 6px 0px; border-bottom: 1px solid #C0CCD3; } #s3slider { width: 570px; /* important to be same as image width */ height: 300px; /* important to be same as image height */ position: relative; /* important */ overflow: hidden; /* important */ } html > body #s3sliderContent { width: 570px; /* important to be same as image width or wider */ position: absolute; /* important */ top: 0; /* important */ margin-left: -40px; /* important */ } #s3sliderContent { width: 570px; /* important to be same as image width or wider */ position: absolute; /* important */ top: 0; /* important */ margin-left: 0px; /* important */ margin-top:30px; } .s3sliderImage { float: left; /* important */ position: relative; /* important */ display: none; /* important */ } .s3sliderImage span { position: absolute; /* important */ left: 0; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 570px;height:50px; background-color: #000; filter: alpha(opacity=70); /* here you can set the opacity of box with text */ -moz-opacity: 0.7; /* here you can set the opacity of box with text */ -khtml-opacity: 0.7; /* here you can set the opacity of box with text */ opacity: 0.7; /* here you can set the opacity of box with text */ color: #fff; display: none; /* important */ bottom: 0; /* if you put top: 0; -> the box with text will be shown at the top of the image if you put bottom: 0; -> the box with text will be shown at the bottom of the image */ }

3. Kemudian masukkan Script dibawah ini sebelum kode ]]></b:skin>

<script src="http://subagya.googlepages.com/jquery.js" type="text/javascript"> <script src='http://betatemplates.co.cc/wp-content/project/js/s3Slider.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&#39;#s3slider&#39;).s3Slider({ timeOut: 4000 }); }); </script>

Keterangan : http://www.script kamu.com harus diganti dengan Alamat JS kamu,

4. Kemudian masuk ke Layout > Add Page Element > HTML/ JavaScript, masukkan script dibawah ini didalam content

<h2 class="slider"> My Gallery</h2> <ul id="s3sliderContent"> <li class="s3sliderImage"> <img src="YOUR IMAGE URL" />YOUR TEXT... </li> <li class="s3sliderImage"> <img src="YOUR IMAGE URL" /> YOUR TEXT... </li> <div class="clear s3sliderImage"> </div> </ul>

5. Simpan Lalu lihat hasilnya

contoh diatas hanya ada 2 gambar... untuk menambah jumlah gambar, kamu dapat menambah kode ini

<li class="s3sliderImage"> <img src="YOUR IMAGE URL" />YOUR TEXT... </li>