Membuat Efek Loading pada Form Komentar

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..
Berita Lebih Baru Berita Lebih Lama
  • Semar Badranaya
    Profil: https://www.blogger.com/profile/11617415087161101601
    11 Juni, 2013

    Pertamaxxxx kang... se7.. lakukan skala prioritas, jangan sampai tugas utama terhalang blogging. Btw.. makasih tutorialnya dan sudah saya terapkan di blog saya :-bd

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      11 Juni, 2013

      iya sob... walaupun sudah berusaha konsisten, tapi tetap ada hal yang tidak bisa kita tinggalkan.

  • Unknown
    Profil: https://www.blogger.com/profile/06924031831839016175
    11 Juni, 2013

    lah...simple banget, ijin pakai trik nya ya Pak :D

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      11 Juni, 2013

      hehe... saya juga awalnya berfikir ribet, mikirin JS segala :)

    • Anonim
      Profil:
      11 Juni, 2013

      wkwkwk saya kira pake js ternyata cuma tambahin css aja..
      makasih tipsnya kang..
      saya terapin di blog saya dulu hehehe

  • Sinto
    Profil: https://www.blogger.com/profile/08235438206112119920
    11 Juni, 2013

    Mantap

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      11 Juni, 2013

      tengkyu sob :)

  • zigzoor
    Profil: https://www.blogger.com/profile/10438425858295508916
    11 Juni, 2013

    nyobian kang,...nuhun infona.

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      11 Juni, 2013

      surabi haneut aduh akang mangga cobian :D

  • Ivan Mantovani S
    Profil: https://www.blogger.com/profile/16845985319581440823
    11 Juni, 2013

    hihihi :) apik bro..

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      11 Juni, 2013

      ora ngertos mas :) tengkyu sob..

  • Unknown
    Profil: https://www.blogger.com/profile/01593107231222153280
    11 Juni, 2013

    Ijin nyoba kang..

    Terima kasih infonya :)

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      11 Juni, 2013

      moggo sob....

  • Ivan Mantovani S
    Profil: https://www.blogger.com/profile/16845985319581440823
    11 Juni, 2013

    cihuy, berhasil sobb..
    thanksss


    [img]http://img46.imageshack.us/img46/1757/lgt3a06.png[/img]

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      11 Juni, 2013

      congrats deh sob... :-bd

  • Anonim
    Profil:
    12 Juni, 2013

    assiiikk , ilmu nya nambah lagi tntang desain blog , terimakasih kang

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      12 Juni, 2013

      sama2 sob....

  • Anonim
    Profil:
    12 Juni, 2013

    Sudah macam blog Wp saja yah Kang bentuk efek loadingnya :)

    Jarang-jarang ada yang pakai efek dari tutorial Akang ini :D

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      12 Juni, 2013

      kan tutorialnya juga baru dibuat :D

  • Unknown
    Profil: https://www.blogger.com/profile/01918695702499505922
    12 Juni, 2013

    Makin keren pisan tips-tips kang Ismet, euy...jadi pengen buat blog baru buat nerapin semua tips akang.
    Trims sebanyak2nya kang :)

  • Adhy Suryadi
    Profil: https://www.blogger.com/profile/06846144400647921085
    12 Juni, 2013

    Tadinya saya pikir pakai js lagi nih heheehe... nyatanya simple banget kang hehehe
    makasih nih tutornya... mau dicoba ah...

    • Adhy Suryadi
      Profil:https://www.blogger.com/profile/06846144400647921085
      12 Juni, 2013

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

  • Sopala Multapa
    Profil: https://www.blogger.com/profile/17709242066690693656
    12 Juni, 2013

    mantapz kang mantapz

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      12 Juni, 2013

      heheh... tengkyu sob :)

  • Saeful Rahman
    Profil: https://www.blogger.com/profile/12948365880346888770
    12 Juni, 2013

    tambah keren kalau pake ini, ane juga pake. :)

  • Ivan Mantovani S
    Profil: https://www.blogger.com/profile/16845985319581440823
    12 Juni, 2013

    Kang, minta tutor singkat buat permalink itu dong :) di komentar aja hehe :)

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      12 Juni, 2013

      Saya acak2 belum menemukan... markup htmlnya beda sob, kecuali pake komentar hack kaya saya, lebih mudah... mungkin bisa diakali dengan javascript

  • Anonim
    Profil:
    13 Juni, 2013

    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

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      13 Juni, 2013

      saya liat ada ko yang bold..

    • Unknown
      Profil:https://www.blogger.com/profile/17943695039070055752
      13 Juni, 2013

      mungkin permasalahnya pada css reset.. coba tambahkan css ini broo..
      strong,b,dt,th,kbd { font-weight:bold }

  • Anonim
    Profil:
    13 Juni, 2013

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

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      13 Juni, 2013

      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

  • Unknown
    Profil: https://www.blogger.com/profile/05836428459717421193
    14 Juni, 2013

    keren.. ternyata bisa dipake kalo cuma di kolom komen.. tapi kalo komennya langsung muncul :D .

  • Roonaayu
    Profil: https://www.blogger.com/profile/05814444344454735179
    15 Juni, 2013

    ijin nyoba triknya kang :D

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      15 Juni, 2013

      silahkan sob....

  • Tahunet
    Profil: https://www.blogger.com/profile/04288875317605659609
    15 Juni, 2013

    Keren Kang, gak ingin share template Comment yang dipakai ini Kang? ^_^

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      15 Juni, 2013

      hehhee... sorry keblok =D

  • Unknown
    Profil: https://www.blogger.com/profile/02284011263403920462
    15 Juni, 2013

    Wah script nya cuma sebaris, tapi manfaatnya berlapis-lapis. :D

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      15 Juni, 2013

      kaya kueh aja sob.. berapa lapis? ratuuusan :D

  • Bagus Prehantoro
    Profil: https://www.blogger.com/profile/18312072001769262055
    04 Juli, 2013

    ijin pasang sob

  • Anonim
    Profil:
    05 Juli, 2013

    Wah panduannya sederhana tapi dampaknya megunduh hati hehe :)

  • Putra Kefa
    Profil: https://www.blogger.com/profile/06491832303850190323
    21 Juli, 2013

    hai...hai...dapat ilmu lagi nih :) saya kurang ngerti dengan CSS. saya ikutin aja tutornya.Langsung saya coba,thanks Kang Ismet.

  • Anonim
    Profil:
    08 Agustus, 2013

    wew keren kang,infonya bermanfaat nih!

  • AtjehSpace
    Profil: https://www.blogger.com/profile/03802804923861400544
    01 Desember, 2013

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

  • Indrawan Sugiarto
    Profil: https://www.blogger.com/profile/03955077498794467467
    09 Desember, 2013

    saya pasang kang walaupun jarang ada yang komen diblog saya... hehehe

  • Anonim
    Profil:
    09 Januari, 2014

    Wah kebetulan nih saya lagi cari efek loading buat kotak komentar, ga taunya ada disini hehehe. Terima kasih kang

  • Rio Ilham Hadi
    Profil: https://www.blogger.com/profile/15899269101533208721
    23 Januari, 2014

    saya sangat senang jika Kang Ismet follow blog saya
    http://blanter-forever.blogspot.com

  • Unknown
    Profil: https://www.blogger.com/profile/06954991186994756672
    10 Maret, 2014

    wah cara yang cukup simple kang.
    saya coba dulu ah

  • Hena Wirasatya
    Profil: https://www.blogger.com/profile/03203728081175581932
    11 Juni, 2014

    tes

  • Unknown
    Profil: https://www.blogger.com/profile/02543697848199802561
    23 Oktober, 2014

    mantapp ... iizn diangge ahh kang ismet anu guanteng hehe

Tambahkan Komentar
comment url
Terima kasih telah berkomentar di Blog Kang Ismet.
  • Untuk menyisipkan Gambar, Kode, atau Kutipan silahkan klik Tab Sisipkan di atas.
  • Emoji yang bisa digunakan pada komentar :), :D, :( <3, :love dan :top
  • Untuk melihat Komentar yang telah ditambah sisipan kunjungi DEMO
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Klik tombol Salin Kode! lalu paste ke kolom komentar.


image quote pre code
92 Komentar