Cara Pasang Slidshow di Blogger terbaru
LOADING......
Kali ini aku hendak bagikan bimbingan metode pasang slidshow di web. Aku mengambil kode yang sangat simpel dengan menu slidshow yang pula sangat simpel. Slidshow sendiri gunanya bagaikan navigasi link yang umumnya diletakkan dibawah header, serta senantiasa menunjukkan foto bagaikan pemanis supaya wisatawan tertarik buat mengklik isi yang diartikan.
Kode css yang hendak aku bagikan tidak absolut wajib sama, sebab tiap template tentu berbeda paling utama dalam bimbingan ini merupakan lebar kolom artikel. Buat contoh aku pakai template yang lebar postingannya kurang lebih 540px. Buat sobat yang mempunyai lebar kolom post lebih ataupun kurang dari 540px silahkan disesuaikan saja.
Masuk ke Edit HTML.
- Jangan klik Expand Template Widget sebab hendak 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}- Lalu copas code berikut diatas code </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> - Sesudah itu siapkan gambar dan url yang ingin ditampilkan dalam menu slideshow, jika sudah ada gambar dan url-nya, silahkan kalian kopas kode berikut setelah code <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/AVvXsEhO6BNL2jlwh3PEv9HysY80sX6Ut6daPf2MSvaJkJNCVWo7IX-zVV9ROlxlgP3rY6QSiOA3g5MyrhmNO0W4KmuFX4-FsH5aPt4GydGmtJAW9XZ9gUz-mBS-2NHcV5FeA1F6NoTuxFUNBQ/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/AVvXsEisyNoFAvV0-22gd3Ga7-wYB9m4AYNFT_h8Gx1Mq9nM6vekL6iSjMzZqerzCTGQeRFNpdWHoVBpi1Ejs59CjVrGkxRtLAvKE6W5NJqMSCGpwn_LR5eqGwmGHKsB-dH3R_ishu6wWes0ow/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/AVvXsEgbDW2cLOCuCIdkacWkwNKx1lAbS_Itqd9LW8melaKQRQRcEVf47JmeMK1bupJnsD_40k5cLNCyD0WseCfpjiCnbwITFoIuB99bLnS0CfqH_nLnjKor_ujDE0TLbUaJVTVU6XJXe571buA/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/AVvXsEgNbqCuXJU37evw4BDi-yiBQqgRP74Mtr8EDRU8lWSWq5kDkfkhr7UTGOzl0kAUVtGNUSu-Z22tlnMaWFCxH8B866d52RYFoEtxqPNF08i6AVl_KhAce7-DsrLk-1qxW7b7DJ6NfcvH1J4/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/AVvXsEg_jIYiQH1qVo2cUfc1t0SjrzQpewLqTWR14S08v3OHHZtqRckcIpVhnukc19yt2kM7QspPmIKJi1yeT1cmYH4USC4vWIfcoyzLGR5ywKo6v7qxKYoZOq0cinEvuxBz2Y9B2Ec27tA51ck/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> - save template
- Perhatikan lebar 540px, silahkan sesuaikan saja dengan lebar post template sobat
- Amati tulisan yang bercorak ungu pada kode css- nya, aku pakai margin- left:- 15px sebab membiasakan dengan demo template yang aku pakai.
- Kode yang bercorak pink merupakan kode url buat foto yang telah sobat upload tadinya.
- serta kode dengan tulisan tebal nyatanya dapat dipahami serta jelas aku tulis disana.
mudah- mudahan sukses ya!
No comments