Home » » Cara Menambahkan Emoticons Smiley Ke Blog

Cara Menambahkan Emoticons Smiley Ke Blog

Written By AiRa LoKa on Senin, 06 Mei 2013 | 19:48


     Walau mungkin di mbah google anda akan menemukan banyak tutorial yang membahas tentang 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. Nah, bagi yang mau coba, Langsung saja..
Check It Out......

1.  Masuk ke Blogger > Dashboard Blogger > Template > Edit HTML. Cari kode ]]></b:skin>, lalu pastekan script dibawah ini diatas kode ]]></b:skin>.
/* Emoticon Smiley -------------------------------------------- */
.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;
}
2. Cari kode </head>. Lalu pastekan script dibawah ini diatas kode </head>.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
    putEmoAbove = "iframe#comment-editor",
    emoMessage = "Untuk menyisipkan emoticon, beri satu spasi sebelum memasukkan kode.";
//]]>
</script>
<script src='https://sites.google.com/site/airalokablogspotcom/download/Emoticon%20Smiley.js' type='text/javascript'/>
 Nb: Jika blog anda sudah terpasang JQuery, hapus script yang berwarna biru.

3.  Simpan.

Selamat mencoba!

87 komentar:

  1. .. ada gak yg langsung gitu tanpa copy kodenya?!? ..

    BalasHapus
    Balasan
    1. maksudnya gimana ya... [-(

      Hapus
    2. maksudnya mungkin pkek smile generator code, nanti langsung di import ke blognya gan... visit ya... :)) Blog Teberisi, artikel, tips, tutoriral, lunux, waindows islam, blogging, seo, lengkap deh , tolong kunjungi ya http://teh-angetindonesia.blogspot.com/ :d

      Hapus
    3. @Vpie : kalau untuk blogger belum ada kayaknya

      Hapus
  2. mohon bantuannya saya sudah mencoba tapi saat mau liat code gak bisa ;((

    BalasHapus
    Balasan
    1. apakah anda sudah mengikuti tutorialnya dengan benar? :-?

      buktinya emoticon saya berfungsi dengan baik...

      Hapus
    2. sukses terpasang kang
      terima kasih infonya

      Hapus
  3. itu emoticonnya bwt postingan ato komentar,.,.

    BalasHapus
  4. Berhasil, terima kasih ya infonya.

    COBA MENYISIPKAN GAMBAR:
    https://lh3.googleusercontent.com/-k0x_iCZo3wA/AAAAAAAAAAI/AAAAAAAAAPQ/r7YYNfuAiDg/s120-c/photo.jpg

    BalasHapus
  5. https://lh5.googleusercontent.com/-LZn6dX8GslQ/T2W30lpp_kI/AAAAAAAAChA/Rym2Ql5H-jU/s36/25.gif https://lh3.googleusercontent.com/-zI2UJmwerDM/T2WEhSRkuTI/AAAAAAAACcc/Gr3xFDrZF3Y/s36/28.gif https://lh3.googleusercontent.com/-ilBYLLWFQJQ/T2WEiJXJ7LI/AAAAAAAACcY/bXpkIPuVUto/s36/29.gifhttps://lh5.googleusercontent.com/-_NHYkuf5bZg/T2WEjOhTIxI/AAAAAAAACcg/76qRE27R_ig/s36/30.gif

    BalasHapus
  6. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  7. makasih infonya gan blog ane mkin mantap tamah emotation kyak gini :>)
    mampir-mampir ke blog ane gan
    http://erjansupracipta.blogspot.com/

    BalasHapus
  8. Makasih info'a, work 100% :)


    http://kiefloy1996.blogspot.com/

    BalasHapus
  9. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  10. http://www.freeimagehosting.net/newuploads/io123.png

    BalasHapus
  11. https://lh6.googleusercontent.com/-Q5lMkgcmVR4/T2WEWkNi3MI/AAAAAAAACZ4/7VBYeVbx7kA/s36/01.gif https://lh3.googleusercontent.com/-duNoMAb1RS4/T2WEWrOfR8I/AAAAAAAACZ0/ObgHf-PmTuE/s36/03.gif https://lh3.googleusercontent.com/-mCsZPeixHvA/T2WEWivv9FI/AAAAAAAACZw/64ZGRgdlDeg/s36/02.gif https://lh3.googleusercontent.com/-fMtAZDakmBI/T2WEXswr5BI/AAAAAAAACaA/83R1X_PumTk/s36/05.gif

    Kunjungi juga blog Saya... www.sevenanime-id.blogspot.com

    BalasHapus
  12. Berhasil bos, mampir ya www.autis-nations.blogspot.com :D :D

    BalasHapus
  13. Terimakasih banget gan, work 100%
    kunjungan ke blog saya, jangan lupa komen pake begini (b)

    BalasHapus
  14. visit ya http://idealexsiz.blogspot.com/ :D

    BalasHapus
  15. Work Om..thank buat thread nya... :)
    baru selesai buat blog nih gan...kunjungi yah :) :)
    http://sitopi.blogspot.com/

    BalasHapus
  16. WORK GAN KUNJUGNI www.adapter.co.vu

    BalasHapus
  17. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  18. Gan punya saya Sukses kok :)

    Tetapi kenapa Box Emoticonya ada di bawah Kolom komentar ya gan ?
    Baru berubah di atas Kolom Komentar setelah berkomentar dahulu.

    Solusinya gan ?

    BalasHapus
    Balasan
    1. kasusnya sama sperti saya :D, mohon dong admin balas :D

      Hapus
  19. hehe,,
    Makasih gan,
    :)
    ditunggu kunjungannya,,
    www.cumiseng.blogspot.com
    :-)

    BalasHapus
  20. si adminya kemana nih komentar segitu banyaknya kagak pada di bls! TERLALU

    Apakah masih bekerja kode di atas itu????

    Believe It or Not!

    BalasHapus
  21. hy semua nya jangan lupa visit www.myreviewer007.blogspot.com
    buat admin nya ijin copas ya :)

    BalasHapus
  22. Biar Lebih Gampang Dan Simple,Saya Menyediahkan Animasih Menarik Dan Cara Membuat Blog Sobat Blogger Jadi Yang Pertama Di Google,Kalau Sobat Blogger Mau Mencoba Silakan Buka Link Di Bawah Ini!
    jokerz-net.blogspot.com
    Work 100%
    Saya Hanya Mencoba Bantu Sobat Blogger Aja Kalau Kesusahan Memasukan Animasih Atau Kursor Dan Banyak Yang Lain Nya....https://lh3.googleusercontent.com/-xbWqvOWJNE0/T2WEZM-VLTI/AAAAAAAACak/8dLATIlXRDk/s36/12.gif
    Sekian Dan Terimah Kasih,Selamat Mencoba

    BalasHapus
  23. wahh work gan, hehhe terimakasih ya, blog saya jadi semakin berwarna.. :)

    BalasHapus
  24. kenapa emoticonnya ada di bawah komentar mas, mohon penjelasannya mas

    BalasHapus
  25. berhasil tapi diatasnya kok ada tulisan gan,, (h)

    BalasHapus
  26. makasih tipsnya gan...berguna banget...
    kunjungi ya... http://a-teknologi.blogspot.com

    BalasHapus
  27. test e https://lh5.googleusercontent.com/-u__sc3DgZ2c/T2d0_lDLueI/AAAAAAAACkw/YbeuRNde61Q/s36/03a.gif

    BalasHapus
  28. mantab gann....langsung work emoticonnya >_<

    BalasHapus
  29. makasih gan...
    bisa... :-d
    kalo sempet main ke blog an ane ya,, =))

    BalasHapus
  30. sip gan 100% worked, mampir gan http://teh-angetindonesia.blogspot.com/ ......

    BalasHapus
  31. :)) Blog Teberisi, artikel, tips, tutoriral, lunux, waindows islam, blogging, seo, lengkap deh , tolong kunjungi ya http://teh-angetindonesia.blogspot.com/ :d

    BalasHapus
  32. test gann http://pekalongancyberblogger.blogspot.com :d

    BalasHapus
  33. test ah :D http://ombimo.blogspot.com

    BalasHapus
  34. mantap gan bagusan emoticon ane gan :d

    BalasHapus
  35. Maksih gan,
    akhirnya ak bisa jga pasang emotikon buat komentar di blogku

    BalasHapus
  36. susah bro
    nggak berhasil
    yang lebih simple ada nggak ?
    habis rokok sebungkus oprak aprik nya :-s

    BalasHapus
  37. Sukses. Ini bekerja gan. Terima kasih ya, sudah berbagi "cara menambahkan emoticons smiley ke blog Belajar AutoCAD"
    Salam Blogger.

    BalasHapus
  38. Icon smile nya buat chat room bisa nggak..?????

    Mari kunjungi rame2.. buat hobinya chatting...

    http://chatroomria.blogspot.com

    BalasHapus
  39. Mantap mas, sudah saya coba. tapi dengan versi lain.. :))

    BalasHapus
  40. berhasil,,terima kasih, mampir ke blog aku yach dan nilai..serbaserbipaman.blogspot.com

    BalasHapus
  41. bang, kok ada dua pilihan ya..? ada yg bhs inggris ada yang bhsa indonesia..? gimana caranya pilih salah stunya bang..?

    BalasHapus
  42. mantap dah artikelnya
    http://acemaxs31.com/obat-kanker-paru-paru/

    BalasHapus
  43. belum bisa nih.. ;-(

    BalasHapus
  44. Mantap gan udah ane coba
    Kunjungi balik ya http://blog-yhan12.blogspot.com
    Blogwalking

    BalasHapus
  45. Terima kasih banget tutorialnya... sangat mantap setelah di coba.. minimal menambah tampilan blog sedkit berbeda..
    salam sukses selalu.....

    BalasHapus
  46. Makasih y...tutorialnya berguna bngt (h)
    silahkan mampir ke blog kami
    http://nataomah.blogspot.co.id/

    BalasHapus
  47. makasih atas kodenya ya gan :)...
    kunjungi juga website ane
    https://www.aquillien.blogspot.com
    https://www.quelaoki.blogspot.com

    BalasHapus
  48. Sukses Casturiputih.blogspot.com

    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>

Setelah membaca artikel ini, silahkan tinggalkan komentar. Bagi yang mau meninggalkan url blognya, silahkan saja. Asalkan anda tidak memberikan komentar dengan kata-kata yang tidak sopan. Terima kasih telah mengunjungi blog ini.

AiRa LoKa - Blog of tutorials

Konversi Kode di Sini!

 
Support : Blogger | Google | KlikSaya
Copyright © 2013. AiRa LoKa - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger