Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Membuat Efek Loading pada Form Komentar

Cara membuat efek loading pada formulir kometar blogger / blogspot.
Adding ajax loading effect to blogger comment form - Setelah beberapa hari tidak update postingan, karena beberapa kesibukan, sebut saja peringatan Isra Mi'raj, mengurusi jama'ah Umroh, dll.. bukan karena kehabisan ide postingan :).... Intinya, masukan juga buat sahabat, tetap lakukan 'skala prioritas', karena blogging hanya sambilan saja, walaupun tetap harus konsisten dengan langkah yang telah kita ambil. Kecuali mungkin blogging merupakan prioritas utama bagi sobat.

Saat ini saya mencoba berbagi tutorial yang ringan saja, yaitu cara membuat efek loading pada form komentar. untuk DEMO, silahkan kunjugi Blog Dunia Islam, dan klik tombol 'Balas'... pada komentar, akan terlihat seperti sedang loading.

Apabila ingin menerapkan efek loading pada formulir komentar ini, silahkan ikuti langkah mudahnya :

1. Login ke Blogger
2. Klik Template ► Edit HTML
3. Simpan kode ini di atas ]]></b:skin>
#comment-editor {background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGjgT-WApFhrKDmXtH2rJMLmNZxbVKCktSE7m3s07ww1Rp1VHH_fBuA5A2VnjBA1GwTAHIis0cxsw4pY9LIy54uPJxKiVIc1D-UwFgQWTufV8RAC7cMNJYcuVXGFFip0XfvDrKN6ILO0Gu/s1600/ajax-loader+(2).gif') no-repeat 50% 30%}
4. Simpan Template.

Sebenarnya cara di atas hanya memanipulasi background form komentar, sebelum memunculkan iframe. Apabila sobat ingin mengganti efek loadingnya, silahkan kunjungi Web pembuat efek loading.

Tidak terbatas pada gif animated saja, sobat juga bisa menggantinya dengan icon-spinner dari Font Awesome atau sobat juga bisa membuat efek loading dengan CSS.

Semoga bermanfaat..

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

93 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Pertamaxxxx kang... se7.. lakukan skala prioritas, jangan sampai tugas utama terhalang blogging. Btw.. makasih tutorialnya dan sudah saya terapkan di blog saya :-bd
    1. iya sob... walaupun sudah berusaha konsisten, tapi tetap ada hal yang tidak bisa kita tinggalkan.
  2. lah...simple banget, ijin pakai trik nya ya Pak :D
    1. hehe... saya juga awalnya berfikir ribet, mikirin JS segala :)
    2. wkwkwk saya kira pake js ternyata cuma tambahin css aja..
      makasih tipsnya kang..
      saya terapin di blog saya dulu hehehe
  3. Mantap
    1. tengkyu sob :)
  4. nyobian kang,...nuhun infona.
    1. surabi haneut aduh akang mangga cobian :D
  5. hihihi :) apik bro..
    1. ora ngertos mas :) tengkyu sob..
  6. Ijin nyoba kang..

    Terima kasih infonya :)
    1. moggo sob....
  7. cihuy, berhasil sobb..
    thanksss


    [img]http://img46.imageshack.us/img46/1757/lgt3a06.png[/img]
    1. congrats deh sob... :-bd
  8. assiiikk , ilmu nya nambah lagi tntang desain blog , terimakasih kang
    1. sama2 sob....
  9. Sudah macam blog Wp saja yah Kang bentuk efek loadingnya :)

    Jarang-jarang ada yang pakai efek dari tutorial Akang ini :D
    1. kan tutorialnya juga baru dibuat :D
  10. Makin keren pisan tips-tips kang Ismet, euy...jadi pengen buat blog baru buat nerapin semua tips akang.
    Trims sebanyak2nya kang :)
  11. Tadinya saya pikir pakai js lagi nih heheehe... nyatanya simple banget kang hehehe
    makasih nih tutornya... mau dicoba ah...
    1. Tambahannya kalau ngasih efek scroll pada komentar terbaru gimana kang... saya ngubek2 di dte ga nemu... jadi tidak langsung jleg ke komentarnya... jadi seperti efek scroll ke bawah...
  12. mantapz kang mantapz
    1. heheh... tengkyu sob :)
  13. tambah keren kalau pake ini, ane juga pake. :)
  14. Kang, minta tutor singkat buat permalink itu dong :) di komentar aja hehe :)
    1. Saya acak2 belum menemukan... markup htmlnya beda sob, kecuali pake komentar hack kaya saya, lebih mudah... mungkin bisa diakali dengan javascript
  15. Baru lagi nih Threaded commentnya!
    Mantap |o|
    1. udah lama ko sob :)
  16. mantap2!!!

    oh iya kang, mau tanya sedikit kalau tulisan pada postingan tidak bisa di bold itu kesalahannya terletak dimana ya kang?

    waktu dihalaman edit posting, saya bold tapi waktu dibuka pake browser mozilla nggak ada yang dibold. kalau di versi mobile terlihat tulisan yang di bold.

    mohon bantuannya kang, ini blog saya http://www.princassanova.blogspot.com
    langsung dijawab disana saja kang, terima kasih banyak
    1. saya liat ada ko yang bold..
    2. mungkin permasalahnya pada css reset.. coba tambahkan css ini broo..
      strong,b,dt,th,kbd { font-weight:bold }
  17. sekedar masukan kang..
    navigasi (blog-pager) di halaman utama ga keliatan..
    coba tambahin <div class='clear'/> diatas <div class='blog-pager' id='blog-pager'>
    pasti muncul tuh navigasinya.. :-bd
    soalnya kasian pengunjung kalau ingin melihat postingan lama tapi ga bisa..
    1. tengkyu masukannya sob... selama ini saya ga pernah pake FF, keenakan pake chrome, di chrome normal2 aja... ternyata pas di FF emang ga keliatan.. :-d
  18. keren.. ternyata bisa dipake kalo cuma di kolom komen.. tapi kalo komennya langsung muncul :D .
  19. ijin nyoba triknya kang :D
    1. silahkan sob....
  20. Keren Kang, gak ingin share template Comment yang dipakai ini Kang? ^_^
    1. hehhee... sorry keblok =D
  21. Wah script nya cuma sebaris, tapi manfaatnya berlapis-lapis. :D
    1. kaya kueh aja sob.. berapa lapis? ratuuusan :D
  22. ijin pasang sob
  23. Wah panduannya sederhana tapi dampaknya megunduh hati hehe :)
  24. hai...hai...dapat ilmu lagi nih :) saya kurang ngerti dengan CSS. saya ikutin aja tutornya.Langsung saya coba,thanks Kang Ismet.
  25. wew keren kang,infonya bermanfaat nih!
  26. Kang saya mau nanyak nih,
    kata temen untuk mempercepat loding blog kita tuh katanya kita harus simpan sript blog kita di google code apaa bener kang?
    kalau bener buat dong tutorialnya kang...
    Serius kalau masalah blogger ni sy baru anak kemari sore ngk ngerti apa2...
    di tunggu tanggapannya kang...
  27. saya pasang kang walaupun jarang ada yang komen diblog saya... hehehe
  28. Wah kebetulan nih saya lagi cari efek loading buat kotak komentar, ga taunya ada disini hehehe. Terima kasih kang
  29. saya sangat senang jika Kang Ismet follow blog saya
    http://blanter-forever.blogspot.com
  30. wah cara yang cukup simple kang.
    saya coba dulu ah
  31. tes
  32. mantapp ... iizn diangge ahh kang ismet anu guanteng hehe
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.