February 26, 2013

Cara Membuat Emoticon Di Kotak Komentar


Artikel / Postingan Sudah Tidak Valid Lagi, Silahkan Menggunakan Tutorial Baru Pada Artikel di Halaman Ini

Halo sob...



Kali ini saya mau share nih cara membuat emoticon pada kotak komentar blog sehingga tampilannya pun semakin rame sob, hehehehe...

Untuk contoh nya sendiri bisa temen-temen liat di kotak komentar dibawah, dan silahkan berkomentar untuk mencobanya. Untuk cara pemasangannya di blog cukup mudah hanya perlu copy paste kode-kode yang nanti saya berikan kok.

Ok, langsung praktek yuk... :

1. Login dulu ke blogger.


2. Masuk ke Template - Edit HTML.


3. Jangan lupa centang dulu "Expand Template Widget".
4. Selanjutnya cari kode </body> dan letakkan kode berikut tepat diatasnya.

http://aiizahh-smiley.googlecode.com/files/aiizahhsmiley.js

5.  Selanjutnya cari kode <p class='comment-footer'> dan letakkan kode berikut tepat dibawahnya.

<div style='overflow:auto; width:autopx; height:200px; border:1px; padding:5px 5px 5px 5px; background:#FED980;'>       
<b> <img class='smiley' height='50' src='http://2.bp.blogspot.com/-WsABbagva04/USbDYxTAX0I/AAAAAAAAAnw/1oN5WhRpLD8/s1600/I-Luv-Indonesia.gif' width='50'/>
 :iloveindonesia
<img class='smiley' height='50' src='http://4.bp.blogspot.com/-JQrBmxgLnIE/USbDbMEeUfI/AAAAAAAAAoM/98tLLAs9ND4/s1600/cewek.gif' width='50'/>
:kiss
<img class='smiley' height='50' src='http://1.bp.blogspot.com/-fE6W4mreosI/USbDnKaQfNI/AAAAAAAAArU/M2c8WN2GCtc/s1600/s_sm_maho.gif' width='50'/>
:maho
<img class='smiley' height='50' src='http://1.bp.blogspot.com/-YaavSe48jDI/USbDipVKXCI/AAAAAAAAAqA/RBjM1vAp_pU/s1600/najis.gif' width='50'/>
 :najis
 <img class='smiley' height='50' src='http://3.bp.blogspot.com/-Gl0HrdawJWs/USbDlAvZETI/AAAAAAAAAqs/McyWDNzlAEQ/s1600/nosara.gif' width='50'/>
:nosara
 <img class='smiley' height='50' src='http://4.bp.blogspot.com/-4uTPJBaRdeM/USbDiaoa1oI/AAAAAAAAAp8/TRnIliR9PfY/s1600/marah.gif' width='50'/>
:marah
<img class='smiley' height='50' src='http://2.bp.blogspot.com/-jLUUDZzdP6Y/USbDeUHEtWI/AAAAAAAAApA/PdWCh4tUKXU/s1600/hotnews.gif' width='50'/>
:hotnews:
<img class='smiley' height='50' src='http://1.bp.blogspot.com/-w5dmrcY6RAI/USbDj4nRKpI/AAAAAAAAAqY/PrMgq660_Uk/s1600/ngakak.gif' width='50'/>
:ngakak
<img class='smiley' height='50' src='http://4.bp.blogspot.com/-N0cbuAmKyfk/USbDqUiYFRI/AAAAAAAAAsc/9jrwyUjI5nk/s1600/sundul.gif' width='50'/>
:sup2:
<img class='smiley' height='50' src='http://3.bp.blogspot.com/-RuPgM90E_nk/USbDftXvtZI/AAAAAAAAApc/HEtZMVOVWZc/s1600/jempol2.gif' width='50'/>
:jempol2
<img class='smiley' height='50' src='http://2.bp.blogspot.com/-8AJwsZQopN4/USbDkn6Xt-I/AAAAAAAAAqk/dOsNazwrtC4/s1600/ngacir3.gif' width='50'/>
:ngacir2:
<img height='50' smiley='' src='http://2.bp.blogspot.com/-2a46YFRr2Ko/USbDoTfjA7I/AAAAAAAAAr0/HfF4-r_i7ME/s1600/shakehand2.gif' width='50'/>
:shakehand2:
<img class='smiley' height='50' src='http://4.bp.blogspot.com/-9ZO0XSBprGo/USbDptlTB8I/AAAAAAAAAsM/3qT0ecRxqKg/s1600/sorry.gif' width='50'/>
:sorry:
<img class='smiley' height='50' src='http://3.bp.blogspot.com/-WXHn6ZP_Q6Y/USbDdzPYwzI/AAAAAAAAAo4/ei-nbf07jHs/s1600/hammer.gif' width='50'/>
:hammer
<img class='smiley' height='50' src='http://2.bp.blogspot.com/-OrRjfDYQwEM/USbDhs-dvAI/AAAAAAAAAps/r_9o015lRqw/s1600/lebaran03.gif' width='50'/>
:selamat
<img class='smiley' height='50' src='http://2.bp.blogspot.com/-H6Uienqgd7I/USbDWGwSkTI/AAAAAAAAAnE/FqMD6hpwGv8/s1600/1+kimpoi.gif' width='50'/>
:kimpoi2
<img class='smiley' height='50' src='http://2.bp.blogspot.com/-gqVWZmbHSWg/USbDrS7n0wI/AAAAAAAAAso/aAQMqoY85bY/s1600/tired1.gif' width='50'/>
:tired:
<img class='smiley' height='50' src='http://1.bp.blogspot.com/_aJpsL7-miAc/TPNKaofnf-I/AAAAAAAAAIk/5t0cP5BdB0A/s1600/bayi+ngakak.gif' width='50'/>
:babyboy2:
<img class='smiley' height='50' src='http://3.bp.blogspot.com/-krBwAZPHjmk/USbDpf-RHWI/AAAAAAAAAsI/l3ww2uvamZo/s1600/smoke.gif' width='50'/>
:smoke:
<img class='smiley' height='50' src='http://3.bp.blogspot.com/-hfxEHV_1qaA/USbDp6Mx3_I/AAAAAAAAAsQ/ff81ukusOaQ/s1600/spoiled' width='50'/>
:spoiled:
<img class='smiley' height='50' src='http://4.bp.blogspot.com/-sMTXJKkkN6s/USbDe-4r53I/AAAAAAAAApM/z9tHYfEsNck/s1600/idontcare.gif' width='50'/>
:idontcare:
<img class='smiley' height='50' src='http://2.bp.blogspot.com/-xyJqqhn5e_E/USbDdfuidKI/AAAAAAAAAow/fduMvg7GmBQ/s1600/greedy.gif' width='50'/>
:greedy:
<img class='smiley' height='50' src='http://3.bp.blogspot.com/-45gKNxxLW_o/USbDcpmBRAI/AAAAAAAAAoc/0TpqAY3GpQ8/s1600/deff.gif' width='50'/>
:deff:
<img class='smiley' height='50' src='http://1.bp.blogspot.com/-f_lY-9jOzqs/USbDcTbih3I/AAAAAAAAAoY/0RkYH9-eXGQ/s1600/depressed.gif' width='50'/>
:depresi:
<img class='smiley' height='50' src='http://1.bp.blogspot.com/-0H89HkzH9cY/USbDcPglIBI/AAAAAAAAAoU/OK_vgPceseU/s1600/dad.gif' width='50'/>
:asap:
<img class='smiley' height='50' src='http://4.bp.blogspot.com/-RdeFy_muYh8/USbDVYaNh1I/AAAAAAAAAmw/LdTdVaY-wU0/s1600/1+beer.gif' width='50'/>
:beer:
<img class='smiley' height='50' src='http://3.bp.blogspot.com/-xn8FH-fTWa8/USbDooB71-I/AAAAAAAAAsA/IzJARLQLPlw/s1600/slap.gif' width='50'/>
:slap:
<img class='smiley' height='50' src='http://3.bp.blogspot.com/-48DFDNHKIc0/USbDn2rwFEI/AAAAAAAAAro/vL-u7g57sZM/s1600/shake.gif' width='50'/>
:shake:
<img class='smiley' height='50' src='http://1.bp.blogspot.com/-IReB41OK-S4/USbDlkH1oCI/AAAAAAAAArE/ryW6vzpv3pg/s1600/order.gif' width='50'/>
:no:
<img class='smiley' height='50' src='http://2.bp.blogspot.com/-SZqJZf1mNlY/USbDrC_mPPI/AAAAAAAAAsk/yxF7OOqWWYk/s1600/support.gif' width='50'/>
:yahoo:
</b>
</div>

6. Simpan template.
7. Enjoy.

*Keterangan : Apabila terdapat lebih dari satu kode <p class='comment-footer'> maka letakkan dibawah kode yang ketiga.

Ok, gimana sob??? silahkan dicoba, dilihat, dan diamati serta diresapi dulu ya, wkwkwkk...

Sekian dulu sob, terima kasih semoga postingannya bermanfaat yaa...


64 comments

  1. This comment has been removed by the author.

    ReplyDelete
  2. Replies
    1. ok sama-sama semoga bermanfaat... :Q

      Delete
  3. Dicoba..
    http://firmanardyansyah.blogspot.com/

    ReplyDelete
  4. kode (body) di template ku kok gak ada ya :(

    pengen punya emoticone dikolom komentar juga :'(

    gimana dong?? :\

    ReplyDelete
    Replies
    1. kode </body> biasanya ada di bagian paling bawah coba scroll aja sampai bawah sis, atau script tersebut juga bisa diletakkan diatas </head>

      Delete
  5. gan gimana cara pake kodenya?? kan ada kode :yahoo: aku tuliskan dikomentar kok gak berubah?

    ReplyDelete
    Replies
    1. penggunaannya hanya copas saja kode emo nya di kotak komentar, asal sudah diikuti step2 nya termasuk scriptnya, emo nya pasti work kok...trims... :)

      Delete
    2. itu udah di kopas kodenya misalnya :yahoo: tapi gk berubah ya padahal udah ngelaksanaiin step2nya?

      Delete
    3. coba gunakan cara ini saja sob, letakkan kode berikut ini di atas kode </body> :

      <style type='text/css'>
      .emoWrap {
      background-color:#EEDE86;
      border:2px solid #D3BA59;
      padding:10px 14px;
      color:black;
      font:bold 12px Tahoma,Arial,Sans-Serif;
      text-align:center;
      }

      img.emo, input.emoKey {
      display:inline-block; /* Penting! */
      *display:inline;
      vertical-align:middle;
      }

      input.emoKey {
      border:1px solid #ccc;
      background-color:white;
      font:bold 11px Arial,Sans-Serif;
      padding:1px 2px;
      margin:0px 0px 0px 2px;
      color:black;
      }
      </style>
      <script type='text/javascript'>
      //<![CDATA[
      var emoRange = "#comments p, div.emoWrap",
      putEmoAbove = "#comment-editor",
      emoMessage = false;
      //]]>
      </script>
      <script src='https://aiizahh-reader.googlecode.com/svn/trunk/emotj.js' type='text/javascript'></script>


      kalau menggunakan ini lebih simple sob, dan sudah saya tes coba lihat hasil tes disini http://aiizahh-lab.blogspot.com/2013/04/artikel-1.html?showComment=1366683187806#c5002430022665800775 mungkin next saya akan update lebih banyak emo, semoga bermanfaat...

      Delete
    4. kan udah di pasang diatas body trus kode yang dipasang dibawah coment footer diilangin gk?

      Delete
    5. iya, dihapus saja kode dibawah comment-footer tersebut yang sebelumnya dipasang sob...

      Delete
    6. yang ini gk dihapus (http://aiizahh-smiley.googlecode.com/files/aiizahhsmiley.js) ???

      Delete
    7. dihapus juga gan, gunakan kode yang baru saja diatas... ^_^

      Delete
  6. TEST AHHHHH =p* =p* =p* =p* =p* =p* =p* =p*

    ReplyDelete
  7. kode <p class='coment ko g ada ya gan

    ReplyDelete
    Replies
    1. coba CTRL+F kode comment-footer saja gan...

      Delete
  8. tapi apa ndak bikin lambat ya mas loading blognya?

    ReplyDelete
  9. Mampir Copy scriptnya ya gan B)

    ReplyDelete
  10. This comment has been removed by a blog administrator.

    ReplyDelete
  11. test yach =p* =p* =p* \o/ \o/ <3

    bisa ngak... pas emoticon di klik langsung muncul di kotak komentar... yang ini copas kan...

    ReplyDelete
  12. Post agan yang terakhir soal Emoticon ini, bener-bener sebagai ganti post yang ini gan?. Maksud saya google-code yang " http://aiizahh-smiley.googlecode.com/files/aiizahhsmiley.js " ganti dengan https://aiizahh-reader.googlecode.com/svn/trunk/emotj.js.
    Post tambahan apa Post Ganti gan?.
    Terima kasih :-bd

    ReplyDelete
    Replies
    1. iya gan, sebagai postingan pengganti karena yang ini banyak yang mengatakan tidak work, jd gunain postingan yang baru saja gan, kalau yg itu tinggal masukkan 1 kode saja gan dan akan emo nya langsung bisa digunakan... :-bd

      Delete
  13. This comment has been removed by the author.

    ReplyDelete
  14. gan, tolong dibetulin dong pleased

    ReplyDelete
    Replies
    1. cek postingan : http://aiizahh.blogspot.com/2013/04/update-cara-membuat-emoticon-di-kotak.html

      Delete
  15. gan,tlg nih kok emoticonnya gk da diatas kotak komentar..?

    ReplyDelete
    Replies
    1. gunakan tutorial emot yang baru saja gan, yg ini sudah tidak dapat digunakan lagi...
      http://aiizahh.blogspot.com/2013/04/update-cara-membuat-emoticon-di-kotak.html

      Delete
  16. kok..!! nggak ada....!!!! aku punya :( :'( shake

    ReplyDelete
    Replies
    1. huhhh kan udah ada informasi nya diatas gan, gunakan tutorial terbaru saja di link yang saya sertakan pada postingan... cheer

      Delete
  17. trmksih mas infonya kapan2 bisadi coba,ni mas

    ReplyDelete
    Replies
    1. jangan coba yang ini gan, yang baru saja yang ini sudah tidak valid... pleased

      Delete
  18. wah, keren artikelnya gan
    Bermanfaat banget
    Jangan lupa komentarnya di http://adeputra-pkp.blogspot.com

    ReplyDelete
  19. Replies
    1. kan dah dikasih link baru gan
      http://aiizahh.blogspot.com/2013/04/update-cara-membuat-emoticon-di-kotak.html

      Delete
  20. Lumayan, langsung di coba.. thanks

    ReplyDelete
  21. haii Bagus emo yang anda buat, tapi sayang emonya terlalu besar. bisa di kecilkan nggak

    ReplyDelete
    Replies
    1. http://aiizahh.blogspot.com/2013/04/update-cara-membuat-emoticon-di-kotak.html

      Delete
  22. thanks tutorialnya, di tunggu kunjungan baliknya..
    Mig33 Eagle & Ash Princess Kawaii

    ReplyDelete
  23. Datang lagi untuk belajar memasang emoticon di kotak komentar, sista Alya. haii
    Sampai sekarang belum punya emo di kotak komentar saya. spoiled

    Terima kasih sudah berbagi.
    Salam blogger.

    ReplyDelete