Friday, July 31, 2009

Membuat emoticon pada komentar blog

emoticonKali ini kita akan memasukan emoticon bergambar pada bagian komentar, sehingga para pengunjung dapat mengungkapkan emosinya dengan gaya yang menarik, he3… trik cukup gampang dan mudah sekali di implementasikan, ikuti saja langkah-langkahnya dan hanya dalam lima menit blog anda sudah menjadi semakin hidup oleh icon-icon yang imut-imut dan lucu.

    1. Login ke Blogger dan langsung menuju Layout > Edit HTML.

    2. Jangan lupa backup template anda terlebih dahulu, untuk menghindari kesalahan-kesalahan yang tidak disengaja.

    3. Centang Expand Widget Templates, dan temukan kedua baris kode berikut ini, anda bisa melakukanya dengan fungsi pencarian.

      <p class='comment-footer'>
      <b:if cond='data:post.embedCommentForm'>

    4. Kemudian sisipkan kode-kode berikut ini diantar kedua baris diatas, sehingga menjadi seperti ini:

      <p class='comment-footer'>
      <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'/> :D
      <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'/> L(
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> J
      <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> L
      <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'/> :-o
      <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'/> K
      <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'/> J]
      <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:if cond='data:post.embedCommentForm'>
    5. Nah, sekarang tinggal kita sisipkan kode Scriptnya seperti dibawah ini dan sisipkan sebelum tag </body>
      <script src='http://vishalgkr.googlepages.com/smiley.js' type='text/javascript'/><noscript><a href="http://www.tricksmachine.com" target="_blank">Tricks Machine</a></noscript>
    6. Selesai, simpan kembali template anda. Sekarang dibagian terlihat emotikon dibawah posting, seperti diblog ini neh… he3…

    Sumber Kode, http://www.tricksmachine.com

    20 comments:

    Juliawan said...

    wao nice tips bro bisa nich entar gua coba deh hehehhee

    alfon said...

    sepp banget mas bisa juga dipake di blog saya yang memakai blogspot :)

    sobat(tutorial blog) said...

    mampir ..hehehe kayanya keren neh:-*

    Anonymous said...

    Mana iconnya ? kok gak ada

    Zniper said...

    @Anonymous, Oh ya. Terimakasih telah mengingatkan. Soalnya baru ganti template jadi ada beberapa script yang hilang. Kini muncul lagi deh... he3

    antwa said...

    Itu kan haru kita copy paste carakter yang diinginkan, klo misalnya emoiconya tinggal klik trus ntar muncul di komentar gimana tuh caranya??mohon pencerahanya???

    deni mandala said...

    tes ;;)

    Irfan said...

    makasih inponya ;)

    Music_stars said...

    ;)) ;)) ;;) :D ;) :p L( J L ;X =(( :-0 :-/ :-* K 8-} J]

    DeeAi said...

    :))

    Adi said...

    nice tips...it's work...J

    Bam said...

    I'll try .. Thank u so much..
    ;)

    ARSy corp said...

    Wah mantab neh kayanya, perlu dicoba neh..CAPCUS...

    Makasih ilmunya...hohohohohohoho

    Anonymous said...

    good lah ;))

    cintiia said...

    okeeee .. J]

    Anonymous said...

    :)) thanx..

    AFanIndoMp3 said...

    kok gx jadi ya :))

    tutorial photoshop said...

    sekali coba langsung sukses gene yang kusuka :D

    tutorial photoshop said...

    o ya sob PR GOOGLE blog ini 3
    tapi alexa rank nya kok segituan ?

    Anonymous said...

    :D

    :)) ;)) ;;) :D ;) :p L( J L :X =(( :-o :-/ :-* K 8-} J] ~x( :-t b-( :-L x( =))

    Post a Comment