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

Saat ini saya mencoba berbagi tutorial yang ringan saja, yaitu cara membuat efek loading pada form komentar. Sebagai contoh, ketika sobat mengomentari blog ini, atau ketika mengklik tombol 'Balas'... 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('http://3.bp.blogspot.com/-Id9iv_USm4o/UbU3WLdcYrI/AAAAAAAAANs/gZLU48rPnnw/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..

94 komentar

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

Balas

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

Balas

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

Balas

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

Balas

nyobian kang,...nuhun infona.

Balas

surabi haneut aduh akang mangga cobian :D

Balas

badag munu'u aduh akang ukur sarebu.

Balas

hahaha.... nyambung yeuh :D

Balas

ora ngertos mas :) tengkyu sob..

Balas

kenapa nggak keluar loadingnya ya kang,sudah saya pasang tapi nggak nampak,kmaha tah.

Balas

kayaknya sudah didahului emot sob..

Balas

oh..., hatur nuhun infona, mangga..gejlig tewewew.

Balas

kang maap oot nih, mungkin akang tau cara buat kaya gambar dibawah ini ? :)
[img]http://i.imgur.com/4fUxgmm.png[/img]

Balas

Ijin nyoba kang..

Terima kasih infonya :)

Balas

cihuy, berhasil sobb..
thanksss


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

Balas

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

Balas

sama2 sob... kebanyakan mikirin JS sih :)

Balas

congrats deh sob... :-bd

Balas

maksudnya permalinknya aja atau dari senin 27 dst..?

Balas

kurang atas dikit sob... ga ketutup sama iframe-nya

Balas

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

Balas

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

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

Balas

kan tutorialnya juga baru dibuat :D

Balas

sebenernya kan tanggal yang ada dikomentar udah berbentuk permalink sob

Balas

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

Balas

sama broo.. kirain js, soalnya deskripsinya ada kata ajax yang berbau JS.. ketipeng saya.. wkwkwwkw...
pake base64 ajah dh biar ngurangin http... wkwwkwkw

Balas

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

Balas

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

Balas

Efek loadingna tos dianggo kang hatur nuhun....

Balas

hehehe... ternyata banyak yang ketipu...
btw, sebetulnya bukan untuk komentar terakhir aja kang, tapi semua permalink komentar. Untuk hal ini saya belum menemukan yang pas.. saya baru mencoba http://stackoverflow.com/questions/16534851/
coba cari efek scroll pada hash target kang...

Balas

heheh... tengkyu sob :)

Balas

rojer ganti .. hehe
btw kang ..( kolom komentar akang ) untuk terus membalas koment'y ko jadi makin kecil kolomnya .. tombol tool nya juga jadi acak-acakan.

Balas

dikopi.. dikopi... :)
emang dibuat kaya tangga gini sob..

Balas

wkwkwkwkw.... banyak yang ketipu sob :)

Balas

Ya yang itu saya pernah baca juga...tapi kurang ngerti hehehe...
Nunggu dikomplitin sama kang Ismet ah...

Balas

Nah sekarang scroll-nya lebih bagus kang...

Balas

maksudnya kaya gini sob http://blog.kangismet.net/2013/06/membuat-efek-loading-pada-form-komentar.html?showComment=1371001737210#c862113458659704290 tunggu sampai load selesai :)

Balas

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

Balas

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

Balas

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

Balas

Baru lagi nih Threaded commentnya!
Mantap |o|

Balas

sama kangg saya acak acak tp modar malah modar =(
pke yg kya di blog mu aja deh mas, nanti mau sya acak acak lagi wkwk

Balas

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

Balas

saya liat ada ko yang bold..

Balas

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

Balas

atau hapus kode font-style:normal;font-variant:normal; pada #outer-wrapper

Balas

nanti kalau ketemu di share sob :)

Balas

kalau ga bisa juga coba hapus saja blognya |o|

Balas

wkwkwkwkwkwk... solusi terbaik =D

Balas

nah itu gimana buatnya...
apa itu css target..?? soalnya saya pernah nemu artikel tentang css target di DTE... tapi ga bisa masangnya saya..

Balas

mungkin ganti template solusi terbaik kalau solusi diatas tidak bekerja.. :-bd
masa blognya dihapus..wkwkwkwk

Balas

CSS target sama JS sob.... ini CSSnya
.comment .comment-block:target{border:1px solid yellow}
.comments .comment-thread.inline-thread .comment .comment-block:target{border:1px solid yellow}

ini JSnya :
<script type='text/javascript'>
var jump=function(e)
{
//alert(&#39;here&#39;);
if (e){
//e.preventDefault();
var target = jQuery(this).attr(&quot;href&quot;).replace(&#39;/&#39;, &#39;&#39;);
}else{
var target = location.hash;
}

jQuery(&#39;html,body&#39;).animate(
{
scrollTop: (jQuery(target).offset().top) - 150
},4000,function()
{
//location.hash = target;
});
}
jQuery(document).ready(function($)
{
$(document).on(&#39;click&#39;, &#39;a[href*=#]&#39;, jump);
if (location.hash){
setTimeout(function(){
$(&#39;html, body&#39;).scrollTop(0).show();
jump();
}, 0);
}else{
$(&#39;html, body&#39;).show();
}
});
</script>

Balas

maap kang.nyela,,itu permalink sendiri fungsinya buat apa yha kang..??

Balas

buat mengetahui link komentar.... contoh, misalkan ada yang nanya kenapa setelah pasang script anti link aktif, tombol komentar jadi bermasalah...
saya tidak usah jawab lagi, tinggal saya arahkan ke pertanyaan sobat disini http://blog.kangismet.net/2013/05/menghilangkan-link-aktif-pada-komentar.html?showComment=1369384411580#c6319153242501936832

Balas

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

Balas

Udah bisa nih sob, cuman menciptakan efek smothnya harus nambah ramuan apa lagi ya ?

Balas

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

Balas

tuh.. diatas udah ada :)

Balas

ohh yha udah ngerti kang,,,makasih kang..
tambah ilmu lagi hahahay

Balas

sama2 kang :D
kalau saya selalu buka chrome sama FF jadi bisa langsung tau kalau ada tampilan yg ga beres..
kebiasaan inspect element nih :P
oia kang 1 lagi nih
http://blog.kangismet.net/2013/06/membuat-efek-loading-pada-form-komentar.html?showComment=1371098555289#c5113086015874996619
pada bagian pre > js, kok muncul emoticon? belum diparse ya kang kodenya?

Balas

masalahnya di script emotnya sob... tanpa spasi pun jadi, itulah akibatnya :)

Balas

udah saya hapus kang, berhasil. terima kasih...

Balas

pengennya begitu mas, tapi saat saya hapus muncul pesan "blognya masih bayi udah mau dibunuh saja, kejam. tidak bisa...tidak bisa (expresi ngambek sambil bentur kepala ditembok) wkwkwk

Balas

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

Balas

ijin nyoba triknya kang :D

Balas

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

Balas

hehhee... sorry keblok =D

Balas

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

Balas

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

Balas

Wah panduannya sederhana tapi dampaknya megunduh hati hehe :)

Balas

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

Balas

wew keren kang,infonya bermanfaat nih!

Balas

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

Balas

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

Balas

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

Balas

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

Balas

wah cara yang cukup simple kang.
saya coba dulu ah

Balas

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

Balas

Poskan Komentar


×
Chat