Memasang Simbol Emoticon di Kotak Komentar


Adanya simbol-simbol emoticon di kotak komentar tentunya akan membuat blog kita menjadi lebih hidup, semarak dan dinamis. Para komentator menjadi lebih bisa mengekspresikan perasaannya, saran dan kritiknya, gelak tawanya melalui icon-icon (emoticon) tadi. Untuk wordpress, mungkin fitur ini sudah tersedia. Tapi untuk blogspot kita harus mengotak-atik templet dan mengelaborasinya agar bisa menampilkan emoticon di area komentar, seperti blog saya ini. Bagi yang belum pernah berkomentar, silahkan untuk menyicipinya dan rasakan nikmatnya..

Oke, bagi sobat yang tertarik untuk memasangnya, silahkan ikuti langkah-langkah berikut ini. Source ini saya dapatkan dari Bang Kendhin. Dan, ada dua macam simbol emosi yang dpata dipakai. Silahkan pilih mana yang sobat sukai.

Emoticon Yahoo :



Emoticon Kucing :



cara membuatnya :
1. Login ke blogger terus pilih Layout/Tata Letak -->> Edit HTML


2. Beri tanda centang pada kotak "expand widget template"


3. Lalu letakkan script berikut sebelum kode </body>

Untuk Emoticon Yahoo :

<script src='http://bahauddin.fileave.com/kumpulanJavaScript/smile_yahoo.js' type='text/javascript'/>

Untuk Emoticon Kucing:
<script src='http://bahauddin.fileave.com/kumpulanJavaScript/smile_kucing.js' type='text/javascript'/>

4. Kemudian cari kode berikut 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>

5. Setelah ketemu letakkan kode2 berikut setelah kode
<p class='comment-footer'>

Ini untuk Yahoo emoticon :

<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>


Ini untuk yang kucing:



<b><img border='0' src='http://kendhin.890m.com/emoticon/capek.gif'/>
:f
<img border='0' src='http://kendhin.890m.com/emoticon/bigsmile.gif'/>
:D
<img border='0' src='http://kendhin.890m.com/emoticon/hi.gif'/>
:)
<img border='0' src='http://kendhin.890m.com/emoticon/kagum.gif'/>
;;)
<img border='0' src='http://kendhin.890m.com/emoticon/love.gif'/>
:x
<img border='0' src='http://kendhin.890m.com/emoticon/malu.gif'/>
:$
<img border='0' src='http://kendhin.890m.com/emoticon/marah.gif'/>
x(
<img border='0' src='http://kendhin.890m.com/emoticon/bingung.gif'/>
:?
</b>
<br/>
<b>
<img border='0' src='http://kendhin.890m.com/emoticon/mumet.gif'/>
:@
<img border='0' src='http://kendhin.890m.com/emoticon/muntah.gif'/>
:~
<img border='0' src='http://kendhin.890m.com/emoticon/mentok.gif'/>
:|
<img border='0' src='http://kendhin.890m.com/emoticon/ngakak.gif'/>
:))
<img border='0' src='http://kendhin.890m.com/emoticon/sedih.gif'/>
:(
<img border='0' src='http://kendhin.890m.com/emoticon/senang.gif'/>
:s
<img border='0' src='http://kendhin.890m.com/emoticon/tolong.gif'/>
:((
<img border='0' src='http://kendhin.890m.com/emoticon/wow.gif'/>
:o </b>


6. Kalau sudah selesai, silahkan klik "save" dan lihat hasilnya.
Note :
Terkadang ada beberapa template memiliki kode yang beda. Jika caranya sudah dilaksanakan dengan benar tapi hasilnya tidak terjadi apa-apa atau kodenya tidak berubah menjadi emoticon, kemungkinan itu karena Kode untuk templatenya berbeda atau bisa juga karena mugnkin hosting untuk menaruh file emoticon dan javascriptnya sedang bermasalah. Maka, solusinya sobat harus menyimpan script di atas di server sobat sendiri. Jika belum punya, silahkan coba daftar di Fileave.com. Insya Allah pada postingan selanjutnya akan dibahas cara mengupload JavaScript di Fileave.com. Salam dan sukses selalu...

13 Comments

  1. Blog seperti ini lah yang sedang saya butuhkan coz saya igin mempercantik blog saya. Pengetahuan saya ttg blog msh sgt minim

    ReplyDelete
  2. @ Neng Suny ;

    makasih Neng Sunny, udah berkunjung ke blogku...
    kapan-kapan main ke Surabaya dong.. :D
    Di kampusku banyak anak-anak CSS Mora loh...
    Kemarin kan udah ke al-Hikmah...

    ReplyDelete
  3. kalo mau taruh emotion di entries blognya bukan di komentarnya bisa gak ya??

    ReplyDelete
  4. makasih mas ceramahnya,tapi tampilanya punyaku kok vertikal mas,mohon koreksi

    ReplyDelete
  5. Bagaimana menaruh emoticon di bawah disqus?

    ReplyDelete
  6. kalo di blog ini ada emoticonnya ga commentnya coba ya :) :( :D habis diblogku ga bisa :(

    ReplyDelete

Post a Comment

Previous Post Next Post