03 March 2014

Membuat Slide Show Gambar di Halaman Posting Blogger

Slide show bisa digunakan untuk menampilkan banyak foto tanpa menyita banyak space, karena foto akan diputar layaknya sebuah video, sehingga lebih menarik dan hemat tempat pada halaman posting blog atau website.

Slide show ini bisa digunakan untuk menampilkan atau memajang foto-foto produk misalnya pada toko online, Sales letter, Mini site dan sejenisnya.

Cara untuk membuat slide show ini sangat mudah, kita tinggal menyiapkan foto yang sudah diupload pada file hosting, seperti Picasa, Photobucket, Flickr, dll. Atau cara yang sederhana kita bisa memanfaatkan posting blogger untuk mengupload dan otomatis gambar kita akan tersimpan pada Picasa.


Langkah membuatnya sebagai berikut;
  • Login ke blogger
  • Pilih Entri Baru 
  • Beri judul halaman dan ketik konten artikel
  • Pilih mode HTML
  • Masukan kode HTML berikut ini:

<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
   position: relative;
   width: 100%;
   height: 250px;
   overflow: hidden;
   margin:0 auto;
}
#content-slider img {
   display: block;
   width: 100%;
   height: 250px;
}
</style>
<div id="content-slider">
<img src="URL Foto 1" />
<img src="URL Foto 2" />
<img src="URL Foto 3" />
<img src="URL Foto 4" />
</div> 

  • Ganti URL Foto 1 dengan URL foto yang sudah di upload
  • Kita bisa juga menyesuaikan tinggi foto (height) dan lebarnya.
  • Kita bisa menambahkan atau menampilkan foto lebih banyak lagi dengan menambahkan kode sama seperti <img src="URL Foto 4" /> dan seterusnya.
  • Simpan jika sudah selesai. 

Demikian Cara Membuat Slide Show Gambar di Halaman Posting Blogger..
Monggo di sekecaaken...


    Pengelola Blog

    Zainoel Arifin Isa'i : Penulis Blog. Ketika aku tidak nongkrong di warung kopi atau menyusuri hutan atau juga mendaki gunung, aku sibuk menjadi tukang desain lepas yang bermarkas di sudut kamar belakang rumah di daerah pelosok desa terpencil lereng Gunung Arjuno.
    Machfudz Arif : Teknisi Blog. Pekerjaan sebagai Web and Mobile App Developer yang bermarkas di Lembah Tlogo Krabyaan di sebuah dusun yang dikelilingi perbukitan nan elok dan berudara segar.

    49 comments:

    1. coba dulu kang
      mampir ke blog ane kang
      http://cholisvan.blogspot.com/

      ReplyDelete
    2. izin lagi gan ! sukses slalu tuk agan

      ReplyDelete
    3. Kalau boleh tanya, slide yang sobat paparkan berat ngak ya loadingnya, sebab jika berat tentu akan menggangu kinerja blog secara keseluruhan. Terima kasih sebelumnya dan salam kenal

      ReplyDelete
    4. mas bisa pesen pake panah ?
      jangan auto pindah gambar sendiri , manual aja pngen pake panah hehe

      ReplyDelete
      Replies
      1. googling dg kata kunci "jQuery Cycle" sampeyan akan tau banyak tentang slideshow

        Delete
    5. klo pake random post gmn ya min....???
      main main ke blog ane...
      TOKO FAST

      ReplyDelete
      Replies
      1. pakai jquery, cara membuatnya sampeyan googling kata kunci "Kode Random Slide"
        pasti aku akan berkunjung, dan terima kasih telah mampir di blog seerhana ini...

        Delete
      2. tengkyu pencerahannya ...

        Delete
    6. keren kayanya kalau di pasang, saya coba dulu gan

      ReplyDelete
    7. kang.. saya seneng nih gaya slide show nya simpel... kaya yang saya harapin.
      Tapi kalau misal mau ganti foto nya dengan sistem klik (ada tombol geser kanan kiri) bisa gak kang.
      Dari tadi nyari scriptnya gak ketemu2 nih... :)

      ReplyDelete
    8. This comment has been removed by the author.

      ReplyDelete
    9. wow gooooooooood top makasih ya mas triknya. pokonya maknyus lah.

      ReplyDelete
    10. bikin load berat tidak ya...tapi bisa diaplikasikan dulu..thx

      ReplyDelete
    11. coba kang Tq Infonya

      http://www.matarakyat.net/

      ReplyDelete
    12. ninggalin jejak dulu. praktek sukses. thanks banyak gan..

      ReplyDelete
    13. gan... tolong liahat blog aku dong.. pemula nih.. tolong sarannya ya.. ilhammansis.blogspot.com saya tunggu ya gan...

      ReplyDelete
    14. Boleh di coba buat blog saya..
      Ditunggu kunjungan balik untuk smuanya di :
      http://miniblogger28.blogspot.com

      ReplyDelete
    15. sukses.. thanx infonya gan..

      www.jacket27.com

      ReplyDelete
    16. ikut menyimak artikel http://www.belajarcoreldraw.com/2014/03/cara-membuat-slide-show-gambar-di.html . pertama salam kenal dari saya.
      dan salam suksek untuk kita semua para bloger

      ReplyDelete
    17. Ga ada navigasinya ya mas, tombol next dan back gitu?
      Komentar balik ya :)

      ReplyDelete
    18. Terimakasih sobat, postingan anda cukup membantu dah saya coba di blog saya end berhasil...

      ReplyDelete
    19. makasih banyak gan buat ilmunya, snagat bermanfaat.. nice info..


      http://goo.gl/4NuXkM

      ReplyDelete
    20. makasih buat agan blog ini, sebelumnya saya mau nanya gan saya berencana membuat gambar detail produk layaknya kaya di L*zada. disitu mereka menampilkan gambar terus disampingnya ada lagi gambar kecil yang apabila diklik atau diarahkan dengan kursur gambarnya akan berganti agan ada rekomendasi ngak atau jika harus gogling kata kunci apa yang saya cari, mohon pencerahnya gan.

      ReplyDelete
    21. mampir kang http://plafon-dekor.blogspot.com/p/sarung-kursi.html

      ReplyDelete
    22. mampir kang http://plafon-dekor.blogspot.com/p/sarung-kursi.html

      ReplyDelete
    23. Mau tanya: kenapa waktu membuat postingan ke-2 dengan script slideshow yang sama pada blog yang bisa slideshow cuma 1 postingan sedangkan yg 1 mati... mohon pencerahannya

      ReplyDelete
    24. terimakasih banyak sob, sangat membantu sekali tutorialnya..

      ReplyDelete
    25. Rancak bana tulisanmu tapi sayang tak seperti yang aku mau

      Cobalah kau buat script otomatis maksudnya gini, slideshow yang bisa menampilkan seluruh album photo aku didalam postingan blogspot hanya dengan 1 link (misal:http://filckr/albumaku)

      Jadi nggak kayak script kau bagikan itu Coi, kalau seperti itu tanggan aku bisa kriting Coi jika aku ingin menampilkan 100 gambar.

      Kalau kau dah buat script otomatisnya Coi kabari aku

      atau kau ada inpo lain kasih tau juo Awak

      Salam blogger Coi

      ReplyDelete
      Replies
      1. kalau cuma itu ma mudah saja, daftar saja di Flickr atau di Picasa, upload foto ente sebanyak ente mau coi dan cari tau juga di situ untuk buat slideshow, copy codenya (embed) tinggal paste di blog, sudah gitu aja slideshow ente sudah terpasang dg jumlah berapapun foto ente, semoga berhasil coi... wkwk

        Delete
    26. Assalamu'alaikum... Makasih... dah dicopas... Salam Koperasi

      ReplyDelete
    27. wah mantap mas , terimkasih slideshownya jalan

      ReplyDelete
    28. Makasih gan, ane coba deh,
      Mampir juga di http://cibanggalanet.blogspot.co.id/

      ReplyDelete
    29. Makasih gan, ane coba deh,
      Mampir juga di http://cibanggalanet.blogspot.co.id/

      ReplyDelete
    30. kok punya ku nggx bisa ya gan tolong penjelasannya...

      ReplyDelete
    31. punya yang pake tomob ol navigasinya ga?

      ReplyDelete
    32. Terima kasih banyak artikelnya, kunjungi kami

      ReplyDelete
    33. Ok, bagus nih, langsung di praktekin. terimakasih infinya...
      Salam Blog Pendidikan

      ReplyDelete

    Berkomentarlah yang bijak, iklan/spam langsung dihapus