Adding smileys on Blogger Comments - Emoticon / smiley biasanya digunakan untuk menyatakan kondisi, senang, sedih, marah dll. Selain itu juga sebagai pemanis kolom komentar, sehingga tampak lebih hidup.smiley

Sudah puluhan atau mungkin ratusan tutorial tentang cara memasang emotikon pada komentar, tetapi  karena banyaknya permintaan / pertanyaan tentang cara memasang emoticon, akhirnya saya share juga  :)
Dari kode dibawah, ada 12 emoticon yang bisa sobat gunakan :

smileysmileysmileysmiley

Bagi sobat yang ingin menampilkan emotikon pada komentar, silahkan ikuti langkah mudahnya :

1. Simpan kode CSS ini di atas ]]></b:skin>

img.comment_emo {
    height: auto !important;
    vertical-align: middle !important;
    width: auto !important;
    border:0px !important;
}

2. Simpan kode ini di atas </body>

<script type="text/javascript">
//<![CDATA[
/* Blogger Comments Emoticon
 * by Kang Ismet
 * Url:http://blog.kangismet.net
 */
ki = document.getElementById('comment-holder');
if (ki) {
    zx = ki.getElementsByTagName("p");
    for (i = 0; i < zx.length; i++) {
        if (zx.item(i).getAttribute('CLASS') == 'comment-content') {
            ki_emo = zx.item(i).innerHTML.replace(/:\)/gi, "<img src='http://1.bp.blogspot.com/-2Z7Cwe04x-Q/UH9THzWWJII/AAAAAAAACtA/ChwawyzYsDI/s1600/smile1.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/\^_\^/gi, "<img src='http://1.bp.blogspot.com/-IoZJlpB0-dE/UKhVKnR0BDI/AAAAAAAADPo/Kz87N1Aj4X8/s1600/smile.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:-bd/gi, "<img src='http://4.bp.blogspot.com/-hPd-oj2Bzo4/UKhVLkmQjOI/AAAAAAAADPw/3O1iuAukZXg/s1600/thumb.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:-d/gi, "<img src='http://2.bp.blogspot.com/-yElQmFAIiII/UKhVMcObcQI/AAAAAAAADP4/-qdEpW8zCmY/s1600/thumbsup.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/@\@\,/gi, "<img src='http://4.bp.blogspot.com/-w1VfvgO2-e8/UKhVIT7XLhI/AAAAAAAADPQ/cJ0KDjEsoj4/s1600/rolleyes.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/\\o\//gi, "<img src='http://4.bp.blogspot.com/-ip66eq3uRI8/UKhVF-QK8lI/AAAAAAAADO4/P0G-1PcWpQs/s1600/applause.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/=\(/gi, "<img src='http://1.bp.blogspot.com/-7I8DdEs58z0/UKhVKHT1yUI/AAAAAAAADPg/Lyzv-E74EdM/s1600/sadanimated.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:\(/gi, "<img src='http://4.bp.blogspot.com/-yXc7xHs5mXc/UKhVJLBfdaI/AAAAAAAADPY/LJKRsefyeao/s1600/sad.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/\;\)/gi, "<img src='http://3.bp.blogspot.com/-5zPfqshivtY/UKhVONWZnkI/AAAAAAAADQI/iCDxagcaj5s/s1600/wink.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:D/gi, "<img src='http://3.bp.blogspot.com/-WeTjMT8JDhg/UKhVHlZ88II/AAAAAAAADPI/b1gpiAvIkCc/s1600/icon_smile.gif='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/=D/gi, "<img src='http://1.bp.blogspot.com/-ljeobbA3sn0/UKhVGtJsGRI/AAAAAAAADPA/8lyzE4JwrwQ/s1600/hihi.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:\P/gi, "<img src='http://2.bp.blogspot.com/-bs2e9gRj748/UKhVNKLs2YI/AAAAAAAADQA/mF7lDNOChac/s1600/wee.gif' alt='' class='comment_emo'/>");
            ki_emo = ki_emo.replace(/:\p/gi, "<img src='http://2.bp.blogspot.com/-bs2e9gRj748/UKhVNKLs2YI/AAAAAAAADQA/mF7lDNOChac/s1600/wee.gif' alt='' class='comment_emo'/>");
            zx.item(i).innerHTML = ki_emo;
        }
    }
}
//]]>
</script>

Penulisan

Cara penulisannya standar aja, seperti tertulis disamping smiley :

smiley.:)smiley^_^smiley:-dsmiley:-bd@@,\o/

=(:(;):D=D:p

Menambah Emoticon

Untuk menambah atau edit emoticon, tambahkan kode yang seperti ini (edit simbol dan url gambarnya) :

ki_emo = ki_emo.replace(/:\p/gi, "<img src='http://2.bp.blogspot.com/-bs2e9gRj748/UKhVNKLs2YI/AAAAAAAADQA/mF7lDNOChac/s1600/wee.gif' alt='' class='comment_emo'/>");

Kalaumau yanglebih lengkap silahkan gunakan Yahoo Smileys / Emoticon.

Emoticon ini untuk Komentar default Blogger. Emoticon ini tidak ditampilkan di atas form komentar dan tidak menggunakan alert box, apabila ingin menambahkan diatas form komentar atau ingin menggunkan alert box, silahkan cari tutorialnya di Googel, sudah banyak yang posting.

141 komentar

sudah saya pasang kang .... hihihihi =D \o/

Balas

Punya saya sudah ada kang bawaan template hanya beda penampilan....

Balas

camkoha kang,,,, mantabbbb

Balas

dapat yang ke-7..haha...terlambat...Kang bisa ganti emoticon di blogger comment hack gak??

Balas

tinggal ganti aja, kan ada Emo List

Balas

Ok ziip...Maaf Kang...OOT nih..klo buat tooltip di posting pada home page blog yang kayak kepunyaan Akang...boleh minta tutorialnya gak???

Balas

kalau blog saya ma sudah ada,hehehe sudah bawaan dari threead komen hacknya kang ismet,hehehe
~BW~

Balas

sudah ada di sini http://blog.kangismet.net/2013/07/simple-tooltip-dengan-jquery.html

Balas

Thanks MASTER....gak ragu deh klo minta bantuan sama Kang Ismet :)
Kang ...tolong di perbaiki laman Phtoshop Online..ada error...

Balas

Mantap deh ,, langsung aku coba ni Om
makasih tutorial nya

Balas

benul kang eror sumeror .. lamun di pc sok engap pan ari aya di akang mah sakalian namu sekalian ngedit gambar hehe

Balas

Muhun mangga , mangga sok tong isin-isin hehe ( ngawakilan kang :D )

Balas

error dimeno na kang.. di dieumah lancar jaya soalna :D

Balas

poek we kang nge'blank ning .. naha nya sok pasalia kitu

Balas

bu salia na nyaba.. jadi pasalia na lieur :D

Balas

mual ku emo ah .. tapi ku wkwkwkwkwkwkwkwk

Balas

maaf kang... coba cek lagi, ada link emot yang sama pada 2 emotikon

Balas

emang sama kang, yang 2 terakhir bedanya dengan p(kecil) dan P (kapital) antisipasi penulisan berbeda :)

Balas

Wah cari kemana-mana, ternyata ketemunya di KI lagi aja :D

Balas

itu gambar gif nya bisa diganti ga kang?

Balas

o iya bs, belum baca semua :D gomen

Balas

cara pintas yang di anggap PANTAS ! :-bd KEYEEEEEEEN MAMANG KUHHHH :D

Balas

jalan lieur, sanes jalan pintas :D

Balas

saya coba dengan emot ini yang =)

Balas

maaf, kode diatas salah nulis :D

Balas

Tah ieu pisan nu di pilarian teh Kang...
Seseur na mah paket Bundle ^_^

Balas

makasih kang tutorial nya ^_^
sudah sukses terpasang :D

Balas

haduh gak pernah pertamaxxx , baru online lagi soalnya . kang nulisnya subuh aja kang biar saya bisa pertamaxxx \o/

Balas

bisa gak kang kalo emotnya digunain di post juga? butuh pencerahan lampu sorot...

Balas

Asik ... akhirnya di share juga ... =D kemarin-kemarin aku baca yang di artikel Komentar Hack gak mudeng ... :D Alhamdulillah sekarang dishare ... :D Makasih banyak Kang :-bd

Balas

pengen pasang, tapi kayaknya kurang menarik jika di pasang blog ane :)

Balas

kalau pengen menarik, pake tambang aja :D

Balas

walah tutor membuat emoticon komentar ya, dulu pernah pakai tapi sekarang saya lepas. kemarin nyoba pasang emoticon comments di web berbasis CI tapi masih ada bug, saya ikut nyimak saja lah tidak ikut praktik.

Balas

waduh.. subuh sih jadwal ngaji :)

Balas

kos kartu perdana wae atuh nya kang sareng hp :D

Balas

salam kenal kang .. tutorial yang keren dan jadi bentah ningkrongin dimari..

Balas

wah sae kang tp memperberat loading blog moal ieu teh kang pami ngangge nu kitu?

kang,template kenging kang ismet nu zikazev blue responsive tiasa d valid html5 keun teu kang?? ku abdi hyg d angge tp pas d cbaan teh seer nu eror..

Balas

sadayana template tiasa divalidkeun kang... kaleresan acan valid html5 sih

Balas

atuh anbdi gantosan zikazev blue responsive anu tos di valid html5 keun nya kang?hehe

Balas

makasih kang kapan2 saya terapkan. bantuan saya ath kang, tolong buatkan kode CSS responsive buat menu di blog saya, & saya pusing dengan warna apa yang cocok untuk bagian tsb. (yoga-tc blogspot)

Balas

keren kang tutorialnya tapi masih betah ama emot blog yang lama :))

Balas

diluncurkan juga akhirnya kang, hehehe.. daripada ditanya terus sih :-d

Balas

Kalau saya bawaan trit komen yang kang Ismet udah kasi, paling tinggal di tambah aja emotion nya...

btw OOT nih kang, saya naksir ma widget sticky twitter ma G+ yang sebelah kanan kang ada tutornya gk...??? bukan untuk sticky kang tp tampilan G+ ma twitternya kang kalau bisa sih ada fb fans pagenya :D, biar irit tempat aja, makasih sebelumnya kang

Balas

coba dulu ya kang .. tapi emotnya kok dikit ya .. :D

Balas

Kang maaf sebelumnya,OOT soalnya...
mau nanya mana baiknya kita psng css/javascript di dalam template atau menggunakan tempat penyimpanan di t4 lain? semoga kang ismet ngerti maksu kata2 saya :D

Balas

mungkin karena kata-katanya tidak mengunakan bahasa indonesia yang baik .. :)

Balas

apa fungsi dari / dari kode ? mengapa pakai kode tersebut dan apa artinya /gi saya pernah menemui /ig lalu kok ada kode emotion lain kaya gini /\:) apa artinya ?

Balas

zzz emoticonnya ganggu :(

Balas

Saya mau request dong kang, cara pasang emoticon di postingan. jadi misal kita ketik : ) maka otomatis emoticon smiley nya keluar terimakasih.

Balas

emang dari sananya penulisan regex itu ya seperti itu, untuk lebih memahami coba pelajari 'javascript regexp g modifier'

Balas

wah postingannya semua keren keren akhir akhir ini, maaf kang baru mampir :) [ modem baru pulih :D ]
- salam damai :)

Balas
Komentar ini telah dihapus oleh pengarang.

supaya diperhatikan, numpang comment

baiklah gimana caranya ubah :tertawa: pake :kodesmiley: menjadi smiley
terus :malu: , :senang: , :kabur: dll.

Yang :tertawa: aja dulu, yang lain paling tinggal ganti text

Plis kang ismet

Balas

Kang, mau tanya berhubungan dengan komentar blogger, saya install disqus sebagai pengganti komentar blogger default, nah bisa tidak "Comment Count" (jumlah komentar) itu muncul di home page?
trm ksh

Balas

kang apa ini support dengan semua template?saya pernah coba tapi ga muncul??

Balas

kang kalo nempel nya buat di postingan gmana kang? di ganti
[code] document.getElementById('comment-holder');[/code]

jadi

[code] document.getElementById('post');[/code]

atau gmana kang? :)

Balas

mantap deh blognya kang ismet :)

Balas

kang...saya dapet masalah nih... setiap kali saya mau bagikan postingan di google +, malah keluar pesan "Post anda tidak dibagikan. Coba lagi." itu setiap kali mau saya bagikan tidak bisa sama sekali malah keluar pesan gitu, saya coba lagi, sama saja gk bisa saya bagikan, tolong kasi solusinya kang !!!!
screentshotnya kyk gini kang :
<a href="https://lh3.googleusercontent.com/-8SQvzOjx3tw/UqM-uy2IOTI/AAAAAAAACL4/cdRoe-8683M/s613/Untitled.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="239" src="https://lh3.googleusercontent.com/-8SQvzOjx3tw/UqM-uy2IOTI/AAAAAAAACL4/cdRoe-8683M/s613/Untitled.jpg"/></a>

Balas

eh maaf kang, salah itu URL gambarnya, bingung mau nmpilin gambarnya di comment malah gk jadi, tapi itu URLnya kang coba lihat aja sama kasi tau solusinya gimana kang...

Balas

wkwwk.. lieur kenapa kang?

lieur karena pakai rok mini jadi alasan kitu? :(

Balas

Bro Alief :

ini ane ada sedikit pencerahan buat agan semoga bermanfaat :) , mungkin seperti ini yang agan maksud ? :

[code]
ki_emo = ki_emo.replace(/:\tertawa/gi, "<img src='https://googledrive.com/host/0B7H_GQEvKCj1SmIxOXhHalV2ZVE/ngakak.gif' alt='' class='comment_emo'/>");
[/code]

dicoba dulu gan , semoga berhasil .. :)

untuk "Kang Ismet" maaf nih kang , bukan maksudnya ngelangkahin hehe , cuman bantu ngasih solusi ..

Lanjut berkarya kang , semangat45 :-bd

Balas

wkwkwk.. memang hal kecil itu selalu butuh penjelasan kang :D .. lanjutt maaang .. hehe

Balas

mangga sanguan kang rully! :-bd hehe

Balas

buat blog kok coba-coba ? :D .. hehe , kaya minyak kayu putih aja gan .. wkwkwk

Balas

Thanks Kang Bisa Di coba nih kapann kapan :D

Balas

info untuk Cara Meningkatkan IQ gan , baca aja di http://www.herbalarjawinangun.com/2013/11/cara-meningkatkan-iq-yang-patut-anda.html :)

Balas

info yang menarik mas
umpan balik ya mas :D

Balas

mantap postingnya kang,

-brofist-

Balas

http://th-informatics.blogspot.com/

Balas

apa hubungannya buat responsive sama pusing warna yang cocok ya kang :p

Balas

mas ivan saya kuliah di bidang programer web dan software dan didalam mendesain memang harus ada kombinasi warna yang baik agar pengunjung suka dan tidak bosan .terkadang ada warna yang mencolok dimata dan membuat mata sakit .jadi warna sangat penting saya saja bisanya pusing jungkir balik karena mikirin warna apa yang cocok untuk interface software karena jika sebuah program memiliki warna yang kombinasinya bagus orang tidak usah melihat isi didalamnya sebab warna adalah segalanya ..coba deh kalau beli tas atau baju dipasar kalau warnanya mas suka pasti dibeli kan apakah mas berpikir itu terbuat dari bahan apa .begitu juga software orang akan tertarik membeli jika interfacenya bagus .

Balas

saya suka dengan penjelasan Sis Friska Lee mengenai warna :-d

pemilihan warna dalam desain memang sangatlah penting.

Balas

ini yang ana cari2 :D
http://innocenceberbagi.blogspot.com

Balas

berhasil kang sukses dipasang , oia kang mau tanya jika seandainya itu emotionnya dipasang di kolom komentar caranya gimana kang , soalnya agar pengunjung tau kode apa saja yg harus dipakai agar bisa memilih emotion ?

Balas

itu sudah ada pada threded comment hack sob

Balas

Mbak Friska, saya melirik oom(dot)com beliau sangat 'cerdas' memainkan warna agar warna tersebut halus dimata kita.
Namun yang harus digaris bawahi adalah jika warna bukan segalanya :) , karena jujur kalo beli tas saya akan perhatikan model dan spesifikasinya.

Balas

Mantep banget tutornya, makasih kang ismet

Balas

Gan kok gak work ya di blog saya..
http://killersblog-19.blogspot.com

Balas
Komentar ini telah dihapus oleh pengarang.

Kang Ismet urang Bandung nya?
kang Ismet abi tos nyobian emoticon onion head tapi gagal wae, saur na mah teu support ka blogger, 5x gagal kang ti tutorial nu benten

punten pisan kang pencerahanna

Balas

ti sukabumi kang... nganggo kode anu abdi we.. gentos link gambar sareng kodena nganggo onion head :)

Balas

Woooorkk kang :D mantappp makasih

Kang kalau habis ngasih komentar nih kan di web ini mah suka langsung turun kebawah secara perlahan kan? itu tutorialnya dimana kang?

Balas
Komentar ini telah dihapus oleh pengarang.

Kang kalo mau menaruh emotionnya di bawah komentar gimana ya ?
tolong dong :D

Balas

Kok gak muncul ya kang ? =( Solusi nya dong > SS nya http://prntscr.com/33bm3m

Balas


:)

:(

=(

^_^

:D

=D

|o|

@@,

;)

:-bd

:-d

:P

:ngakak:

Balas

thansk gan...kunjungan balik y http://widitrick.blogspot.com/

Balas

Ini si mantap kang,,, langsung berhasil,,,, terimakasih tips nya :D

Balas

tes.. . .. . :ngakak:

horeee |o|

Balas

saya coba kang :ngakak:

>> http://caralagi.blogspot.com/

Balas

kang gimana cara nampilkan emotion nya di atas komentar supaya pengunjung tau, kyk di atas itu gimana cara nampilkannya,,, mohon pencerahannya ditunggu,,

Balas

gimana sob kalau emoticon nya pengen di bawah komentar
sobat bisa lihat blog saya
www.cecepcom.blogspot.com

Balas

kang kok di blog sya tidak jadi ya,pencerahannya ?

Balas

Keren tutorialnya Kang Ismet , Terus Berkarya :)
Saya dapat tutor seputar blog dari Kang Ismet lohh :D

Balas

sudah terpasang tapi cara menampilkan di atas form komentar bagaimana ya?
jangan lupa kunbalnya juga kang arifinbp.blogspot.com

Balas

http://4.bp.blogspot.com/-hPd-oj2Bzo4/UKhVLkmQjOI/AAAAAAAADPw/3O1iuAukZXg/s1600/thumb.gif

Balas

Sangat bermanfaat :)
kalau sempet mampir diblog saya yah , Join site juga , ane juga udah join site nte |o|
Terima kasih http://virgiawan-didik.blogspot.com/

Balas

akhiiirnya nemu yang work juga!! keren gan thank banget.. tapi box buat emotnya ga ada :(

Balas

Gan kok emotnya gακ hisa di pasang di komentar google+ ya?

tolong pencerahannya gan.. masih newbi nih.. :(

Balas

seep mas, siap dijalankan :ngakak:
salam
(gagapseo.com)

Balas

kang, kok tetep ga muncul emotikon nya ya? Maaf awam..

dhimas-rafiif.blogspot.com

Balas

Mantap gan !!!

salam http://alhega-revolution.blogspot.com/

Balas
Komentar ini telah dihapus oleh pengarang.

Jadi pengen pasang ni kayaknya imut2..

Balas

Kang, gimana cara pasangnya di notifikasi komentar ?

Balas

sistem penulisannya beda.. saya harus acak2 lagi.. lupa kelamaan ga ngacak2kode :D

Balas

Alhamdulillah udah bisa kang....

Ternyata harus membuat selector khusus di area notifikasi komentar.

Aku baru saja ngacak2 code blog SAGITA COM dan ternyata berhasil.

Makasih ya ?

Balas

Poskan Komentar


×
Chat