Membuat Slide Show Gambar atau Foto Berita Pada Blog

Setelah mutar-mutar om-google, akhirnya ketemu juga trik membuat slide show gambar atau foto  berita pada blog   dengan menyatukan kode-kode yang ada pada artikel-artikel sahabat blogger (maaf tidak saya sebutkan blognya karena terlalu ramai).   Slide show gambar atau foto  berita  menyerupai seperti websitenya detik.com, Kompas, Okezone, dan lain-lain yang menggunakan fitur slide show.

Yang membuat saya bingung, bagaimana cara memasang pada blog kita. Jawabannya adalah dengan menggunakan bantuan   Jquery.

Bagi anda yang ingin memasangnya pada blog anda, silahkan ikuti langkah-langkahnya.

1. Login Ke Bloger

2. pilih rancangan/tata letak > EDIT HTML dan jangan lupa back up template anda.

3. Cari kode script   </head>  dan copy paste kode dibawah ini 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: 500px;
height: 215px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 500px;
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: 500px;
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 anda ingin merubah kecepatan bergerak gambar cari kode angka 4000 dan ubah nilainya

*** Masukkan nilai yang berwarna merah pada kode diatas sesuai dengan keinginan anda. 

4. Setelah selesai lalu Simpan Template.

Selanjutnya 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="Alamat Posting Anda"><img style="width:550px;height:200px;" src="Alamat Gambar Anda" />
<span>Isi Artikel Anda</span></a>
</li>

<li class="s3sliderImage">
<a href=" Alamat Posting Anda"><img style="width:550px;height:200px;" src=" Alamat Gambar Anda" />
<span> Isi Artikel Anda</span></a>
</li>

<li class="s3sliderImage">
<a href=" Alamat Posting Anda"><img style="width:550px;height:200px;" src=" Alamat Gambar Anda" />
<span> Isi Artikel Anda </span></a>
</li>

<li class="s3sliderImage">
<a href=" Alamat Posting Anda"><img style="width:550px;height:200px;" src=" Alamat Gambar And" />
<span> Isi Artikel Anda</span></a>
</li>

</ul>
</div>

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

5. Simpan Template

Semoga bermanfaat