Info Penting

Koleksi Tutorial Blogger Lengkap Sistematis disertai Video Tutorial

T utorial blogger di internet sangat banyak pilihannya, anda bisa memilih tutorial mana yang akan anda ikuti dan praktikkan supaya anda b...

Info Penting

Artikel Terbaru

Membuat Slide Show Gambar dengan JQuery di Blogger

28 June 2010 - - 45

Tutorial buat blogger mania, Membuat Slide Show Gambar dengan JQuery di Blogger. Demo Membuat Slide Gambar di Blog Dengan JQuery Silahkan anda lihat di blog sekolah salah satu klien mungbisnis.com disini dibawah header ada slide show gambar dengan animasi transisi yang berubah-ubah, dan hasilnya cukup apik juga.

Okey, langsung saja silahkan anda ikuti tutorial berikut:

  1. Silahkan login dulu ke halaman admin blog anda melalui http://blogger.com/home 
  2. Langsung tuju ke halaman layout atau tata letak, dan klik edit html -template
  3. Beri centang pada expand Template widget
  4. Letakkan kode berikut di atas kode ]]></b:skin>
    /* Coin Slider jQuery plugin CSS styles http://workshop.rs/projects/coin-slider */ .coin-slider { overflow: hidden; zoom: 1; position: relative; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons { font-size: 0px; padding: 10px; float: left; } .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; } .cs-active { background-color: #B8C4CF; color: #FFFFFF; } .cs-title { width: 563px; padding: 10px; background-color: #000000; color: #FFFFFF; } .cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
  5. Letakkan kode dibawah ini diatas kode  </head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&#39;#coin-slider&#39;).coinslider({ width: 563, navigation: false, delay: 5000 }); }); </script>
    Width: 563 : silahkan anda sesuaikan dengan lebar tampilan gambar yang anda inginkan, usahakan gambar sudah di atur ke ukuran yang sesuai, biar tampak manis dilihat.
  6. Simpan, kemudian klik tata letak 
  7. Tambahkan gadget html/java script kemudian copas kode berikut:
      <div id='coin-slider'>

    <a href="imgN_url" target="_blank">
            <img src="link letak gambar" />
            <span>
        Deskripsi gambar......
            </span>
        </a>
       
    <a href="imgN_url" target="_blank">
            <img src="link letak gambar" />
            <span>
        Deskripsi gambar......
            </span>
        </a>

    <a href="imgN_url" target="_blank">
            <img src="link letak gambar" />
            <span>
        Deskripsi gambar......
            </span>
        </a>

    </div>
    Silahkan ganti Link letak gambar dengan lokasi penyimpanan gambar anda.
  8.  Simpan dan silahkan nikmati hasilnya.

45 comments

  1. Makasih tutrialnya Mr. nanti saya coba......

    ReplyDelete
  2. selamat mencoba, semoga berhasil. :-D

    ReplyDelete
  3. Udah saya coba mas dari tutorial mrmung yang kayak facebook.he.he... dan sukses...
    thx

    ReplyDelete
  4. wieeeh bisa nie mas. tapi harus dari web dl (ribet) hehehe
    kalau dari facebook bisa di copy linknya MANTAP nie mas.
    hehehe

    copas ya mas. SEMANGAT dan SUKSES !!!

    ReplyDelete
  5. ya begitulah... :-D
    selamat mengcopas, hehe...

    ReplyDelete
  6. Info menarik mas..makash langsung tkp

    ReplyDelete
  7. Tips yang sangat bermanfaat. Salam ACTION!

    ReplyDelete
  8. wah mantab...mirip plugin nextgen kalau di wordpress ya...

    ReplyDelete
  9. Very nice tips.
    jQuery Coin Slider emang keren banget.
    Bagi terus tipsnya bos :)

    ReplyDelete
  10. trima kasih Mr Mung tutorialnya, sudah saya copas dan berhasil. Sampean memang TOP dah....

    ReplyDelete
  11. Makasih mas buat tipsnya, ,udah lama saya cari code slide image, ,backlink ya mas

    ReplyDelete
  12. Slideshow-nya mantap bos saya sudah coba. Tapi klo memabaca postingan, kok slideshow-nya gak hidden yah? bagaimana cara supaya saat membaca postingan slideshow-nya menjadi hidden..thx

    ReplyDelete
  13. @Kristio: kalau ingin hidden gadget html/javascriptnya harus di tambahi script yg hanya tampil di halaman depan. sudah pernah saya tulis di sini:
    http://tutorial.mr-mung.com/2009/10/widget-in-sidebar-only-show-in-homepage.html

    ReplyDelete
  14. maksih tipsnya... tak cuba dulu bos...!!!

    ReplyDelete
  15. mas kalo gambarnya di klik itu ga ngelink ke urlnya itu gimana y mas??

    ReplyDelete
  16. @Ghost: lho.. masa? yg penting sudah bener setingnya dan sudah diarahkan linknya.

    ReplyDelete
  17. terima kasih sudah mau berbagi tutorialnya

    ReplyDelete
  18. Mas, mau nanya, cara buat slider seperti gambar yg ada disamping blog mas ini gimana yah?

    ReplyDelete
  19. Slam kenal ??
    Tutornya Lengkap, sangat membantu
    aq coba yoo ?

    ReplyDelete
  20. bisa kasi printscreen hasinya ?

    ReplyDelete
  21. @yuda: sudah tak kasih contoh di website sekolah diatas. buka saja di http://www.smpn1klw.sch.id

    ReplyDelete
  22. thanks bos atas tutorialnya

    ReplyDelete
  23. Thanks broer, manfaat sekali artikel ini buat kami.

    ReplyDelete
  24. @yumant: iya, makasih kunjunganya.
    @popo: iya, makasih juga atas kunjunganya.

    ReplyDelete
  25. makasih mas, good pokoke hehe...

    ReplyDelete
  26. terima kasih mas tutorial nya bagus dan dah saya cobain bagus hasilnya. tapi saya pengen random semua gambar isi postingannya gmana ya mas?? terima kasih sebelumnya

    ReplyDelete
  27. Tabrakan javascript_nya dengan "BACK to TOP", terus images "BACK to TOP" nya jadi doble...
    gimana solusinya..?? THX ADVANCE..

    ReplyDelete
  28. @Belly: model slide ini manual mas, bukan otomatis jd ya gk bisa random semua gambar posting.
    @awal: solusi sementara pakai saja salah satu, mau pilih back to top atau pakai slide.

    ReplyDelete
  29. wah,, di blog ane koq ngk sesuai contoh yang di SMPN 1 Kaliwungu ya??? amburadul..

    ReplyDelete
  30. @ms pandu: iya, sama2. semoga bermanfaat.

    ReplyDelete
  31. mas mung .... saya mau tanya ... kan di web smp 1 itu slideshownya waktu loading ada scrolnya biar gambarnya ga keluar2 ke bawah ...

    nah itu cara buat scrol pas loading slidshownya gmn ?

    ReplyDelete
  32. @Mahasiswa Freak: ow, tinggal tambhkan saja kode: <div style="overflow:auto;width:100%;height:290px;padding:0px;border:0px solid #eee">
    sebelum kode:
    <div id='coin-slider'>
    ...

    kemudian tutup dengan kode:
    </div>

    ReplyDelete
  33. makasih mas mung ... mantep deh infonya ...

    ReplyDelete
  34. gimana cara ngatur tinggi gambar? aku nyoba nampilkan gambar memanjang vertikal 160x600 tapi yang ditampilkan cuma separo.

    ReplyDelete
  35. mantab ni tutorial.praktek ahhh

    ReplyDelete
  36. Keren gan tutorialnya... bermanfaat banget....!!!

    ReplyDelete
  37. mas sudah saya coba tips diatas..
    tp koq gmbarnya g muncul ya?

    ReplyDelete
  38. mas mung, mau tanya.
    kalo slidenya itu cuma searah ke kiri saja gimana ya caranya ? biar keliatannya ga random gitu mas

    thx

    ReplyDelete
  39. Perlu di coba neh...
    Salam Sukses and Matur Thangkyu.

    ReplyDelete
  40. @Tommy K: harus bisa edit kode java scriptnya mas.

    ReplyDelete

Info Terbaru

Follow Me

Foto Mr. Mung
ttd Mr. Mung

Tutorial Blogger

Pilih Arsip Blog