Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Slider Photo Dengan Tombol Play & Pause

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

67 komentar untuk "Membuat Slider Photo Dengan Tombol Play & Pause"

  1. Mau tanya dong...apa kebanyakan foto akan mempengaruhi blog jadi lambat? Trimakasih sebelumnya ya...Btw blog nya meriah, euy! Apa terima pesanan disain blog?

    BalasHapus
  2. izin simak ya admin buat artikelnya, postingan yg bermanfaat sekali. terimakasih atas informasinya sangat bermanfaat.

    BalasHapus
  3. Wah, yg hobi fotografi harus nyuba nih ;;)

    BalasHapus
  4. makasih buat informasinya^^ sangat bermanfaat :)) sukses ya

    BalasHapus
  5. selamat pagi pak,mohon nyimak updateannya...semoga semua jadi berkah...amiin~

    BalasHapus
  6. cocok nih buat blog saya yang lagi dibuat

    BalasHapus
  7. Wah, ternyata bisa ditambah tombol pause juga ya? :D

    BalasHapus
  8. terima kasih gan atas infonya nich

    BalasHapus
  9. izin nyimak gan
    Postingan yang bermanfaat sekali
    Sukses selalu gan

    BalasHapus
  10. ooh.. ok terimakasih atas informasinya sangat bermanfaat

    BalasHapus
  11. Thanks, we appreciate your articles. Good day! DB Product Review

    BalasHapus
  12. Selamat Pagi ! hari ini sudah memasuki bulan rajab yaah ?? :) semoga kita semua bisa menjadi insan yang lebih baik lagi yaah... Dan untuk informasinya kali ini saya ucapkan terimakasih dan jangan bosan-bosan buat ngeposting informasi yang lebih menarik lagi. Ditunggu

    BalasHapus
  13. Bagaimana kabarnya hari ini ?? Tetep semangat yah buat ngejalanin hari-harinya, semoga puasanya lancar sampai magrib hehe

    BalasHapus
  14. artikel yang bagus bang,
    mampir juga yaahh . .

    http://zaunikon.blogspot.com/

    baru newbie :D

    BalasHapus
  15. Selamat paagi menjelang siang semuanya !! Huhah hari ini slah satu dari temenku udah gag disni lagi, dia udah pindah Huft.. Ahehehe,, tapi tetep semagat yaakh buat ngejalanin hari-hari ini dengan semaksimal mungkin, dan harus lebiih optimis dan lebih baaik lagi okaaay :D

    BalasHapus
  16. hardiknas harotda bullshit

    Stiap tgl 2 mei smua pns baik itu guru maupun non guru diprintah apel.

    Dulu ketika presiden suharto pns non guru masih ikut serta merayakan hardiknas. Namun ketika guru guru sudah mendapatkan sertifikasi dan kurang lebih menerima 50 juta per tahun, apakah perlu pns non guru mengikuti hardiknas.

    Begitu pula hari otoda, setelah otoda di implementasikan lebih kurang dua dekade yang mendapat untung hanya bupati beserta wakilnya forpimda dan orang orang yang bisa mengakses kekuasaan. Belum lagi penerapan remunerasi yang pilih kasih dan lebih banyak diberikan kepada pns pusat.

    Jadi hal hal tersebut perlu disuarakan agar semua merasa diperhatikan sama dan tidak ada diskriminasi.

    BalasHapus
  17. mia phone sex 085856102254

    BalasHapus
  18. Nice artikel...
    Untuk lebih banyak seluk beluk berbelanja online cek Katalog Informasi Online Shop Indonesia

    BalasHapus
  19. Makasih banyak gan infonya..
    makin jaya terus
    Berita dan Info Unik

    BalasHapus
  20. terimakasih atas sajian informasinya, salam sehat :)

    BalasHapus
  21. bade nyobian ah di bumi kangge website abi, nuhun juragan elmu na

    BalasHapus
  22. Wah, boleh tuh di coba,, ide ide kreatif kaya gini jarang ane temuin... :D

    BalasHapus
  23. Terimakaasih banyak atas informasinya :)

    BalasHapus
  24. thanks gan buat infonya sangat bagus sekali,, bermanfaat sekali

    BalasHapus
  25. lah in dia artikel yg saya cari txs sob

    BalasHapus
  26. infonya sangat bermanfaat sekali gan, makasih. beritanya bagus dan sangat menarik sekali untuk di baca.

    BalasHapus
  27. Teriamakasih infonya. semoga bermanfaat buat kita semua. salam sehat!! Informasinya sangat menarik sekali.

    BalasHapus
  28. semoga dapat ebrmanfaat dan menjadi inspirasi.. terima kasih ya gan infonya semoga makin jaya..

    BalasHapus
  29. semoga dapat bermanfaat buat kita semua. Amin . . . . artikelntya sangat bagus sekali. Senang sekali berkunjung ke website anda.

    BalasHapus
  30. Terimakasih atas informasinya :) semoga sukses slalu .. Ditunggu informasi menarik selanjutnya :) senang berkunjung ke website anda, terimakasih.

    BalasHapus
  31. semoga dapat bermanfaat buat kita semua. Amin . . . . artikelntya sangat bagus sekali. Senang sekali berkunjung ke website anda.

    BalasHapus
  32. Saya senang gan dapet liat web ini. web ini bermanfaat banget, makasih ya gan semoga terus emangat menulis artikel yang bermanfaat.

    BalasHapus
  33. semoga dapat ebrmanfaat dan menjadi inspirasi.. terima kasih ya gan infonya semoga makin jaya..

    BalasHapus
  34. Semoga dapat bermanfaat dan menambah inspirasi bagi yang membaca artikel ini .

    BalasHapus
  35. teirma kasih banyak karena sudah berbagi berita yang sangat menarik. terima kasih banyak atas beritanya.

    BalasHapus
  36. makasih gan :)
    http://blog-medianet.blogspot.com/

    BalasHapus
  37. waw,, panjang banget gan,,, boleh dicoba nih,,,,

    BalasHapus
  38. salam sehat:
    http://goo.gl/H4eQYz

    BalasHapus
  39. walah.. ternyata gak gampang toh!

    BalasHapus
  40. perlu diperhatikan secara seksama

    BalasHapus
  41. Lumayan ribet.. hehe, tapi seru... coba terusss sampe berhasilll :)

    BalasHapus
  42. kaka, kalo kaya gitu berat untuk websitennya ga sih?? mohon infonya

    BalasHapus
  43. ini baru jalan keluarnya untuk membuat slider foto, thx bro

    BalasHapus
  44. Nice and very helpful information i have got from your post. Even your whole blog is full of interesting information which is the great sign of a great blogger.

    Toshiba - Satellite 15.6" Laptop - 8GB Memory - 750GB Hard Drive - Mercury Silver

    Toshiba - Satellite 15.6" Laptop - 4GB Memory - 500GB Hard Drive - Satin Black (C55A5243NR)

    BalasHapus
  45. mkasih gan saran nya berhasil.

    Salam Kenal Dari Kami galeri-obat.com Menjual Aneka Produk Kesehatan Pria Dan Wanita Terlengkap Dan Terlaris.

    Obat Pembesar Penis

    Jual Obat Pembesar Penis

    Obat Pembesar Penis Alami

    Obat Pembesar Penis Permanen

    Obat Pembesar Penis Herbal

    Vimax

    Vimax Asli Canada

    Agen Resmi Vimax

    Vimax Asli

    Vimax Pills

    ----------------------------------------------------

    Obat Pembesar Penis KLG

    Jual Obat Pembesar Penis KLG

    KLG Herbal

    Pembesar Penis KLG

    ------------------------------------------------

    Obat Pembesar Alat Kelamin Pria

    Neosize xl

    Jual Neosize xl

    Jual Neosize xl asli

    --------------------------------------------

    Obat Pembesar Alat Vital Pria

    Vigrx Plus

    Jual Vigrx Plus

    Vigrx Plus Original

    BalasHapus
  46. oke gan maksih banyak atas info nya.
    saya akan mencoba nya

    BalasHapus
  47. i ini di letak di mana ya ?

    BalasHapus
  48. Great web site you have here.. It’s difficult to find excellent writing like yours nowadays. I truly appreciate people like you! Take careObat Penyakit Asam Urat | Obat Asam Urat| Cara Terbaru Untuk Menjinakan Penyakit Darah Tinggi

    BalasHapus
  49. http://ramuansehatalami.com/ace-maxs/
    http://ramuansehatalami.com/jian-xin-capsule/
    http://ramuansehatalami.com/pengobatan-radang-sendi/
    http://ramuansehatalami.com/pengobatan-kanker-kulit/
    http://ramuansehatalami.com/
    http://ramuansehatalami.com/jelly-gamat-gold-g/
    http://ramuansehatalami.com/brain-care-capsule/
    http://ramuansehatalami.com/breast-care-capsule/
    http://ramuansehatalami.com/glucoblock-capsule/
    http://ramuansehatalami.com/vig-power-capsule/

    BalasHapus

Berlangganan via Email