Cara Membuat Emoticon di Kotak Komentar Blog

Cara Membuat Emoticon di Kotak Komentar Blog

Siapa yang tidak kenal dengan emoticon?? Pasti, kebanyakan orang sudah tau apa sih emoticon.. Kali ini saya akan membagikan tips Cara Membuat Emoticon di Kotak Komentar Blog. Yah, cara membuatnya pun gampang-gampang susah. Kuncinya hanya satu, harus teliti dalam memperhatikan kode html javascripnya. Kalau tidak teliti maka emoticonnya tidak akan muncul.

1. Login ke Blogger
2. Pilih Template >> Edit HTML
3. Cari kode </body> untuk mempermudah gunakan CTRL + F
4. Copas kode ini tepat 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:"Click to see the code!",

emoMessage:"To insert emoticon you must added at least one space before the code."

})

});

//]]>

</script>

<script src='https://boyz.googlecode.com/svn/JS/emoticonnya.js' type='text/javascript'/>

</b:if>

5. Kemudian cari kode ]]></b:skin>

6. Copas kode ini tepat 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;}

7. Simpan dan lihat hasilnya

Salam Techno