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...


    Author : Zainoel Arifin Isa'i

    Ketika aku tidak nongkrong di warung kopi atau menyusuri hutan atau juga mendaki gunung, aku sibuk menjadi tukang desain lepas/ freelance yang bermarkas di sudut ruang kamar belakang rumah di daerah pelosok desa terpencil lereng gunung Arjuno.... Facebook : -Mbah Djojo-

    48 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. PERINTAH.A AGAR FOTO YANG SLIDE SHOW TERACAK BAGAIMANA ?

      ReplyDelete
      Replies
      1. Begini cara menulis komentar yang baik "Perintah agar foto yang slide show TERACAK bagaimana ?" dan aku sudah dengan jelas menbacanya...

        Delete
    5. Saya berencana membuat blog yang berisikan komik strip. Jadi, sepertinya artikel ini cocok buat saya. Pertanyaan saya adalah bagaimana membuat slidernya berpindah secara manual, misalnya dengan menambahkan tombol previous/next di sisi kiri-kanan tiap gambar, alih-alih membuatnya berjalan otomatis?

      ReplyDelete
    6. 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
    7. 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
    8. keren kayanya kalau di pasang, saya coba dulu gan

      ReplyDelete
    9. 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
    10. This comment has been removed by the author.

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

      ReplyDelete
    12. mantap tipsnya gan. salam sukses selalu.

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

      ReplyDelete
    14. Bagus Infonya Gan.. Trims yah:

      untuk Informasi Gan, yang mau liburan ke Belitung, Kontak Ane yah :D

      Travel Belitungku adalah Portal Informasi Wisata di Pulau Belitung. Anda bisa mendapatkan berbagai seputar Info Wisata Belitung, seperti: Objek Wisata di Belitung, meliputi: Wisata bahari Belitung, Wisata Alam di Belitung, Wisata Sejarah di Belitung, Wisata Religi di Belitung, Wisata Agrowisata Belitung, Wisata Ekologi di Belitung, Ekowisata di Belitung, Wisata Kuliner di Belitung, Wisata Minat Khusus di Belitung( Diving, Snorkling, Junggle Trekking, Outbond, Flying Fox). Dan Direktori Informasi Wisata Pulau Belitung, meliputi: Akomodasi (Hotel, Penginapan, Homestay), Transportasi (Sewa Mobil, Motor, Bus di Belitung), Tempat Makan di Belitung, Agen Travel di Belitung, Kesehatan, Entertainment/ Hiburan, Ekspedisi, Souvenir, Sanggar Seni di Belitung.

      ReplyDelete
    15. coba kang Tq Infonya

      http://www.matarakyat.net/

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

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

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

      ReplyDelete
    19. sukses.. thanx infonya gan..

      www.jacket27.com

      ReplyDelete
    20. 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
    21. Ga ada navigasinya ya mas, tombol next dan back gitu?
      Komentar balik ya :)

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

      ReplyDelete
    23. http://freefublication.blogspot.com/2015/01/membuat-free-backlink-otomatis.html

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


      http://goo.gl/4NuXkM

      ReplyDelete
    25. 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
    26. mampir kang http://plafon-dekor.blogspot.com/p/sarung-kursi.html

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

      ReplyDelete
    28. 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
    29. terimakasih banyak sob, sangat membantu sekali tutorialnya..

      ReplyDelete
    30. Ini lebih rapih, terima kasih, langsung tkp

      ReplyDelete
    31. 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
    32. Assalamu'alaikum... Makasih... dah dicopas... Salam Koperasi

      ReplyDelete
    33. wah mantap mas , terimkasih slideshownya jalan

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

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

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

      ReplyDelete

    Berkomentarlah yang bijak, iklan/spam langsung dihapus