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.
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>
4. Lalu letakkan lagi kode berikut di atas </head>
Ubah angka 3000 itu sesuai keinginan anda.
5. Cari kode <div id='main-wrapper'> Letakkan kode berikut di bawah <div id='main-wrapper'>
Keterangan :
Mudah bukan?? Selamat mencoba dan Semoga bermanfaat. ^_^
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-----*/NB : Sesuaikan width dan heigth dengan ukuran widget yang di ingin kan sesuai dengan lebar ruang kolom/elemen di blogmu.
#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}
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'/>NB : untuk cara mengatur atau setting waktu slide show silakan anda cari kode timeOut: 3000
<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() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
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 != "item"'>
<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>
<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'>
--->> Letaknya di atas kode </ul>
<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>
Mudah bukan?? Selamat mencoba dan Semoga bermanfaat. ^_^