Emoticon Komentar Blog

Supaya dalam berkomentar bisa lebih unik dan menarik, kali ini saya akan memberikan tips dan trik untuk membuat menu emoticon pada komentar blog. Ada 33 emoticon yang tersedia dan untuk penggunaannya sangatlah mudah, Anda tinggal mengklik emoticon yang dipilih, salin kodenya lalu tempel pada formulir komentar.

Berikut adalah langkah-langkah untuk membuat menu emoticon pada komentar blog.

1. Unduh terlebih dahulu template blog Anda (opsional).

2. Pilih menu Template > Edit HTML lalu cari kode </body> (untuk memudahkan pencarian kode tekan Ctrl + F).

3. Simpan kode berikut ini di atas </body> lalu klik Simpan template.

<style>
.emoWrap {
  background-color:#ffffff;
  padding:10px 14px;
  font-family:Open Sans;
  font-size:14px;
  font-weight:400;
  text-align:center;
}
img.emo, input.emoKey {
  display:inline-block;
  *display:inline;
  vertical-align:middle;
}
input.emoKey {
  background-color:#ffffff;
  margin:0 0 0 2px;
  padding:1px 2px;
  font-family:Open Sans;
  font-size:14px;
  border:1px solid #cccccc;
}
</style>
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script async='async' src='https://firebasestorage.googleapis.com/v0/b/eksperimen-5471a.appspot.com/o/JavaScript%2FEmoticon.js?alt=media&amp;token=cb913a54-81f4-4849-be9a-4eacc878ad59' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
putEmoAbove = "iframe#comment-editor";
//]]>
</script>

Hasilnya

• Versi YouTube