Membuat Slider Photo Dengan Tombol Play & Pause

photo , slide    Comment   

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

Slider Photo sanggup dipasang di sidebar blog, atau post. Semisal menampilkan hasil-hasil jepretan sehabis liburan ke suatu tempat. Widget ini akan sanggup 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 ialah photo yang sudah diupload atau host. Selanjutnya untuk menciptakan 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 lalu Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan arahan 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmPmBbEnze5oVtj4k6MJNA5cIKpeBoJRPrtIyufXCyBu6EFyPwoJBZH3yxgqZCo0VuMkpBRMrUV0vugwcVi9f5kzdWXEdDVm5puG8I2onr8af-yitX-4WBAL19z-gYvQDAfaCZpAr8QOs/s1600/pause.png) 0 0 no-repeat transparent;
left: 50%;
margin-left: -27px;
}
#play.paused {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTmYbXIGWPmVTg2LGOQ7xmSkVo9P3pdnTDj_He4fcZrsTJt1K7N0ALpDDTAYSxjDI4tV4UiHtXMFmmt8GlUzPn03UR3cDxH44WvaYV2K847DzRX_NEX4UtEaxp3vVmWIx0rBhKOEeo8aw/s1600/play.png) 0 0 no-repeat transparent;
}
#prev {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6WfgIPAMOB5JfRgQfUIpeL21aVBOb1KrdT_3kSxRd66Fu9X-9hVxChQheDsGwKjr-97VhayRwQ4YhKgRlVqizAdknnQ5oQLF7xHEYFWFUleSLVdpCUXIJ2Vm5c9xkVQg7nUjQf__nA64/s1600/prev.png) 0 0 no-repeat transparent;
left: 220px;
}
#next {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNK45Zi5UmMP9wAOnJ2e1InHdZ2o8Ni3SgdkYXCHvvqDn0KNk079LsL7X39oIqmL8mc91TlUtX7vOdO2xF_T8WAhBZcxi0oAaqZXsodlNpmypXsAjfoL0Vx2YISolDbLdOmM8Ey5b2itE/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="Membuat slider photo atau juga biasa dikenal slide show Membuat Slider Photo Dengan Tombol Play & Pause" width="600" height="400" border="0" />

<img src="IMAGE URL" alt="Membuat slider photo atau juga biasa dikenal slide show Membuat Slider Photo Dengan Tombol Play & Pause" width="600" height="400" border="0" />

<img src="IMAGE URL" alt="Membuat slider photo atau juga biasa dikenal slide show Membuat Slider Photo Dengan Tombol Play & Pause" width="600" height="400" border="0" />

<img src="IMAGE URL" alt="Membuat slider photo atau juga biasa dikenal slide show Membuat Slider Photo Dengan Tombol Play & Pause" 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 sanggup mengubah tampilan widget ini, contohnya 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 kau tampilkan.

5. Simpan jikalau sudah tamat
Sumber https://www.kurniasepta.com/