Memasang emoticon di kotak komentar

Hm,, setelah kemarin saya bahas ulang tentang embedded comment dari blogger, nah tentu kurang nikmat bila tidak ada sentuhan sentuhan seperti atau hehe,,,. Yup betul emoticon :D kalo kata mas oom sich G-spot nya google atau blogger hehe,,,. Sebenarnya ini juga telah pernah di bahas oleh mas oom dan beberapa rekan lainnya hehe,, tapi berhubung kemarin itu saya nga sempat untuk menuliskannya maka dari itu baru minggu ini bisa di cuap-cuap in dech dan dengan sedikit perubahan yang amat,,,,, sangat sedikit hehe,,, :P .

Eits,, sebentar, ada yang belum tahu embedded comment itu apa? klo belum tahu bisa baca postingan saya sebelumnya di sini, atau punya mas oom di sini bila kurang jelas atau mau lebih jelas lagi di kang rohman di sini hihi,, ;)) . Bila sudah baca, nah saya mau beritahu letak dan kira-kira seperti apa sich rupanya (ckck,, mank seni rupa yah??) atau hasil dari kita pasang emoticon di komentar. Berikut gambarnya :

Jadi kita hanya perlu mengetik kode yang sesuai dengan petunjuk yang telah ada sebagai expresi kita, dan tentu lebih enak dalam membacanya hehe,, hasil postingan nya bisa sepertiberikut.
Nah sekarang kita ke tahap pembuatannya (memasang emoticon di atas kotak komentar), pertama-tama kita masukkan kode emoticon nya dengan, masuk ke Edit Html kemudian cari kode </body> untuk memudahkan anda gunakan FIND (ctrl+ F). Bila sudah copy paste kode berikut diatas kode </body> :

<!-- Script emoticon for comment -->

<script src='http://url_file_anda/smiley.js'
type='text/javascript'/>

<!-- end script -->

Download file java script nya di sini.

Inti kodenya adalah yang berwarna merah, kode berwarna biru hanya sebagai pembatas script aja agar tau fungsi script :D :p .(kode ini berbeda dengan kode emoticon untuk postingan yang cara pembuatannya dapat di lihat di sini)

kemudian untuk memasang kode emoticon diatas kotak komentar, tetap berada pada halaman Edit HTML (jangan lupa beri tanda centang pada Expand Template Widget). kemudian cari kode warna merah dibawah ini:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<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>

Hati hati yah kodenya ada 2, jadi ari yang isinya berwarna hitam :D , ingat sebelum memasukkan script ini pastikan anda telah menggunakan embedded comment baru dari blogger (baca caranya di sini).

Sudah ketemu? bila sudah copy paste kode berikut ini di bawah kode <p class='comment-footer'> Kemudian tinggal di simpan dan lihat hasilnya.

<div style='width: 455px; height:60px; text-align:
left; border: 1px solid #E9E9E9; padding: 5px; background: #DCECF7;'>

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))</b></div>

Anda bisa mengubah warna baground sesuka kamu dengan mengubah kode #DCECF7 dan lebar dan tinggi kolom dengan mengganti nilai dari width dan height nya.

Selamat mencoba,,,

thanx to oom. :D