Membuat Slider Photo Dengan Tombol Play & Pause

Published by Kurnia Septa Minggu, 13 April 2014

Membuat slider photo atau juga biasa dikenal slide show untuk menampilkan photo di blog dengan otomatis dengan tombol previous, pause/play and next. Slider menjadikan blog lebih menarik. Cocok untuk blog pribadi atau seorang penyuka photografi. Kita dapat menampilan beberapa photo dengan tampilan yang cantik.

Slider Photo bisa dipasang di sidebar blog, atau post. Semisal menampilkan hasil-hasil jepretan setelah liburan ke suatu tempat. Widget ini akan dapat menghemat space, pengunjung blog pun tinggak mengklik tombol previous, pause/play and next untuk menikmati photo-photo yang disuguhkan.

Membuat Slider Photo sangatlah mudah, yang perlu disiapkan adalah photo yang sudah diupload atau host. Selanjutnya untuk membuat atau memasang Slider Photo di blog ikuti-langkah-langkah yang akan Belajar Ngeblog di BLOG sampaikan.

Cara Membuat Slider Photo Dengan Tombol Play & Pause
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<center><script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="https://trickstoo-video-slider.googlecode.com/svn/trickstoo-slider" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#carousel').carouFredSel({
prev: '#prev',
next: '#next',
auto: {
button: '#play',
progress: '#timer',
pauseOnEvent: 'resume'
},
scroll: {
fx: 'fade'
}
});
$('#wrapper').hover(function() {
$('#navi').stop().animate({
bottom: 0
});
}, function() {
$('#navi').stop().animate({
bottom: -60
});
});
});
</script>
<style type="text/css">
#wrapper {
border: 1px solid #ccc;
background-color: #000000;
width: 600px;
height: 400px;
padding: 20px;
margin: 0px 0 0 0px;
position: center;
left: 50%;
top: 50%;
box-shadow: 0 5px 10px #ccc;
}
#inner {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
}
#carousel img {
display: block;
float: left;
}
#navi {
background-color: #333;
background-color: rgba(30, 30, 30, 0.8);
border-top: 1px solid #000;
width: 600px;
height: 70px;
position: absolute;
bottom: -60px;
left: 0;
z-index: 10;
}
#timer {
background-color: #222;
background-color: rgba(20, 20, 20, 0.8);
width: 0;
height: 70px;
position: absolute;
z-index: 20;
top: 0;
left: 0;
}
#prev, #next, #play {
display: block;
position: absolute;
z-index: 30;
}
#prev, #next {
width: 47px;
height: 47px;
top: 13px;
}
#play {
width: 53px;
height: 53px;
top: 10px;
background: url(http://3.bp.blogspot.com/-owTluGE3gWE/UbMLqvzWwrI/AAAAAAAAbCQ/B-1YtXKfxGA/s1600/pause.png) 0 0 no-repeat transparent;
left: 50%;
margin-left: -27px;
}
#play.paused {
background: url(http://4.bp.blogspot.com/-ua3KYxJgPbo/UbMLrGkobfI/AAAAAAAAbCY/aYk7mYc9_gU/s1600/play.png) 0 0 no-repeat transparent;
}
#prev {
background: url(http://2.bp.blogspot.com/-1zqBjDexeWM/UbMLsB10CHI/AAAAAAAAbCo/NgGBnQwiiG0/s1600/prev.png) 0 0 no-repeat transparent;
left: 220px;
}
#next {
background: url(http://1.bp.blogspot.com/-segLuy5FzSQ/UbMLr23sZiI/AAAAAAAAbCg/s_N3Z_qGn18/s1600/next.png) 0 0 no-repeat transparent;
right: 220px;
}
</style>
<div id="wrapper">
<div id="inner">
<div id="carousel">
<img src="IMAGE URL" alt="title" width="600" height="400" border="0" />

<img src="IMAGE URL" alt="title" width="600" height="400" border="0" />

<img src="IMAGE URL" alt="title" width="600" height="400" border="0" />

<img src="IMAGE URL" alt="title" width="600" height="400" border="0" />
</div>
<div id="navi">
<div id="timer"></div>
<a id="prev" href="#"></a>
<a id="play" href="#"></a>
<a id="next" href="#"></a>
</div></div></div></center> 

Kamu bisa mengubah tampilan widget ini, misalnya untuk merubah ukuran dengan mengganti angka 600 dan 400. Jangan lupa ganti IMAGE URL dengan URL photo yang akan ditampilan, dan ganti title dengan judul yang ingin kamu tampilkan.

5. Simpan jika sudah selesai