102 Cara Menampilkan Emoticons Smiley Pada Komentar Blogger

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم


Tutorial kali ini saya ingin berbagi cara menampilkan emoticons smiley pada komentar blogger. Walau mungkin dipencarian google anda akan menemukan banyak blog tutorial yang membahas cara menambahkan yahoo smiley emoticons pada komentar blogger tapi yang menggunakan konsep JQuery mungkin masih jarang. Ini adalah fasilitas emoticons otomatis yang dapat merubah simbol :), :D, :P, menjadi sebuah gambar yang telah ditentukan. Semoga dengan trik ini threaded comments blog anda tampil lebih aktraktif.

Screenshot Emoticons Smiley Untuk Komentar Blogger


Cara menambahkan emoticons pada komentar blogger

Cara Menambahkan Emoticons Smiley Ke Blog


  • Setelah login, pada dasbor masuk ke menu template kemudian klik edit HTML dan lanjutkan:
  • Klik Ctrl+F dan cari kode ]]></b:skin>
  • Tambahkan kode CSS berikut diatasnya;

.emoWrap {
  background-color:#fff;
  border:2px solid#0B6138;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
  padding:10px 14px;
  color:black;
  font:bold 12px Tahoma,Arial,Sans-Serif;
  text-align:center;
}

img.emo, input.emoKey {
  display:inline-block; /* Penting! */
  *display:inline;
  vertical-align:middle;
}

input.emoKey {
  border:1px solid #ccc;
  background-color:white;
  font:bold 11px Arial,Sans-Serif;
  padding:1px 2px;
  margin:0px 0px 0px 2px;
  color:black;
}
  • kemudian tambahkan script JQuery berikut diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
Untuk anda yang sudah memiliki atau menginstal script JQuery pada template anda maka langkah diatas abaikan saja!
  • tambahkan lagi Script berikut dibawah script JQuery tadi
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
    putEmoAbove = "iframe#comment-editor",
    emoMessage = "To insert emoticon you must added at least one space before the code.";
//]]>
</script>
<script src='https://tipstrikblogging.googlecode.com/files/EmoticonsKeren.js type='text/javascript'/>
  • Simpan template dan lihat hasilnya diblog anda!
Demikian tutorial cara menambahkan emoticons smiley pada komentar blogger. Semoga bermanfaat!


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

102 komentar :

  1. berat nih kak emoticonnya :'(

    BalasHapus
    Balasan
    1. klo menurut saya sih tidak juga..
      tp cuma menambah request httpnya seperti gambar icon emoticonnya dan javascript..
      :)

      Hapus
    2. Menurut Anaa jg tdk berat sih, ya silahkan diprtimbangkan sj jk ingin mnambahkan widget ini pd blog, anaa khn hnya berbagi :)

      Hapus
    3. Sip work sama blog ane. . thanks gan.

      Hapus
    4. Sama-sama, thanks jg tuk kunjungan dan apresiasinya.

      Hapus
    5. hihihi, berarti koneksi saya yang lemot (p)

      Hapus
    6. Turut prihatin ;( pdhl serupa tp mgkn tak sm. Ttp happy blogging aja lg :)

      Hapus
  2. jadi keliatan lebih menarik...dan juga simple utk menyisipkan emoticons ya sob :)
    trims buat infonya :)

    BalasHapus
    Balasan
    1. Benar skali. Trimaksh jg tuk apresiasinya.

      Hapus
  3. wah keren nih,, jadi pengen pasang.. ijin pasang ya mbk. =p~

    BalasHapus
    Balasan
    1. Silahkan dipasang nggak prlu izin lg, gratis kok.

      Hapus
  4. Dulu saya bingung gmn cara pasang ini, alhamdulillah akhirnya skrg blog sy sdh pakai emoticon yg nggemesin spt ini. walaupun bbrp kali design nya amburadul...heheheh.

    BalasHapus
    Balasan
    1. Oh iya anaa br ngerti mksd ukh di komentar g+ dl. Iya krn emoticons ini pakai JQuery dan featured posts slider ukh jg pake JQuery jd bentrok scriptx mkx nggak jln sliderx, ckp 1 script JQuery aja ditemplatex ukh.

      Hapus
  5. Balasan
    1. Keren, silahkan dicoba biar nggak pnasaran! Terimaksh kunjungan dan apresiasinya.

      Hapus
  6. ini dia yang ane cari² akhirnya ketemu juga ...

    BalasHapus
    Balasan
    1. Alhamdulillah ketemu disini ya? Smg bs membantu.

      Hapus
  7. kayaknya keren nih

    http://fhirman-ilham.blogspot.com

    BalasHapus
  8. Assalamualaikum,,,,berkunjung lagi mbak

    BalasHapus
    Balasan
    1. Wa'alaikumusslm warahmatullah. Terimaksh ukh, sering-sering aja ya!!! (f)

      Hapus
  9. Keren emoticonsx mbak, Tes ya x-)

    BalasHapus
    Balasan
    1. Silahkan dites, dicoba. Terimakasih apresiasinya ya!

      Hapus
  10. mbak kalo untuk emot di kolom postingan blog gimana?

    BalasHapus
    Balasan
    1. Pada editor posts blogger pilih icon image, insert image, upload emoticonsx dari komputer ukhty atau dari web. Semoga membantu. Terimakasih kunjungan dan apresiasinya ya!

      Hapus
    2. Oh ya kalau ukhty mau mudah, bukan dgn cara manual diatas tp tinggaal insert emoticonsx, mk anaa sarankan untuk mencoba ngeblog dengan windows live writter kemudian instal plugin tambahan berupa emoticonsx! Happy Blogging!

      Hapus
  11. Di template saya tidak muncul kodenya setelah di klik, why?? :-#

    BalasHapus
    Balasan
    1. Kenapa ya :-? Mungkin script JQuery ditemplate anda double? Hapus salah satunya. Semoga membantu.

      Hapus
  12. Balasan
    1. Sama-sama, btw ada apa dengan anda :-?

      Hapus
  13. Asslamau'alaikum..

    hatur nuhun kana emoticonanan..
    sukses . . selalu

    BalasHapus
    Balasan
    1. Wa'alaikumussalam warahmatullah. wah ngomong apa ya? Sukses selalu juga tuk anda. Thanks

      Hapus
  14. wahh... gimana nih mbak tutorial yg diatas nggk berhasil diterapkan diblog aku Seo Gold...
    mohon responnya !!! :)

    BalasHapus
    Balasan
    1. Anaa hanya mau bilang, silahkan dicoba lagi dengan memperhatikan uraian diatas dan lebih teliti mengikuti step by step tutorial memasang smiley emoticons for blogger ini! Semoga membantu.

      Hapus
    2. hahaha... bener nih, ane kurang teliti.. tapi skrg sdh Berhasil kok..!! Thanks mbak .. :)

      Hapus
  15. Haduhhh,,,gak work di template ane gan, kunjungi balik ya,,, http://setiabloger.blogspot.com

    BalasHapus
    Balasan
    1. Jangan terburu-buru dong, coba baca dan ikuti dengan lebih teliti uraian diatas! Menurut saya jika sobat sudah mencobanya hanya satu kemungkinanx script JQuery sobat bentrok, karena setelah saya kunjungi blog sobat penuh dengan widget bertenaga JavaScript, JQuery dll. Blog sobat termasuk berat untuk koneksi internet saya, jadi maaf tak bisa lama-lama disana dan belum sempat memberikan apresiasi serupa (berkomentar)!!

      Hapus
  16. punyaku kenapa jatuh dibawah kotak komentar yah..mohon pencerahan

    BalasHapus
    Balasan
    1. Baru aja saya posting solusi untuk pesan komentar yang jatuh dibawah formmulir komentar, silahkan cek direcent posts! Terimakasih.

      Hapus
  17. berhasil.....(h)
    makasih mba tutornya,coba lihat diblogku ya :>)

    BalasHapus
  18. Saya coba terapkan di blog saya,, malah tombol balas'nya error.. gimana ya solusinya.. :-?

    BalasHapus
  19. tanks ya kak izin sedot cz bagus...... :d

    BalasHapus
  20. sangat bermanfaat kawan..
    kunjung balik ya..

    adimbahgahol.blogspot.com
    adimbahgahol.blogspot.com

    di FOLLOW ya blog ane,,kalo udah di follow,nanti ane follow balik..

    BalasHapus
  21. Terimakasih sob.saya coba dulu mudah2an berhasil

    BalasHapus
  22. Alhamdulillah berhasil di terapkan di blog saya.trims!

    BalasHapus
  23. :-? aduh emoticon nya ga muncul di blog saya.

    BalasHapus
  24. thanks infonya ;D

    kunjungan baliknya dan follownya di tunggu :)

    BalasHapus
  25. mantaap :) thanks yah..
    http://herbalarjawinangun.blogspot.com/

    BalasHapus
  26. yess berhasiL ;)
    thanks infonya !!

    kunjungan baliknya yahh..
    www.novandiehard19.blogspot.com

    BalasHapus
  27. gan keren Tutor-nya tp knp ya koq ga work diblog anna ;(( , mohon pencerahannya gan..

    BalasHapus
  28. kunjungin balik gan :D
    imamfjr.blogspot.com

    BalasHapus
  29. terimakasih gan..sangat bermanfaat bagi blog kelas saya :-)

    BalasHapus
  30. hhahhaaa..mntap mbak... kunjungan balik ya mbak..huhuhhuhuhu..blog ku masih sepi ;(( http://netiplisiskom.blogspot.com

    BalasHapus
  31. berhasli si tapi cara masang kotak konvers di atas smile itu gimana ? ;-(

    http://erviners.blogspot.com/2013/04/ssh-premium-gratis-26-april-2013.html

    BalasHapus
  32. ane coba dulu yaa,, (o)
    kalo bisa yang emot-nya onion head dong.. :>)

    BalasHapus
  33. Ow,ternyata caranya sangat mudah. . (h)
    oke,saya coba terapkan di blog ane gan. . :d

    BalasHapus
  34. Keren niy,emotion sudah saya pasang di blog ane. . (b)

    BalasHapus
  35. Keren banget !!! :)
    tapi saya lebih suka smiley yang seperti di facebook :)

    BalasHapus
  36. JQuerynya dimana tuh kak :-?

    BalasHapus
  37. gan ini kok ga ada ]]> ya, mohon solusinya :((

    BalasHapus
  38. ada ketinggalan tuh kak tanda ' sesudah .js nya, ane mo tanya nih, kok di ane gerombolan emoticonnya malah muncul di bawah kotak komentar?

    BalasHapus
    Balasan
    1. Betul kata yang diatas.. kurang tanda ' (kutip) setelah tulisan .js sehingga error saat pemasangan kode.. mohon koreksinya supaya yang tidak membingungkan bagi yang newbie, :-?
      salam kenal

      By; Deafile Bedah Blog

      Hapus
  39. di blog ane gak work nih smileysnya ;-( silahkan kunjungin http://Vongola-F.blogspot.com :)

    BalasHapus
  40. makasih mbak :)
    berhasil terpasang di blog saya :>)

    BalasHapus
  41. :-s afwan ukhty sebelumnya... ane ijin tuk memasangan emoticon tersebut di blog ane....emotic sebelumnya agak kresss diblog ane, jd ane coba2 pk punya unty n berhasil! (maklum malas ngutak2 troublenya...karena gk ada waktu ;-(). Jazakillah khaer atas share ilmunya :)

    BalasHapus
  42. mbak, kalau mau edit html ga bisa lewat hp ya. aq dah coba tapi kok kotak save ga ada :-s

    BalasHapus
  43. wah saya kok gk bisa psang ya? sllu eror waktu saya pratinjau. :-? minta tlong solusinya. (p)

    BalasHapus
  44. gw mau nyoba dulu gan 8-)awas kalo gagal :-t

    BalasHapus
  45. Horeeee jadiiii :)) , tapi.. tapi fesbuk komentar aku kok jadi rusak yah :(( .

    BalasHapus
  46. thanks.. arikelnya cukup membantu.. :)

    BalasHapus
  47. Emotnya lucu2 banget. Sya coba dulu di bloga sya, mas.
    Trims sebelumnya.

    BalasHapus
  48. b-( hey.. low tukang bohong...
    ane buat blog you benned....
    dasar kampret...

    tdd
    ---
    temen lama

    BalasHapus
  49. d ane nga work, code smileynya nga muncul mba :((

    BalasHapus
  50. artikelnya membantu bgt, emoticons nya juga lucu"

    BalasHapus
  51. tes nih :>) makasih banget infonyaaaa =)) (h)

    BalasHapus
  52. Mantap :>)
    bila ada waktu mampir gan !!

    http://azissheftian.blogspot.com

    BalasHapus
  53. tessst :))
    saya udah pasang di blog saya :D
    makasih banyaaak,
    (h)

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!