Kali ini saya akan berikan
tutorial cara pasang slidshow di blog. Saya mengambil kode yang paling sederhana dengan menu slidshow yang juga sangat sederhana.
Slidshow
sendiri fungsinya sebagai navigasi link yang biasanya diletakkan
dibawah header, dan selalu menampilkan gambar sebagai pemanis agar
pengunjung tertarik untuk mengklik isi yang dimaksud. Untuk demo saya
gunakan
template gris-amarillo dan meletakkannya di dalam main post, silahkan cek
disini.
Kode css yang akan saya berikan tidak mutlak harus sama, karena setiap
template pasti berbeda terutama dalam tutorial ini adalah lebar kolom
postingan. Untuk demo saya gunakan template yang lebar postingannya
kurang lebih 540px. Buat sobat yang memiliki lebar kolom post lebih atau kurang dari 540px silahkan disesuaikan saja.
- Masuk ke Edit HTML.
- Jangan klik Expand Template Widget karena akan membuat sobat jadi pusing dengan kode yang panjang.
- Copas kode berikut diatas kode ]]></b:skin>
/* SLIDESHOW */
#slider-holder{width:540px;height:300px;overflow:hidden;margin-left:-15px;padding:0}
#s3slider{width:540px;height:300px;position:relative;overflow:hidden}
#s3sliderContent{width:540px;position:absolute;top:0;margin-left:0}
.s3sliderImage{float:left;position:relative;display:none}
.s3sliderImage
span{position:absolute;left:0;font-weight:700;font-size:12px;color:#fff;height:70px;width:540px;background-color:#4e4d3c;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;display:none;bottom:0;padding:10px}
.s3sliderImage span a.featured-title:link,.s3sliderImage span
a.featured-title:visited{color:#FFF;font-size:14px;padding:0 0 2px}
.s3sliderImage span a.featured-title:hover{color:#999}
.s3sliderImage span a:link,.s3sliderImage span a:visited{color:#888}
.s3sliderImage span a:hover{color:#555}
- Kemudian copas kode berikut diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.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() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
- Setelah itu siapkan gambar dan url yang
akan ditampilkan dalam menu slideshow, jika sudah ada gambar dan
url-nya, silahkan sobat copas kode berikut setelah kode <div id='main-wrapper'>
<div id='slider-holder'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage' style='display: list-item;'>
<a href='LETAK LINK DISINI 1'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8alqEIs8GEXskxl6ePyzNOVt7BXZrZbuvSl0MB5W5LaEn65_7s-jP8Ct4SyVTTwykTjco-NhV3c_1kLcQ-IY8xGxmPVb_jEXRFPMYvmYFR3o-DnnfgC5XE6VPtcQaYVLGC4CUkxp-WQ/s1600/2.jpg' style='width: 540px; height: 300px;'/></a>
<span style='display: block;'>
<a class='featured-title block' href='LETAK LINK DISINI 1'>JUDUL POST 1</a><br/>
Isi diskripsi tentang gambar diatas
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 2'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2cO2qM7pOa6nvhoNtSGG4QvXa_EV9QfDicbVRBIX4fbklgNLWxhZ3yVuxym5v-eD0GvpYQSMNgSJPysg8PWQJbH4iXLYl8pEpcS4muJ2EigBtUuRGkfG8Ji8t1fawUlMoujee9_fPrQ/s1600/4.jpg' style='width: 540px; height: 300px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 2'>JUDUL POST 2</a><br/>
Isi diskripsi tentang gambar diatas
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 3'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga5jvj64fwH0WxRDOFWTSQUnQ30i-rJ-sw-Lx5JevizKzUwVsO7CtIbMqvAGdUNhImcZwSusSTqGVtrtPW5OBOQJKEGzW1GlEoLHfDqAIU_Lpcpxj5AjfjNoG4pWmbGQbxjtjNv-71yeM/s1600/2.jpg' style='width: 540px; height: 300px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 3'>JUDUL POST 3</a><br/>
Isi diskripsi tentang gambar diatas
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 4'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ1U5NwjuhU11wMxegDnZr0WXBJ9H73Ka9YG-g5X3kOQueEOkfcZlPq6JLLePXdn3QQqkpp-KpLHAOsoL2X4Jo3ZJozopbchXiOY2Gu0mhTmx1B-Qgn8CogPKeiiqXSOkIttYxwNbVaZM/s1600/3.jpg' style='width: 540px; height: 300px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 4'>JUDUL POST 4</a><br/>
Isi diskripsi tentang gambar diatas
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='LETAK LINK DISINI 5'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Gth5ElX_fG31-jCp3cSjPNrtUUBXqH4i8thqFt0QsOnE5CSDe_PPEsAVMgv3n6wBGzQp3Bd6TyONPeoEXQ-20IzQh8hi5W7JSf0GjMKbW8hNIjV57BzbXSwuhQeU3uOmCt-Ot783bBI/s1600/4.jpg' style='width: 540px; height: 300px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='LETAK LINK DISINI 5'>JUDUL POST 5</a><br/>
Isi diskripsi tentang gambar diatas
</span>
</li>
<li class='clear s3sliderImage'/>
</ul>
</div>
</div>
- Simpan Template
Kode css yang akan saya berikan tidak mutlak harus sama, karena setiap
template pasti berbeda terutama dalam tutorial ini adalah lebar kolom
postingan. Untuk demo saya gunakan template yang lebar postingannya
kurang lebih 540px. Buat sobat yang memiliki lebar kolom post lebih atau kurang dari 540px silahkan disesuaikan saja. 
0 comments:
Post a Comment