Membuat Slide Gambar di Blog Dengan JQuery

Demo Membuat Slide Gambar di Blog Dengan JQuery Silahkan anda lihat di http://smpn1klw.sch.id dibawah header ada slide show gambar dengan animasi transisi yang berubah-ubah, dan hasilnya cukup apik juga.

Okey, langsung saja:
  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

koleksi tutorial ini untuk memandu klien MungBisnis.com untuk pengembangan blog mereka.

Wah sumpah keren and menarik bangetz tuh slide show bisa dikasih link juga ych wah transisinya juga lumayan loh, pasti bisa dibuat di Header jga ych bro...aq save dlu ych Mr...Makasih loh Tutorialnya, sukses Mr...

yap nie keren abis bos....

@Saputra: hehe... emang keren,
@salmet: ya, semoga bisa bermanfaat.

bisa kunjungi web http://smpn1klw.sch.id

wah mw tanya ni ukuran buat ngatur tinggi/heightnya d,mana mister???????

@warung: kalau widthnya dirubah secara otomatis heighnta menyesuaikan, tp kalau mau dipaksa ukuran tingginya ya, kasih saja tambahan height:... disebelah width:...

makasih pengetahuannya :)

sip gan....nih aku praktekan....bagus....keren....

kalo di joomla bgamana mas

Ko scripty udah ga jalan lg ya kang...........................

makasih infonya ticher.....bermamfaat skali..!!

Saya Coba dlu ya....
Ada ga yang dengan menunya..?

@red tyo: maaf blm pernah pakai joomla mas..
@warung online: masa si gak jalan? coba cek lagi langkah2nya dan scriptnya.
@gatra: mantabbbb juga... :-D
@blog dede; silahkan di coba semoga bermanfaat.

* kalo untuk tingginya bisa dipertinggi ndak ya pak mas MR. Mung??
* kalo bisa yang diedit yang mana za??

* sbelumnya trimakasih,,
* ilmu anda sangat bermanfaat bagi saya..

waduh udah berhasil tapi tingginya kok gak bisa menyesuaikan dengan lebarnya ya...

width khan untuk mengatur panjangnya ya mas?
kalo height cara ngaturnya gmn?biar lebarnya jg porposional

tinggal ditambahkan saja kodenya disampingnya.

udah tak coba kok g muncul y? cuma ada tex di html di atas banner webku

@anonim: coba di cek lagi kodenya....

* mr mung, tolong dilihat dan beri masukan tentang blog saya ya,,
www.arc-ghea.blogspot.com

terimakasih

Mr.Mung kok slide gambar'y ngga keliatan fungsi'y klu buka di firefox, google chrome dll.
tp bisa keliatan slide'y jika di internet explorer ?
kira'' letak kesalahan'y dimana ya...Thanks

masa si...? coba cek ulang langkah-langkahnya.

Iya, cara ini udh ku terapkan di blog yg lain buat tes''an.
Tp di blog ku yg ini entah kenapa begitu...
Bisa tolong di liat Mr Mung ?
heavenly-story.blogspot.com

keliatanya udah bener dan gk ada masalah koq, saran sy bisa dicoba ulang, dihapus dulu script2nya simpan dan ulangi dari awal, bisa jg di coba dengan memindah hosting penyimpanan javascript slidenya (http://mrmung.googlecode.com/files/coin-slider.min.js) pindah ke hosting punya anda.

Oh ya...?
Oke, Thanks utk saran anda,akan saya coba lagi nanti...

Kang cisa gak kalo gambar slide nya cuma di page utama aja, tapi kalo buka posting slide nya di hilangkan bisa gak... trims...

@fajar: bisa saja, contohnya di www.smpn1klw.sch.id
tutorial sudah pernah sy tulis di tutorial.mr-mung.com

mr, maap, itu upload gambar yang kita inginkan kapan ya?

terimakasih ya atas infonya,,bagus banget nih

Mr Mung adalah salah satu inspirator saya.... Go Success Mister ! :D

@yellow: upload gambarnya sebelum script dipasang di blog, biar gambar sudah sesuai dg keinginan.
@adam: template yg mana mas..?
@Majesty: amiiin.... sekarang tambah maju ya mas bisnisnya?

efect slide nya ada yg lain gk mas ?? kok aku efectnya Kotak2 slide .. :(

@Yogie: coba liat di web demo, sama gak efectnya? kalau efect Coin Slider memang spt itu yg disediakan. :)

mantap mas, sukses tp tampilan gambarnya tidak full, gambarnya tidak bisa menyesuaikan.. mohon sarannya

wah perlu di coba nih kayanya asyik nyoba hal baru
http//:petualang-web.blogspot.com

wah perlu di coba nih kayanya asyik nyoba hal baru makasih tipnya

,,, pas masuk blog ini,,, ane kira facebook,, eh ternyata blog,,, keren bgttt
thanks atas infonya,,, Berkunjung balik ya Download Film Gratis | High Quality - Boxsoffice

bagaimana cara mendapatkan "imgN_ur" dan link letak gambar?

@Byyou: imgNurl: merupakan link tujuan ketika gambar di klik, bisa berisi link menuju posting (caranya klik kanan salah satu posting pilih copy link location),
Link letak gambar: caranya: klik kanan gambar yg ada di internet pilih copy image location.
Untuk alternatif cara mendapatkan link letak gambar bisa anda baca tutorial disini:
http://www.mrmung.com/2010/12/cara-mendapat-hosting-gambar-gratis.html

kalau ada kesempatan tlg mampir ke bloku ya... shanty-shmily.blogspot.com. aq coba praktekin slide fotox tp fotonya gak muncul

@Apriliya: sudah mampir, tp tutorial ini dipraktikan di blog mana? koq gak ada?
kalau masalah foto/ gambar gk muncul, kemungkinanya link lokasi penyimpanan gambarnya masih keliru.

Gimana saya sudah ulang-ulang buat seperti cara diatas tapi tidak bisa.. mohon panduannya ya kirim ke email ruslan.tawari@gmail.com trima kasih..

@Ruslan: panduanya sudah lengkap seperti posting diatas, tinggal ikuti dengan seksama. selamat mencoba semoga berhasil.

trims pak tutorialnya, sy sudah coba,,,, www.grosirherbalsunnah.com

Mantap tutorialnya, lebih mudah dan lebih bagus tampilannya daripada tutorial Jquery yang pernah saya ikuti. Bagi yang belum berhasil, kemungkinan ada langkah yg salah atau kurang tepat dalam copy paste atau menempatkan img url dan link letak gambar.

thaks banget bro... hasilnya gue suka

mantap.,.,
visit back to my blog..

mampir maz,,terimaksih atas pencerahannya,,,,

Mantap.. Klw posisinya di tengah gimana ya. trims.. www.pii-maluku.com

@PII Maluku: maksdnya posisinya ditengah? utk contohnya juga sy letakan di tengah.

iya maksudnya posisi slidenya berada di tengah. klw yg sudah saya terapkan posisinya berada di sebelah kiri. trima kasih atas pencerahannya. bisa dilihat di www.pii-maluku.com

gan mau tanya?
kalau di buat di forumotion bisa gak ini???
thanks :)

@Jazz: sy blm pernah mencoba, coba saja, kalau berhasil sy kabari ya...? :)

Makasih nih informasinya sangat berguna sekali gan...

salam kenal ya gan,,info yang sangat menarik

saya coba dulumas...
thanks sudah share

ijin mencoba sob...terima kasih sudah berbagi...

[facebook][blogger]

MKRdezign

Formulir Kontak

Nama

Email *

Pesan *

Javascript DisablePlease Enable Javascript To See All Widget

Label