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
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..
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..
Pertamaxxxx kang... se7.. lakukan skala prioritas, jangan sampai tugas utama terhalang blogging. Btw.. makasih tutorialnya dan sudah saya terapkan di blog saya :-bd
iya sob... walaupun sudah berusaha konsisten, tapi tetap ada hal yang tidak bisa kita tinggalkan.
lah...simple banget, ijin pakai trik nya ya Pak :D
hehe... saya juga awalnya berfikir ribet, mikirin JS segala :)
wkwkwk saya kira pake js ternyata cuma tambahin css aja..
makasih tipsnya kang..
saya terapin di blog saya dulu hehehe
Mantap
tengkyu sob :)
nyobian kang,...nuhun infona.
surabi haneut aduh akang mangga cobian :D
hihihi :) apik bro..
ora ngertos mas :) tengkyu sob..
Ijin nyoba kang..
Terima kasih infonya :)
moggo sob....
cihuy, berhasil sobb..
thanksss
[img]http://img46.imageshack.us/img46/1757/lgt3a06.png[/img]
congrats deh sob... :-bd
assiiikk , ilmu nya nambah lagi tntang desain blog , terimakasih kang
sama2 sob....
Sudah macam blog Wp saja yah Kang bentuk efek loadingnya :)
Jarang-jarang ada yang pakai efek dari tutorial Akang ini :D
kan tutorialnya juga baru dibuat :D
Makin keren pisan tips-tips kang Ismet, euy...jadi pengen buat blog baru buat nerapin semua tips akang.
Trims sebanyak2nya kang :)
Tadinya saya pikir pakai js lagi nih heheehe... nyatanya simple banget kang hehehe
makasih nih tutornya... mau dicoba ah...
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...
mantapz kang mantapz
heheh... tengkyu sob :)
tambah keren kalau pake ini, ane juga pake. :)
Kang, minta tutor singkat buat permalink itu dong :) di komentar aja hehe :)
Saya acak2 belum menemukan... markup htmlnya beda sob, kecuali pake komentar hack kaya saya, lebih mudah... mungkin bisa diakali dengan javascript
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
saya liat ada ko yang bold..
mungkin permasalahnya pada css reset.. coba tambahkan css ini broo..
strong,b,dt,th,kbd { font-weight:bold }
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..
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
keren.. ternyata bisa dipake kalo cuma di kolom komen.. tapi kalo komennya langsung muncul :D .
ijin nyoba triknya kang :D
silahkan sob....
Keren Kang, gak ingin share template Comment yang dipakai ini Kang? ^_^
hehhee... sorry keblok =D
Wah script nya cuma sebaris, tapi manfaatnya berlapis-lapis. :D
kaya kueh aja sob.. berapa lapis? ratuuusan :D
ijin pasang sob
Wah panduannya sederhana tapi dampaknya megunduh hati hehe :)
hai...hai...dapat ilmu lagi nih :) saya kurang ngerti dengan CSS. saya ikutin aja tutornya.Langsung saya coba,thanks Kang Ismet.
wew keren kang,infonya bermanfaat nih!
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...
saya pasang kang walaupun jarang ada yang komen diblog saya... hehehe
Wah kebetulan nih saya lagi cari efek loading buat kotak komentar, ga taunya ada disini hehehe. Terima kasih kang
saya sangat senang jika Kang Ismet follow blog saya
http://blanter-forever.blogspot.com
wah cara yang cukup simple kang.
saya coba dulu ah
tes
mantapp ... iizn diangge ahh kang ismet anu guanteng hehe