Membuat Slide Gambar di Blog Dengan JQuery

Minggu, 06 Juni 2010 - - 71

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.

Mr.Mung at 18 November 2010 07.52

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

slam at 23 November 2010 17.28

yap nie keren abis bos....

Mr. Mung at 25 November 2010 05.25

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

SIMAK at 25 November 2010 23.05

mantabssss

yusuf Habibi at 13 Desember 2010 13.02

hasilnya ntar gimana mas ?

Mr. Mung at 13 Desember 2010 19.36

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

WARUENG ONLINE at 15 Desember 2010 08.11

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

Mr. Mung at 17 Desember 2010 17.39

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

slamet at 2 Januari 2011 14.23

makasih pengetahuannya :)

Arya at 11 Januari 2011 11.24

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

red_tyo at 14 Januari 2011 11.50

kalo di joomla bgamana mas

WARUENG ONLINE at 29 Januari 2011 06.43

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

Gt racing at 14 Februari 2011 13.39

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

MANTAB MR MUNG!

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

Mr. Mung at 28 Februari 2011 20.16

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

zealot at 15 Maret 2011 20.28

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

kang-amin at 19 Maret 2011 08.58

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

arta at 19 Maret 2011 13.27

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

Anonim at 21 Maret 2011 17.15

tinggal ditambahkan saja kodenya disampingnya.

Anonim at 26 Maret 2011 15.16

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

Mr. Mung at 28 Maret 2011 05.13

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

J. St Fx arc-ghea at 28 Maret 2011 19.35

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

terimakasih

Anonim at 8 Mei 2011 00.09

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

Mr. Mung at 8 Mei 2011 02.08

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

Mr. Mung at 8 Mei 2011 18.52

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.

Anonim at 9 Mei 2011 04.43

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

Standy-AYAKASHI at 18 Juni 2011 21.13

nuhun kang...

fajar at 5 Juli 2011 16.01

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

Mr. Mung at 5 Juli 2011 17.01

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

yellow at 22 Juli 2011 10.53

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

greenerasi at 29 Juli 2011 19.47

terimakasih ya atas infonya,,bagus banget nih

Adam Anugrah at 1 Agustus 2011 11.01

mau dong templatenya :D

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

Mr.Mung at 19 Agustus 2011 18.48

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

Yogie Soo Yeon at 6 September 2011 04.11

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

Mr.Mung at 9 September 2011 05.49

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

To Pujananting at 11 Oktober 2011 10.28

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

petualang web at 14 Oktober 2011 11.22

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

petualang-web at 14 Oktober 2011 11.23

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

BAYU KURNIAWAN at 30 Oktober 2011 00.45

Jalan@ . . .

SMP NURIS at 30 Oktober 2011 13.03

adek tak bisah ..!

Byyou Pradana at 5 Desember 2011 12.12

bagaimana cara mendapatkan "imgN_ur" dan link letak gambar?

Mr.Mung at 7 Desember 2011 05.22

@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

makasih ilmunya... ^^

fotonya gak bisa keluar..

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

Mr.Mung at 10 Desember 2011 20.44

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

Ruslan Tawari at 11 Februari 2012 13.14

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

Mr.Mung at 12 Februari 2012 17.31

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

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

Ign Soe at 14 Maret 2012 23.20

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.

Yapisma at 15 Maret 2012 19.26

thaks banget bro... hasilnya gue suka

Asih Pujiariani at 18 Maret 2012 12.28

coba ahh...

kirun at 24 Maret 2012 17.59

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

mampir maz,,terimaksih atas pencerahannya,,,,

PII Maluku at 1 Juni 2012 11.39

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

Mr.Mung at 1 Juni 2012 15.50

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

PII Maluku at 2 Juni 2012 13.17

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

jazz Exe at 14 Juni 2012 07.44

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

Mr.Mung at 16 Juni 2012 16.17

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

Makasih nih informasinya sangat berguna sekali gan...

rambut rontok at 14 September 2012 20.25

salam kenal ya gan,,info yang sangat menarik

terimakasih atas tutorialnya

membuat blog at 21 Oktober 2012 20.18

saya coba dulumas...
thanks sudah share

terima kasih tutorialnya gan...

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

Silahkan tinggalkan komentar anda disini dan Terimakasih anda mau menuliskan nama anda.

Koleksi Tutorial Blog

Arsip Blog