Menambahkan Emoticon di kotak komentar

selamat siang sobat prin-kep, apa kabar nih, kali ini prin-kep akan berbagi sedikit ilmu, yaitu menambahkan emoticon di atas kotak komentar, bisa dilihat SS di atas, ya begitulah yang akan kita praktekkan nanti, sebenarnya fungsi dari Smile ini hanya untuk mempercantik tampilan saja, tapi ya efeknya juga pada jaringan, semakin banyak emoticon atau widget, maka akan semakin berat loading ke blog sobat, tapi jika sobat memang ingin memasangnya, ikuti cara di bawah ini dengan cermat

• login ke blogger
• pilih template >> edit html
• centang expand widget template
• cari kode </body> untuk mempermudah gunakan ctrl+f
• copy paste kode 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='https://boyz.googlecode.com/svn/JS/emoticonnya.js' type='text/javascript'/></b:if>

•  kemudian cari kode ]]></b:skin>
• copy paste kode ini tepat diatas ]]></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;}

• langkah terakhir simpan template sobat, dan lihat hasilnya
• jika kotak emoticon berada di bawah cari kode berikut 

document.getElementById(domId).insertBefore(replybox, null);

• ganti kodenya menjadi

document.getElementById(domId).insertBefore(document.getElementById('form-wrapper'), null);