Slide show Post Image Dengan Jquery pada Blog ...!

Slide Show....? dari kata tersebut kita bisa tahu kalo slide show itu menampilkan gambar atau foto yang bergerak sendiri. coba kalian perhatikan websitenya berita seperti detik.com, Kompas, Okezone, dll, disana banyak sekali fitur slide shownya. Terutama di website yang berisi film, seperti cineplex21 itu pasti suka ada slide show dari gambar film yang akan diputar. Bagi yang penasaran bentuknya kaya gimana kalian bisa lihat DEMO PREVIEW nya DISINI,,,

sekarang yang jadi masalah, gimana caranya memasang gambar slide show itu pada blog kita...? jawabannya sebenarnya mudah dan sangat simple, BELAJAR DAN PRAKTEK(hehehe...). jawaban yang aslinya yaitu dengan bantuan Jquery.

Terus gimana cara masangnya...? ( nanya lagi... )

daripada nanya terus, Mendingan langsung praktek buatnya yukk....! Langkah pertama yaitu Login Ke Bloger kalian, lalu pilih rancangan/tata letak. Sekarang Pilih EDIT HTML dan jangan lupa back up template kalian.

tahap selanjutnya, kalian pasang script berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

/* ------------------------------------------------------------------------
s3Slider

Developped By: Boban Karišik -> http://www.serie3.info/
CSS Help: Mészáros Róbert -> http://www.perspectived.com/
Version: 1.0

Copyright: Feel free to redistribute the script/modify it, as
long as you leave my infos at the top.
-------------------------------------------------------------------------- */


(function($){

$.fn.s3Slider = function(vars) {

var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

items.each(function(i) {

$(items[i]).mouseover(function() {
mOver = true;
});

$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});

});

var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}

var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}

makeSlider();

};

})(jQuery);

//]]>
</script>

<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>

<style type='text/css'>
#s3slider {
background:#000000;
border:1px solid #818e8f;
width: 550px;
height: 200px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 550px;
position: absolute;
top:-14px;
padding: 0px;
margin-left: 0;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 550px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>

Keterangan :
== jika kalian ingin merubah kecepatang bergerak cari kode angka 4000

Setelah selesai lalu Simpan Template.

Pekerjaan kita masih berlanjut, sekarang masuk ke elemen, Pilih Tambah gadget lalu klik HTML/Java Script. masukan script dibawah ini didalamnya.

<div id="s3slider">
<ul id="s3sliderContent">

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="URL GAMBAR KALIAN" />
<span>BUAT TEMPAT TULISAN KALIAN</span></a>
</li>

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="URL GAMBAR KALIAN" />
<span>BUAT TEMPAT TULISAN KALIAN</span></a>
</li>

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="URL GAMBAR KALIAN" />
<span>PIRATES OF THE C...!</span></a>
</li>

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="URL GAMBAR KALIAN" />
<span>BUAT TEMPAT TULISAN KALIAN</span></a>
</li>

</ul>
</div>

<div class='clear'></div>

Keterangan :
== ganti YOUR-LINK-HERE dengan Link yang kalian kehendaki ( merah )
== ganti Image/gambar dengan gambar kalian ( biru )
== ganti dengan tulisan kalian ( Hijau )

Simpan Template kalian dan lihat hasilnya. Menarik kan...?
semoga bermanfaat dan jangan lupa kasih tau teman yang lain juga ya... oia komentarnya mana...?