Cara membuat emotion comment di blog

Untuk melengkapi malam ini saya akan membagikan widget emotion diatas kotak komentar setelah saya selesai membuat artikel Widget penunjuk waktu achan IKT48 , widget ini memang sangat menarik rasanya tidak sabar untuk langsung memasangnya pada blog, gimana enggak, seolah olah widget nya ngomong ayolah cepet pasang gw (hehhee),
Keuntungan dari widget ini adalah mempercantik tampilan kotak komentar sekaligus manambah nilai sudut pandang pengunjung blog yang gak tahan langsung ingin komentar menggunakan emoticon. langsung aja nih tutornya.

Login ke blogger

pilih template >> edit html

centang expand widget template

cari kode ]]></b:skin> untuk mempermudah gunakan ctrl+f

copy paste kode dibawah ini tepat diatas 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;
}

kemudian cari kode </body> 

copy paste kode dibawah ini tepat diatas 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:"Click to see the code!",
 emoMessage:"To insert emoticon you must added at least one space before the code."
 })
   });
 //]]>

</script>
<script src='http://not-delete.googlecode.com/files/emoticon-comment.js' type='text/javascript'/>
</b:if>

Langkah terakhir simpan template sobat, dan lihat hasilnya

NOTE: jika ada dari sobat yang tiba-tiba emoticonnya turun kebawah kotak komentar bisa baca postingan saya disini