Membuat slide show di Gadget Blogger / Blogspot ternyata sangat mudah bahkan lengkap dengan keterangan atau judul gambar. Memang dulu, sebelum ketemu rumus html ini saya sangat kesulitan. Searching google, buka sana buka sini. Tapi sebagian besar rumus yang ditulis pada tutorial blog kebanyakan tidak berfungsi dengan baik. Dari browsing sana sini itu akhirnya saya dapatkan cara sangat mudah. Bahkan bagi para pemula pun akan sangat mudah membuatnya dengan langkah berikut.
- Silahkan Login Blogger.
- Pastikan ukuran lebar gadgetnya pada blogger / blogspot. Sebagai contoh dalam blog saya ini, ukuran lebar gadget dengan 700px.
- Buka "Template", dan pilih "Edit Html"
- Cari kode "]]></b:skin>" dan salin kode berikut tepat diatasnya.
/* SLIDESHOW */
#slider-holder{width:690px;height:300px;overflow:hidden;margin-left:5px; margin-right:5px; padding:0} #s3slider{width:690px;height:300px;position:relative;overflow:hidden}
#s3sliderContent{width:690px;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:45px;width:690px;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}
(Ukuran lebar gadget silahkan disesuaikan dengan mengganti width dan height)
- Cari kode </head>, selanjunya salin kode berikut tepa diatasnya.
<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>
- Lalu simpan template dan kemudian buka "Tata Letak" dan tambah "Gadget" dengan menambah "HTML/Javascript".
- Salin kode berikut di Gadget HTMLnya.
<div id='slider-holder'>
<div id='s3slider'>
<ul id='s3sliderContent'>
<li class='s3sliderImage' style='display: list-item;'>
<a href='#'><img src='https://farm6.staticflickr.com/5689/20758628175_211d5a40e8.jpg' style='width: 690px; height: 300px;'/></a>
<span style='display: block;'>
<a class='featured-title block' href='#'>KEBUN BUAH MANGUNAN</a><br/>
Bantul
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='#'><img src='https://farm6.staticflickr.com/5689/20570666048_5b9ef1c68b.jpg' style='width: 690px; height: 300px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='#'>TAWANGMANGU</a><br/>
Jawa Tengah
</span>
</li>
<li class='s3sliderImage' style='display: none;'>
<a href='#'><img src='https://farm6.staticflickr.com/5769/20749279252_2b16536a7f.jpg' style='width: 690px; height: 300px;'/></a>
<span style='display: none;'>
<a class='featured-title block' href='#'>TELAGA SARANGAN</a><br/>
Jawa Tengah
</span>
</li>
<li class='clear s3sliderImage'/>
</ul>
</div>
</div>
- Ganti kode dan tulisan merah dengan sesuai keinginan sendiri dan pastinya agar pas di blognya.
- Selesai, simpan Gadgetnya dan silahkan cek dengan lihat blog.
(kode html tersebut saya peroleh dari Maskolis, untuk kunjungi silahkan di www.maskolis.com.
No comments