Cara Menambahkan Emoticon Pada Komentar di Blog

Sempat saya kemarin bertanya-tanya tentang cara menambahkan emoticon pada komentar di blog saya ini. Namun saking sering nyari dan nyari akhirnya alhamdulillah saya menemukan sebuah blog yang banyak membahas tentang trik dan tips blogging.

Mengapa saya mencari tutorial ini, karena saya sedikit sebal dengan halaman thread komentar di blog saya, jika saya menggunakan tanda ;) munculnya adalah karakter yang sama, tapi saya ingin gambar yang tampil dengan karakter yang saya sering gunakan saat chatting itu muncul gambar emoticon senyum. Dan inilah jawabannya.

Kebetulan pada template yang saya pakai ini, saya menggunakan karakter emoticon pada thread komentar blog saya, jika kalian ingin melihat hasilnya, silahkan scroll saja ke bawah dan lihat pada bagian atas kotak komentar post di bawah ini, di sana sudah muncul beberapa gambar emoticon yang lucu dan menggemaskan. Untuk menggunakannya cukup dengan klik dua kali pada salah satu gambar emoticon yang akan digunakan, dan kemudian copas saja pada kotak komentar, setelah dikirim akan tampil gambar emoticon yang kalian pilih tadi. Cukup seperti itu saja dan nggak pakai susah kan.

Namu apakah kalian ingin memasang pilihan emoticon seperti itu di blog kalian. jika kalian ingin memasangnya caranya sangatlah mudah. Silahkan ikuti trik di bawah ini :

1. Silahkan login ke akun blog anda masing-masing.
2. Pilih Template dan Edit Template.
3. Silahkan cari kode berikut dengan cara tekan CTRL+F untuk mencarinya secara mudah :

]]></b:skin>

4. Jika sudah ketemu, silahkan copas kode css di bawah ini tepat sebelum kode di atas :

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

5. Selanjutnya silahkan cari kode </head>
6. Copas kode di bawah ini tepat sebelum kode di atas :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

Keterangan : Jika sebelumnya di template kalian sudah menggunakan library JQuery tersebut, sebaiknya pada point ke 6 silahkan kalian abaikan.

7. Copas script di bawah ini tepat setelah kode di atas ya :

<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'/>

8. Silahkan Simpan template kalian dan coba cek dengan membuka satu konten blog kalian, apakah kumpulan emoticon sudah tayang di atas kolom komentar kalian atau belum.

Jika sudah tayang berarti trik kali ini sangat berhasil, dan silahkan kalian modifikasi sendiri sesuai selera ya. Semoga tutorial kali ini bermanfaat buat kita semua.

Resource : http://www.tipstrikblogging.com/2013/02/memasang-emoticons-smiley-pada-komentar-blogger.html