Menambahkan Yahoo Emoticon di Kotak Komentar Blogspot

Jika anda pernah Chatting menggunakan Yahoo Messenger, tentu saja sering menggunakan Emoticon untuk menggantikan ungkapan perasaan anda kepada teman chating tersebut. Selain menghemat penulisan kata, emoticon juga membuat suasana chating makin hidup. Suasana ini tentu bisa juga diterapkan pada kotak komentar pada blog.

Dengan Menambahkan Yahoo Emoticon di Kotak Komentar Blogspot, membuat pengunjung blog makin asik berkomentar di blog yang kita miliki. Sangat banyak blog yang membahas tentang tutorial Menambahkan Yahoo Emoticon di Kotak Komentar Blogspot, tetapi banyak pula yang tidak jalan. Dikarenakan beberapa template memiliki tag penulisan yang berbeda sehingga scriptnya menjadi tidak berfungsi. Akhirnya saya coba mencari kesalahan yang terjadi, hingga menemukan solusinya.

Ingin Menambahkan Yahoo Emoticon di Kotak Komentar Blogspot anda ? Jika iya, silahkan baca kelanjutannya :

1. Login ke blogger dashboard, klik Design -> Edit HTML. Jangan lupa untuk mengklik Expand Widget Templates.

2. Carilah tag <p class=’comment-footer’> .

3. Hapus semua tag yang dimulai dari tag <b:if cond….> sampai </b:if>. Atau seperti yang terlihat pada tag dibawah ini :

<b:if cond=’data:post.embedCommentForm’>
<b:include data=’post’ name=’comment-form’/>
<b:else/>
<b:if cond=’data:post.allowComments’>
<h3><a expr:href=’data:post.addCommentUrl’
expr:onclick=’data:post.addCommentOnclick’>
<data:postCommentMsg/></a></h3>
</b:if>
</b:if>
</p>
</b:if>

4. Ganti dan copy kode dibawah ini dan pastekan tepat dibawah tag <p class=’comment-footer’> :

<b:if cond=’data:post.embedCommentForm’>
<div style=’-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86′>
<b>
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif’ width=’18’/> :))
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif’ width=’18’/> ;))
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif’ width=’18’/> ;;)
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif’ width=’18’/> 😀
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif’ width=’18’/> 😉
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif’ width=’18’/> :p
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif’ width=’22’/> :((
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif’ width=’18’/> 🙂
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif’ width=’18’/> 🙁
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif’ width=’18’/> :X
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif’ width=’18’/> =((
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif’ width=’18’/> 😮
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif’ width=’20’/> :-/
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif’ width=’18’/> :-*
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif’ width=’18’/> 😐
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif’ width=’24’/> 8-}
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif’ width=’31’/> :)] <img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif’ width=’44’/> ~x(
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif’ width=’30’/> :-t <img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif’ width=’18’/> b-(
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif’ width=’18’/> :-L
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif’ width=’34’/> x(
<img border=’0′ height=’18’ src=’http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif’ width=’30’/> =))
</b>
</div>
<b:include data=’post’ name=’comment-form’/>
<b:else/>
<b:if cond=’data:post.allowComments’>
<a expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>

5. Lalu cari tag </body>, copykan kode dibawah ini sebelum tag tersebut.

<script src=’http://piliang.googlecode.com/files/ymemoticon.js’ type=’text/javascript’/><noscript><a href="http://www.belajarpc.com" target="_blank"><span style="font-size: x-small;">Add Emoticon</span></a></noscript>

6. Klik tombol Save untuk menyimpan perubahan.

Hasilnya bisa dilihat pada DEMO blog.