Home » Tutorial Blog » Cara Membuat Slide Show 3D di Blog (HTML 5)

Cara Membuat Slide Show 3D di Blog (HTML 5)

Posted on Jan 21, 2013

Slide Show 3D -Blog Netfori

Oke kali ini saya akan share cara membuat slide show dengan menggunakan pengembangan dari HTML 5. Slide Show ini berjenis 3D. Memberikan kesan berbeda dari slide show lainnya. Untuk Demonya silahkan lihat web di bawah ini:
Slide Show 3D -Blog Netfori
Bagi yang tertarik, berikut langkah-langkahnya:

1. Seperti biasa masuk ke akun blog anda.
2. Masuk ke Template => Edit HTML => Expand Widget
3. Cari <head>, lalu masukkan kode dibawah ini tepat di bawah kode <head>

<link href="http://www.script-tutorials.com/demos/252/css/main.css" rel="stylesheet" type="text/css" /> <script src="http://yourjavascript.com/24175431111/script.js"></script>
 4. Setelah selesai masukkan kode berikut tepat di bawah kode <body> 
<canvas id="slideshow" width="1500" height="500"></canvas>
5. Simpan Template, selesai.

Tutorial ini memang sangat mudah, tetapi memberikan hasil maksimal. Untuk gambar yang ingin dirubah, masih harus mengganti java scriptnya terlebih dahulu. Tidak bisa langsung lewat Edit HTML. Bila sobat ingin/dapat mengembangkan lebih lanjut, sangat dianjurkan. Terimakasih.
Di-edit, diterjemahkan, dan dikembangkan oleh "Blog Netfori"dari "script-tutorials.com".

Artikel Terkait :



Bagi yang merasa artikel ini menarik, dan ingin menyebarluaskannya dimohon bagi siapa pun yang ingin mengutip diwajibkan untuk mencantumkan kode link di bawah ini. Hargailah karya cipta orang lain. Terimakasih.


Posted by Labels:

35 comments:

  1. HanifJanuary 21, 2013 at 5:52 PM

    heheh itu penulisan alamat js-nya salah loh sob -_- tau gak sob cara nyimpen file js/css jadi kayak gitu

    ReplyDelete
  2. AdityaReinaldoJanuary 21, 2013 at 6:12 PM

    Thx tutornya ya sob :)

    ReplyDelete
  3. rahmatJanuary 21, 2013 at 9:30 PM

    @HanifSebenarnya sudah saya uploud sejak pertama mau buat tutornya tapi karena tadi sempat kesusu (tergesa-gesa) jadinya ada yang salah. Oke sekarang sudah benar kembali.

    ReplyDelete
  4. Rudi TheaJanuary 22, 2013 at 3:21 AM

    wah keren juga tuh" tapi berat gak ma ???
    terimaksih telah berkunjung ke imelda entertainment,

    ReplyDelete
  5. UnknownJanuary 22, 2013 at 1:30 PM

    keren

    ReplyDelete
  6. Luhurfatah10 BlogzJanuary 22, 2013 at 4:01 PM

    wew...keren sipp

    ReplyDelete
  7. Mas AdhieJanuary 22, 2013 at 5:54 PM

    Ternyata cara buatnya cukup simpel yah gan :)

    ReplyDelete
  8. Free Blogger TemplatesJanuary 22, 2013 at 5:56 PM

    Makasih gan buat tutorialnya. Btw, kalau pengen download template Blogger bisa di Blog saya

    ReplyDelete
  9. rahmatJanuary 22, 2013 at 9:24 PM

    @AdityaReinaldooke sama-sama

    ReplyDelete
  10. rahmatJanuary 22, 2013 at 9:25 PM

    @Rudi theaJelas bikin berat sob. Bila lebih jelasnya bisa lihat demonya.

    ReplyDelete
  11. rahmatJanuary 22, 2013 at 9:25 PM

    @Fairuz AbdussalamOke sama-sama

    ReplyDelete
  12. rahmatJanuary 22, 2013 at 9:26 PM

    @Luhurfatah10 Blogzterimakasih

    ReplyDelete
  13. rahmatJanuary 22, 2013 at 9:26 PM

    @Mas Adhiememang sob, tapi kode javascriptnya yang rumit setengah mati...

    ReplyDelete
  14. rahmatJanuary 22, 2013 at 9:28 PM

    @Free Blogger TemplatesOke sama-sama, tapi ini templatenya sudah saya fix kan aja. Btw makasih referensi templatenya...

    ReplyDelete
  15. MiftahJanuary 22, 2013 at 11:50 PM

    Mantap sekali artikelnya gan. Terima kasih atas ulasannya. Semoga bermanfaat juga buat pembaca yang lain !

    ReplyDelete
  16. rahmatJanuary 23, 2013 at 11:58 AM

    @Miftahsama-sama sob

    ReplyDelete
  17. info bagus fakta bagusJanuary 23, 2013 at 2:48 PM

    mantab. ijin mengutip

    ReplyDelete
  18. rahmatJanuary 23, 2013 at 2:53 PM

    @info bagus fakta bagusOke sob, tapi jangan lupa kasih sumber linknya.

    ReplyDelete
  19. Achsan MassiveBjnJanuary 23, 2013 at 6:07 PM

    kunjungan perdana sobat, sambil baca2 :)
    visit n koment back y dblogq :)
    skalian follow blogq y nanti ak folback

    ReplyDelete
  20. rahmatJanuary 23, 2013 at 7:15 PM

    @Achsan MassiveBjnOke siap sob.

    ReplyDelete
  21. Arief Setyo NurcahyoJanuary 23, 2013 at 7:37 PM

    wah, keren banget nih isinya.., keep posting gan!

    ReplyDelete
  22. rahmatJanuary 23, 2013 at 7:52 PM

    @Arief Setyo NurcahyoOke thenk sob.

    ReplyDelete
  23. Nurul AnnisaJanuary 24, 2013 at 6:10 PM

    blogwalking hakam :)

    ReplyDelete
  24. UnknownJanuary 25, 2013 at 12:13 PM

    kam cara mbuat menu drop downnya gmn? (Ica *numpang blog orang*)

    ReplyDelete
  25. Selvia Zuni MurningsihJanuary 26, 2013 at 1:07 PM

    makasih banyak ya sob, pengetahuannya bermanfaat sekali :)

    ReplyDelete
  26. rahmatJanuary 26, 2013 at 8:18 PM

    @Selvia Zuni MurningsihTerimakasih.

    ReplyDelete
  27. Wisnu WardhanaMarch 11, 2013 at 5:19 PM

    Thanks mas....

    ReplyDelete
  28. minicab in w2March 21, 2013 at 5:24 PM

    Very nice post. I just stumbled upon your blog and wanted to say that I have really enjoyed browsing your blog posts.Pakistani Shadi

    ReplyDelete
  29. Sadhana SentosaApril 13, 2013 at 9:35 PM

    Info yang bagus Bro...

    ReplyDelete
  30. Raden SyaifudinApril 22, 2013 at 6:44 AM

    cara ganti gambar mlik sendiri gimana gan ?

    ReplyDelete
  31. rahmatApril 30, 2013 at 4:30 PM

    @Rhobelt Chynza=boleh -lah jadi masukan, sebisa mungkin saya kan mengabulkan request sobat. Tetapi jangan terlalu berharap ya..

    @syaif oudin=ubah kode JSnya, di situ terdapat link gambarnya. Tinggal di ganti sesuai keinginan sobat.

    ReplyDelete
  32. sigmaMay 8, 2013 at 7:25 AM

    keren sob slide shownya tapi sayang bikin berat loadingnya ya ..

    ReplyDelete
  33. rinal purbaMay 12, 2013 at 9:57 PM

    mantap

    ReplyDelete
  34. SunandarMay 14, 2013 at 4:15 PM

    boleh tuh gan :)

    ReplyDelete
  35. Yoyo SuharyoMay 22, 2013 at 6:08 PM

    wah keren gan, tenkyu.. :)

    ReplyDelete