Cara Memasang Emoticon di Kotak Komentar Blog

Emoticon adalah kumpulan icon ekspresi yang berfungsi untuk mempercantik dan mempertegas sebuah kata atau kalimat. Kali ini saya akan memasang emoticon tersebut di kolom komentar blog. Tentunya ini sangat membantu dan menarik perhatian pengunjung yang ingin memberikan komentar.

Sebenarnya banyak emoticon lucu yang bisa kita cari di Google, namun yang akan saya pasang sekarang adalah emoticon jenis Smiley yang biasa digunakan di media jejaring social pada umumnya. Lihat screenshoot-nya di bawah:

Tertarik untuk memasangnya? Bagaimana caranya?

Cara Memasang Emoticon di Kotak Komentar Blog:

1. Login ke akun Blogger
2. Pilih Template >> Edit HTML
3. Copy-paste script di bawah ini di atas kode ]]></b:skin>

.emoWrap {
  position:relative;
  padding:10px;
  margin-bottom:7px;
  background:#fff;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* Opera */
background-image: -o-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #FFFFFF), color-stop(1, #FFF9F2));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to left, #FFFFFF 0%, #FFF9F2 100%);
  border:3px solid #860000;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  -moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  -webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  font-weight:normal;
  color:#333;
}
.emoWrap:after {
  content:"";
  position:absolute;
  bottom:-10px;
  left:10px;
  border-top:10px solid #860000;
  border-right:20px solid transparent;
  width:0;
  height:0;
  line-height:0;
}

4. Kemudian copy-paste script di bawah ini di atas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Klik untuk melihat kode emoticon!",
emoMessage:"Untuk menyisipkan Emoticon, tekan spasi terlebih dahulu."
})
});
//]]>
</script>
<script src='https://boyz.googlecode.com/svn/JS/emoticonnya.js' type='text/javascript'/>
</b:if>

5. Simpan Template, cek hasilnya dengan cara melihat salah satu postingan artikel di halaman utama blog.

Itulah sekilas pemahaman saya tentang Cara Memasang Emoticon di Kotak Komentar Blog. Semoga bermanfaat. Jika mencari artikel lain yang serupa, silahkan cek di bawah ini: