Emoticon Blogger Otomatis Dengan JQuery

Memasang emoctiom di komentar blog emang terlihat keren banget.....
Emoticion macamnya ada laumayan banyak sob, dan blog ini baru sempat membahas dua macam di antaranya:
Memasang Emoticon Kaskus Di Komentar Blog.
Nah kan baru satu, satunya mana? yang staunya yang akan kita bahas ini hehehe....
Emoticon dari namanya aja udah ketahuan artinya, Emoticon ini bisa menggantikan kata-kata dari pengunjung, contoh aja pengunjung atau orang yang berkomentar di blog sobat akan ketahuan expresi merka jika sobat memasang Emoticon di komentar blog sobat, bila pengunjung senang dengan postingan/articles/tutuorila dan semacamnya deh terserah sobat mau nyebutnya apa maka pengunjung akan menggunakan Emoticon yang sobat sediakan untuk berkomentar.
Seperti yang saya bilang di atas Emoticon tu ada lumayan banyak macamnya dan kali ini kita akan memberikan sobat cara memasang Emoticon yang paling gampang(itu sih menurut saya) hehehe . .. dan postingan kali ini berjudul: Emoticon Blogger Otomatis Dengan JQuery, kebanyakan kalo menggunakan JQuery berarti memasangnya mudah.
Untuh contohnya sobat bisa lihat gambar Emoticon Blogger Otomatis Dengan JQuery berikut:

Contoh Emoticon Blogger Otomatis Dengan JQuery

Gambar di atas adalah contohnya, sekarang mari kita berdo'a, bersama-sama, eh salah maksudnya mari kita bahas cara memasang Emoticon Blogger Otomatis Dengan JQuery ;

1. Login ke akun blogger sobat.

2. Pada menu klick Rancangan ➮ Edit HTML ➮ Centang Expand Template Widget.


3. Backup dulu templatenya untuk mengantisipasi bila terjadi kesalahan, kalo gak ya terserah sobat.


4. Selanjutnya di dalam edit template sobat cari kode  </body> 

5. Jika sudah ketemu letakkan kode script berikut sebelum atau di atas kode tadi.

<style type='text/css'>
.emoWrap {
  background-color:#EEDE86;
  border:2px solid #D3BA59;
  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;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/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 setidaknya Anda harus menambahkan satu spasi di awal simbol.";
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/jquery.autoemoticons.js' type='text/javascript'></script>

6. Simpan template.

Sekarang lihat sendiri perubahannya di komentar blog sobat!