Membuat Slideshow Gambar V-3 pada Blog

Setelah banyak tutorial Slideshow Gambar yang dijelaskan sebelumnya amatlah rumit untuk dipahami seperti pada artikel Membuat Slideshow Gambar pada Blog dan Membuat Slideshow Gambar denga jQuery V-2 akan tetapi sangatlah menarik untuk diterapkan pada blog kita.

Pada tutorial ini tidak jauh beda dengan apa yang dijelaskan diatas hanya saja kode HTML yang digunakan sangatlah sederhana dan hasil yang diterapkan tidak kalah dengan Membuat Slideshow Gambar pada Blog dan Membuat Slideshow Gambar denga jQuery V-2

Kode sederhana ini (di mata Kang Onk... hehehe...) ditemukan pada saat membaca artikel Boban Karišik di Slideshow Jquery. Kode yang ia ciptakan pada kenyataannya masuk akal dan setelah tweaker sebagian dari CSS dan beberapa HTML yang disediakan oleh dia, saya bisa menciptakan sebuah versi yang kompatibel dari Slide Show untuk Blogger.

Langsung ke TKB ya? Langkahnya :

Login Blogger;

Pilih Rancangan;

Klik tab Tambahkan Elemen;

Pilih HTML/JavaScript;

Copy paste kode dibawah kedalam HTML tersebut;

<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://kang-onk.googlecode.com/files/Slider-V.3.js></script>
<script type="text/javascript">
$(document).ready(function() {
$('#KOD-slider').s3Slider({
timeOut: 3000
});
});
</script>
<style>
#KOD-slider {
width: 590px;
height: 335px;
position: relative;
overflow: hidden;
margin-left: 0;
}
#KOD-sliderContent {
width: 590px;
position: absolute;
top: 0;
margin-left: 0;
}
.KOD-sliderImage {
float: left;
position: relative;
display: none; top: 0;
border:1px solid #ddd;
}
.KOD-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;
}
.KOD-sliderImage span a {
text-decoration:underline;
color:#FE6602;
}
.clear {
clear: both;
}
.top {
top: 0;
left: 0;
width: 570px !important;
height: 70px;
}
.bottom {
bottom: 0;
left: 0;
width: 570px !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="KOD-slider">
<ul id="KOD-sliderContent">
<li class="KOD-sliderImage">
<img src="URL foto anda" />
<span class="right"><h3>Judul foto anda</h3>Keterangan foto anda disini</span>
</li>
<li class="KOD-sliderImage">
<img src="URL foto anda" />
<span class="left"><h3>Judul foto anda</h3>Keterangan foto anda disini</span>
</li>
<li class="KOD-sliderImage">
<img src="URL foto anda" />
<span class="top"><h3>Judul foto anda</h3>Keterangan foto anda disini</span>
</li>
<li class="KOD-sliderImage">
<img src="URL foto anda" />
<span class="bottom"><h3>Judul foto anda</h3>Keterangan foto anda disini</span>
</li>
<li class="KOD-sliderImage">
<img src="URL foto anda" />
<span class="bottom"><h3>Judul foto anda</h3>Keterangan foto anda disini</span>
</li>
<div class="clear KOD-sliderImage"></div>
</ul>
</div>
<br/>