Cara Membuat Emoticon di Komentar Blog

Tutorial blog seocips kali ini adalah tentang cara membuat emotion di dalam komentar Blog. Sebenarnya sudah banyak yang posting tentang tutorial ini bahkan sudah pernah seocips posting di artikel cara memasang Emotions di komentar Blog, jadi seandainya sobat mengalami kegagalan dengan kode dibawah ini maka sobat dapat mencoba artikel sebelumnya.

Berawal dari pertanyaan seorang pengunjung Blog ini ( yang sebenarnya sudah beberapa hari yang lalu bertanya dan belum sempat di balas karena sibuk ) di artikel sebelumnya tentang Cara membuat efek gambar dengan panel description maka seocips.com membuat  tutorialnya.

Emotion di Komentar Blogger

Membuat Emoticon di Komentar Blog

Ok sobat langsung saja berikut ini adalah caranya.
1. Di Blogger
2. Ke Blognya sobat
3. Pilih menu template >> edit html
4. Cari kode ini ]]></b:skin> untuk mempermudah gunakan ctrl+f
5. Letakan kode dibawah ini diatas kode ]]></b:skin>.

.emoWrap { position:relative; padding:10px; margin-bottom:7px; background:#fff; background-image:-ms-linear-gradient(right,#FFFFFF 0%,#FFF9F2 100%); background-image:-moz-linear-gradient(right,#FFFFFF 0%,#FFF9F2 100%); background-image:-o-linear-gradient(right,#FFFFFF 0%,#FFF9F2 100%); background-image:-webkit-gradient(linear,right top,left top,color-stop(0,#FFFFFF),color-stop(1,#FFF9F2)); background-image:-webkit-linear-gradient(right,#FFFFFF 0%,#FFF9F2 100%); 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; }

6. Selanjutnya dengan mencari kode </body> dan letakkan kode dibawah ini diatasnya.

<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://sites.google.com/site/seocips/seocips-script/emo.js' type='text/javascript'/>
</b:if>