Membuat Slideshow Gambar Berita di Blog

Apa sih slide show image itu? yaitu sebuah widget yang dapat menampilkan image/gambar secara random. Dimana akan berganti-ganti tergantung dari jumlah gambar dan informasi yang di masukan ke dalamnya.

Jika anda berkunjung ke detik.com, Kompas, ataupun Okezone. Pastinya anda pernah menjumpai sebuah tampilan Slide show Gambar atau foto  berita yang bila di klik pada gambar yang tampil slide show tersebut akan masuk kehalaman postingan yang di targetkan.

Bagi anda yang ingin tau bagaimana cara membuatnya, yuk ikuti langkah berikut ini :
1. Login Ke Bloger
2. Pilih Tata Letak >> EDIT HTML dan jangan lupa back up template anda.
3. Letakkan kode berikut diatas kode ]]></b:skin>

/*-----Slide Show-----*/
#s3slider{height:250px;margin:0px;overflow:hidden;position:relative;width:347px}
#s3sliderContent{margin-left:0;padding:0;position:absolute;top:-14px;width:347px}
.s3sliderImage{display:none;float:left;position:relative}
.s3sliderImage span{-khtml-opacity:0.8;-moz-opacity:0.8;background-color:#000;bottom:0;color:#fff;display:none;filter:alpha(opacity=70);font:11px arial, sans-serif;left:0;opacity:0.8;padding:10px 0;position:absolute;text-align:center;width:347px}
.clear{clear:both}

NB : Sesuaikan width dan heigth dengan ukuran widget yang di ingin kan sesuai dengan lebar ruang kolom/elemen di blogmu.

4. Lalu letakkan lagi kode berikut di atas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(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() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>

NB : untuk cara mengatur atau setting waktu slide show silakan anda cari kode timeOut: 3000
Ubah angka 3000 itu sesuai keinginan anda.

5. Cari kode <div id='main-wrapper'> Letakkan kode berikut di bawah <div id='main-wrapper'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div id='s3slider'>

<ul id='s3sliderContent'>

<li class='s3sliderImage'>
<a href='http://abdu-green.blogspot.com/2012/05/install-dual-boot-windows-dan-ubuntu.html'>
<img height='245' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglNfMoXVM-NVHzzEKBdbD-GUd5EJGHyC2z_06w_q3cItVnYGvwu4xiBFtw4jq9_SQ-F33R2qiVOXDmdA_VGSDy_DkXRoJxnhV2LT53hCnyKRRCi4W_zFXYDjuHRoUEAeRceqhZlaB9GGkU/s1600/windows-linux.jpg' width='347'/>
<span>Panduan lengkap tentang cara untuk mendual boot antara OS Windows 7 dan Ubuntu 12.04</span></a></li>

<li class='s3sliderImage'>

<a href='URL POSTINGAN'>

<img height='245'

src='URL GAMBAR' width='347'/>

<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

<div class='clear s3sliderImage'/>

</ul>

</div>

</b:if>

Keterangan :

• Ganti warna hijau dengan alamat link artikel kamu
• Ganti warna kuning dengan link gambar / foto
• Arti kode width="347" height="245" adalah ukuran dari widget slideshow view, (atur sesuai ukuran widget yang kamu inginkan)
• Ganti warna pink dengan Isi dengan kalimat yang ingin di tampilkan di bawah gambar slideshow.
• Jumlah Slide Show juga bisa anda perbanyak dengan menambahkan kode :
  

  <li class='s3sliderImage'>
  <li><a href="URL POSTINGAN"><img height='245' src="URL GAMBAR" width='468'/> <span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

  --->> Letaknya di atas kode </ul>

6. Setelah semua selesai, Klik Pratinjau untuk melihat previewnya, setelah itu Simpan Template.

Mudah bukan?? Selamat mencoba dan Semoga bermanfaat. ^_^

Sumber :Membuat Slideshow Gambar Berita di Blog