Membuat Slide Show Gambar dengan JQuery di Blogger

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.

Posting Komentar

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

selamat mencoba, semoga berhasil. :-D

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

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

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

Info menarik mas..makash langsung tkp

Tips yang sangat bermanfaat. Salam ACTION!

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

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

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

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

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

@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

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

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

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

terima kasih sudah mau berbagi tutorialnya

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

Slam kenal ??
Tutornya Lengkap, sangat membantu
aq coba yoo ?

bisa kasi printscreen hasinya ?

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

thanks bos atas tutorialnya

Thanks broer, manfaat sekali artikel ini buat kami.

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

makasih mas, good pokoke hehe...

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

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

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

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

@ms pandu: iya, sama2. semoga bermanfaat.

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 ?

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

makasih mas mung ... mantep deh infonya ...

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

mantab ni tutorial.praktek ahhh

Keren gan tutorialnya... bermanfaat banget....!!!

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

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

thx

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

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

[facebook][blogger]

MKRdezign

Formulir Kontak

Nama

Email *

Pesan *

Javascript DisablePlease Enable Javascript To See All Widget

Label