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 bagikan di artikel cara memasang Emotions di komentar Blog, jadi seandainya sobat mengalami kegagalan dengan kode dibawah ini maka sobat dapat mencoba tutorial di 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 berikut saya bagikan lagi tutorialnya.

Emotion di Komentar Blogger

Membuat Emoticon di Komentar Blogspot

1. Di Blogger,
2. Di Blog yang ingin kamu pasangin emo,
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://cdn.rawgit.com/Brando07/share/newbe/seocips-emo.js' type='text/javascript'/>
</b:if>

7. Simpan template dan lihat hasilnya.

Kamu bisa memasang emoticon ini misalnya untuk membuat komentar blog lebih menarik dimana yang berkomentar dapat menunjukan ekspresinya, kayak di facebook,.. hehehe. walaupun jumlah emoticon tidaklah banyak tapi cukuplah untuk bersenang-senang dengan ekspresi-ekspresi yang unik dan menarik ini.

Baca:

• Cara memasukan gambar di komentar
• Memasukan element terlarang di komentar
• Menghapus link aktif otomatis di komentar

Nah jangan lupa lihat artikel terbaru seocips yang lainnya. Sekian cara membuat emoticon di kotak komentar Blogger, semoga bermanfaaat.

By Brando Mewo