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/AVvXsEjYP1aIrYcU6xWd4z_NsBZWZHwyG3n5q4_OUk2OfxMKfrisVTsg7T4ZjEa6_Pt8WVywLr1e99QzNPSq4BaL09ZOqZCln5cAg8zmiacfL25UZyECrhBsGUeej3iJXKHpKQCsfkDangTc3w/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/AVvXsEg2ERAg_dNAP5_CilXtd9gmSrUt354naE4zc4tvGKl0A_4MOTsKOBgaBUAm92TLB5jpaxas971QEXY4GeibGMxXZEmVoRrDL8n9GayzaijRT4Ysx4NEaJV4a_W7CSJaFQHx4dNccVVfIQ/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/AVvXsEgEdMWrtXflVhNQ29XrmOl8vjEIbNf4mFZKrLwLp4FUxnOvdJtGtjxLSiMaL7hs1u63wZdTgPMSOCYFT-Ud0stkk_rxEZHLxN4II-qYNnhgwes0DQyJJMepiS_SOLPSoSqM9kA-afuChaM/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/AVvXsEg9iRUjxve5U4wzFi93kkAPzPYMAxJh9knOUjo8p9O4Sug_QQwBa2vf8GEMGd2_gNR9Jdl_dE4O7KgeVBbiro2htnneJzWVyCh3PvoCnITs9AP4qsNt3Bu60tL1Im7SHb3zLfMYJPnADYI/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/AVvXsEjJPeyHB-AXzSmPetP9Rqo-rdvAMLT55kSN4kSCXlSUG2-jbzZLhXCPD78TuexSSzyKKNIDW2C3uvHJzbyWEiIpWs5ykq_uJUYf-YXlCKe_PgtyAXM2TKNun3n9WYpqmHrCOhBfAEY3Trs/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
Keterangan :
- Perhatikan lebar 540px, silahkan sesuaikan saja dengan lebar post template sobat.
- Lihat tulisan yang berwarna ungu pada kode css-nya, saya gunakan margin-left:-15px karena menyesuaikan dengan demo template yang saya gunakan.
- Kode yang berwarna pink adalah kode url untuk gambar yang sudah sobat upload sebelumnya.
- dan kode dengan tulisan tebal pastinya bisa dimengerti dan jelas saya tulis disitu.
Cukup panjang, semoga berhasil ya !
Tweet
|
Berlangganan artikel terbaru via Email
|
22 comments
banyak bos, kode untuk slider...
mantap \m/
Wah, rasanya agak males jika harus obrak-abrik template lagi.
Ada gak slide show yang otomatis menampilkan postingan kita kyk slide show foto bawaan blogspot?
script ini pernah q buat utk rollng iklan..tp efeknya membuat blog q jd lambat bgt...xoxoxoxo...thanks
@Inspirasi Kecilku Sekedar kalau mau tetep masang dg efek slider...
http://beben-koben.blogspot.com/2010/11/i-finally-got-sliderslideshow-for-my.html
sorry bos MISCAH, spam dikir nih...xixixixi \m/
@Beben : Thanks ya ben, ga nyepam kok blm 10kali..haha
pengen si kk,, tapi takut loading blog jadi lama,, mkanya skrg lgi cari template yg simple" aj..biar loadingnya gk lama, trus pasang slider de..hehe
makasi y kk...
kang saya dah coba n brhasil, tapi posisi sidebar jadi ke bawah, gmn cara'a biar slide sama sidebar kanan sejajar...
hatur nuhun seblumya..
wah keren nih kayaknya...
terima kasih infonya, ijin belajar dan mencoba yak ... salam
aku mau coba satu2 nich, bingung mau nyari dimana, akhirnya nemu disini, thx mas
dijual..
Rapidleech murah.. cm 30rb per bulan..
buat info detailnya klik disini deh..
http://zaxcy.blogspot.com/2010/12/rapidleech-service.html
ooiya.. kunjungi blog.ku jg ya di.
http://zaxcy-software.blogspot.com
or
http://zaxcy.blogspot.com
thx buat yg mau mampir ^^
apakah tidak memberatkan semasa loding blog
ini dia yg aku cari2... thanks sob.. salam kenal...
saya selalu gagal kalau membuat SlideShow gk tau kenapa, padahal sudah bener penempatan scriptnya, btw, seperti pada postingan anda tentang Slide, saya coba kopy paste sesuai urutan, tapi tetep aja nggak mau jalan ..silahkan mampir dan melihat ke blog saya klu ada waktu ( blog ini saya jadikan eksperimen, jadi isi postingannya tidak ada yg menarik)
Salam dan terima kasih..
http://donny-cyberlife.blogspot.com/
agak repot sih kalo harus ganti2 link sendiri... btw ada cara agar artikelnya random ato otomatis tanpa gunta ganti link...???
mohon panduannya...
punya saya kok gak bisa sliding alias ganti2 gambar y?
trs tulisannya jga mepet2...
mohon bantuannya, ni alamatnya
http://trikokmemasak.blogspot.com/, mohon di bantu....
http://liburanmantap.blogspot.com/ om minta bantu cara ngedit slider yang atas gimana?
Mantap Gan Infonya,
Thanks yah
maaf, link yang tulisan tebal itu maksudnya untuk apa? saya masih belum mengerti ._.v
Kebetulan ni script slideshow yang ada di template blog aku tidka jalan, bisa diganti dengan script diatas
terima kasih :)
ok thanks ya atas coding share nya. aku mau cobain.
banyak juga ya codingannya.
Posting Komentar