Info Penting

Mapel TIK Kembali Hadir di Kurikulum 2013 dalam Konsep Baru

M ata pelajaran TIK (Teknologi Informasi dan Komunikasi) yang sempat dihilangkan dalam Kurikulum 2013 dan diganti namanya menjadi Bimbing...

Artikel Terbaru

Membuat Slide Gambar di Blog Dengan JQuery

6 Jun 2010 - - 72

Slide Gambar di Blog bisa membuat tampilan blog anda semakin menarik untuk dilihat, slide gambar biasanya diletakkan di bawah header atau di atas posting utama, slide gambar biasanya berisi gambar-gambar unggulan, gambar utama yang mencerminkan isi dari blog tersebut, atau bisa juga diisi dengan gambar dari postingan-postingan unggulan, sehingga jika gambar slide diklik akan terbuka postingan tersebut.

Slide gambar dengan jQuery pada postingan ini juga bisa dimanfaatkan untuk membuat header yang berisi gambar animasi, contohnya bisa dilihat di http://smpn1klw.sch.id gambar pada header berupa slide show gambar dengan animasi transisi yang berubah-ubah.

Okey, langsung saja, mari kita Membuat Slide Gambar di Blog Dengan JQuery:

Langkah #1 
Silahkan login dulu ke halaman admin blog anda melalui http://blogger.com/home

Langkah #2 
Langsung tuju ke halaman tata letak, dan klik edit html

Langkah #3 
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; }

Langkah #4 
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://yourjavascript.com/17531541371/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. Simpan, kemudian klik tata letak  Tambahkan gadget html/java script kemudian copas kode berikut:

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

Silahkan ganti Link letak gambar dengan lokasi penyimpanan gambar anda.

Langkah #5
Simpan dan silahkan nikmati hasilnya.

72 komentar

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

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

    BalasHapus
  3. yap nie keren abis bos....

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

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

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

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

    BalasHapus
  8. makasih pengetahuannya :)

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

    BalasHapus
  10. kalo di joomla bgamana mas

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

    BalasHapus
  12. makasih infonya ticher.....bermamfaat skali..!!

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

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

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

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

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

    BalasHapus
  18. tinggal ditambahkan saja kodenya disampingnya.

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

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

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

    terimakasih

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

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

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

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

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

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

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

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

    BalasHapus
  30. terimakasih ya atas infonya,,bagus banget nih

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

    BalasHapus
  32. @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?

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

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

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

    BalasHapus
    Balasan
    1. sudah sy jelaskan diatas, ada pengaturan ukuran gambar. coba di baca kembali panduan diatas.

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

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

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

    BalasHapus
  39. bagaimana cara mendapatkan "imgN_ur" dan link letak gambar?

    BalasHapus
    Balasan
    1. anda bisa baca di postingan ini: https://www.mrmung.com/2010/12/cara-mendapat-hosting-gambar-gratis.html

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

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

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

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

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

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

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

    BalasHapus
  47. thaks banget bro... hasilnya gue suka

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

    BalasHapus
  49. mampir maz,,terimaksih atas pencerahannya,,,,

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

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

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

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

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

    BalasHapus
  55. Makasih nih informasinya sangat berguna sekali gan...

    BalasHapus
  56. salam kenal ya gan,,info yang sangat menarik

    BalasHapus
  57. saya coba dulumas...
    thanks sudah share

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

    BalasHapus

Follow Me


Iklan

Koleksi Tutorial Blog

Arsip Blog