MEMBUAT SLIDE
SHOW DENGAN TOMBOL PLAY DAN PAUSE
Satu lagi sebuah Tip`s dan
tentunya sudah saya coba dan berhasil makanya saya share yaitu membuat slider
photo atau biasa dikenal slide show adalah untuk menampilkan photo di blog dengan
otomatis secara bergantian photo yang kita inginkan sesuai dengan urutannya,
dengan tombol previous, pause/play and next. Slider menjadikan blog kita lebih
menarik. Cocok untuk blog pribadi atau seorang penyuka photografi dan memajang
photo hasil jepretannya. Kita dapat menampilan beberapa photo dengan tampilan
yang cantik.
Slider Photo dalam blog bisa dipasang di sidebar blog, atau post. Semisal menampilkan hasil koleksi jepretan suatu kegiatan, liburan dan kegiatan lainnya. Widget ini akan dapat menghemat space, pengunjung blog pun tinggal mengklik tombol previous, pause/play and next untuk menikmati photo - photo yang disuguhkan, namun perlu diingat andai photo – photo yang kita panjang adalah koleksi yang tidak boleh di unduh oleh orang lain sebaiknya jangan.
Membuat Slider Photo ini sederhana dan mudah, yang perlu disiapkan adalah photo yang sudah diupload atau host tempat sahabat blogger biasa mengunggah hasil jepretan photo – photonya.
Nah, selanjutnya untuk membuat atau
memasang Slider Photo di blog tersebut ikutilah langkah - langkah berikut ini.
untuk membuat slider photo dengan tombol Play & Pause
untuk 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSYmko4NJM_2SuWwb8mrSjkqpfZnZ8HsY-I67z2gWWgA02EH5HHkr7kHW7uP-89r6DxSrZhHkQf0zAyEbEd1kQJwzTzekUGeMqfBMnxN5wAja0l1a6G8So3F9GiRBsWbUXuBoX_ABXk_E/s1600/pause.png) 0 0 no-repeat transparent; left: 50%; margin-left: -27px; } #play.paused { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjibcdpMlXM70JSss9xZLpt_VgSAthyphenhyphen612KgYa0j9-Uerck-FjCxtwHrySSIulieD6jCn0ADQ70WinEssa5CkJcZ0XpPjtpZaDkyKaNxKbWikRTAtKQXhQUSQXHKc8ysvZb7nn1umyRdhQ/s1600/play.png) 0 0 no-repeat transparent; } #prev { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhZvZfio8vEFO0V4OMgyGir4Q24ULXOL9ViOcy1AZPDMRSOJI864mGXuM8_92VZFPbExvfs6xhI_gyPWzyUcG06G9Amb6Q2NxFwohsb45xGzKIImqU3IIAfBJLr1X7M27-etY6bmU1HkU/s1600/prev.png) 0 0 no-repeat transparent; left: 220px; } #next { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI90wva6aSpAylJ53UOjhm7TO9OnZtWQdHg4vXNtmyh4cTB_iuZmFnyddRT5OOKcuZ-gW8jaYRgHg-GfxvS6-gaiN-MYFVBiRPIxyVc4TYWU3uHvmx64Z3gaUBck3PrWd8ZlYGKip0O0g/s1600/next.png) 0 0 no-repeat transparent; right: 220px; } </style> <div id="wrapper"> <div id="inner"> <div id="carousel"> <img src="URL PHOTO" alt="title" width="600" height="400" border="0" /> <img src="URL PHOTO" alt="title" width="600" height="400" border="0" /> <img src="URL PHOTO" alt="title" width="600" height="400" border="0" /> <img src="URL PHOTO" alt="title" width="600" height="400" border="0" /> <img src="URL PHOTO" 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> |
Sobat blogger bisa mengubah tampilan
widget ini, dengan merubah ukuran dengan mengganti angka 600 dan 400.
Jangan lupa ganti URL PHOTO dengan URL photo yang akan ditampilan, dan
ganti title dengan judul yang ingin kamu tampilkan.
5. Simpan jika sudah selesai
6. Nikmati
hasilnya.
Posting Komentar