Cara Membuat Emoticon Di Komentar Blogger

Memasang Emoticon Yahoo pada kotak komentar blog Blogger bermaksud untuk membuat tampilan komentar para komentator/pengunjung menjadi lebih menarik, selain itu dengan adanya fasilitas penambahan emoticon pada kotak komentar ini menjadikan para pengunjung blog kita bisa mengekpresikan emosi mereka dalam mengomentari postingan kita.

Bagi sobat blogger yang sudah pernah mencoba membuat emoticon di komentar blogger, namun sampai saat ini belum berhasil, silakan sobat membaca postingan saya ini. Semoga trik berikut ini support di template sobat. Harap di perhatikan langkah demi langkah....ingat ini merupakan trik Membuat Emoticon Di Komentar Blogger versi 2 jadi hanya cocok untuk kode template blogger versi 2 (terbaru). Tips dan Trik ini sebenarnya bisa juga diterapkan pada template klasik namun harus banyak perubahan kode script, biar ngga repot untuk yang cari pemasangan emoticon di kolom komentar v1 silakan baca pada postingan saya sebelumnya. Yuhh... langsung aja ke TKP...

Langkah 1

• Login ke blogger anda.
• Klik design kemudian edit template.
• Klik centang pada pilihan expand widget templates.
• Tekan tombol CTRL + F pada keyboard anda untuk mengaktifkan modus pencarian.
• Cari kode ]]></b:skin> pada template yang anda gunakan.
• Copy / Paste kode di bawah ini dan letakan di atas kode ]]></b:skin>
• .emoticon { margin: 0px 0px 0px 5px; }

Langkah 2

• Cari kode <data:blogCommentMessage/> atau yang mirip dengan kode tersebut.
• Tambahkan kode di bawah ini dan letakan di atas dan di bawah kode <data:blogCommentMessage/>.
• Kode : <dd class='emoticon'>        </dd>

Contoh :

kode 1 : <dd class='emoticon'>
             <p><data:blogCommentMessage/></p>
kode 2 : </dd>

• Cari kode <data:comment.body/> atau yang mirip dengan kode tersebut.
• Tambahkan kode di bawah ini dan letakan di atas dan di bawah kode <data:comment.body/>.
• Kode : <dd class='emoticon'>        </dd>

Contoh :
kode 1 : <dd class='emoticon'>
             <p><data:comment.body/></p>
kode 2 : </dd>

• Cari kode <a name='comments'/> atau yang mirip dengan kode tersebut kemudian lihat kode diatas <a name='comments'/> umumnya seperti kode <div class='comments'> atau seperti kode <div class='comments-wrap'>. Tambahkan kode [ id='comments' ] seperti contoh berikut ini.
  Contoh 1 : <div class='comments' id='comments'>
  Contoh 2 : <div class='comments-wrap' id='comments'>
• Ingat hanya tambahkan kode [ id='comments' ] jangan merubah nama class-nya.

Langkah 3

• Cari kode <p class='comment-footer'> atau yang mirip dengan kode tersebut.
• Tambahkan kode di bawah ini dan letakan di bawah kode <p class='comment-footer'>.
• The Code...
  

  <hr/> <div align='center'><span>&lt;a href=&quot;javascript:animatedcollapse.toggle(&#39;cemo&#39;)&quot;&gt;<span style='color: #ffffff;'><b>Yahoo Emoticon</b></span>&lt;/a&gt;</span><b style='color: #ffffff;'> | </b>&lt;a href=&quot;javascript:animatedcollapse.toggle(&#39;uiemo&#39;)&quot;&gt;<span style='color: #ffffff;'><b>Upin&amp;Ipin Emoticon</b></span>&lt;/a&gt;<b style='color: #ffffff;'> | </b>&lt;a href=&quot;javascript:animatedcollapse.toggle(&#39;kkemo&#39;)&quot;&gt;<span style='color: #ffffff;'><b>KasKus Emoticon</b></span>&lt;/a&gt;</div>
  <br/>
  
  <center>
  <div id='cemo' style='border: 1px solid #666666; -moz-border-radius:8px; -webkit-border-radius:8px; padding: 5px; background: #ebe9da; none repeat scroll 0% 0%; width: 510px; text-align: left; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; height: auto;'><center>
  <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></center></div></center>
  
  <center>
  <div id='uiemo' style='display:none; border: 1px solid #666666; -moz-border-radius:8px; -webkit-border-radius:8px; padding: 5px; background: #ffffff; none repeat scroll 0% 0%; width: 510px; text-align: left; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; height: 110px;'><center>
  <b><img height='50' src='http://lh3.ggpht.com/_UEOySJCSmVg/TC1_y45CSbI/AAAAAAAAA78/QsXnQdLYu7A/s800/ehsan01.gif' width='50'/>
  :a:
  <img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/TC1_zL6GKxI/AAAAAAAAA8A/hhFDtKzpMJo/s800/ehsan02.gif' width='50'/>
  :b:
  <img height='50' src='http://lh3.ggpht.com/_UEOySJCSmVg/TC1_zFOpRNI/AAAAAAAAA8E/IgAjo0-WC3k/s800/fizi01.gif' width='50'/>
  :c:
  <img height='50' src='http://lh6.ggpht.com/_UEOySJCSmVg/TC1_zAkM1fI/AAAAAAAAA8I/WbE7K08g2zU/s800/ipin01.gif' width='50'/>
  :d:
  <img height='50' src='http://lh5.ggpht.com/_UEOySJCSmVg/TC1_zSnurLI/AAAAAAAAA8M/SE6ijbGGRgY/s800/ipin02.gif' width='50'/>
  :e:
  <img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/TC2ACEPepaI/AAAAAAAAA8Q/Mr3O2IY_PwY/s800/kakros01.gif' width='50'/>
  :f:
  <img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/TC2ACUO5MxI/AAAAAAAAA8U/lOZem_1eYzA/s800/kakros02.gif' width='50'/>
  :g:
  <img height='50' src='http://lh6.ggpht.com/_UEOySJCSmVg/TC2ACWDn6NI/AAAAAAAAA8Y/BdPtc9HGzbc/s800/mail01.gif' width='50'/>
  :h:
  <img height='50' src='http://lh6.ggpht.com/_UEOySJCSmVg/TC2ACXXjJ6I/AAAAAAAAA8c/afGmF42wKNk/s800/upin01.gif' width='50'/>
  :i:
  <img height='50' src='http://lh3.ggpht.com/_UEOySJCSmVg/TC2ACt_jfiI/AAAAAAAAA8g/b0tn4s4TpUU/s800/upin02.gif' width='50'/>
  :j:
  </b></center></div></center>
  
  <center>
  <div id='kkemo' style='display:none; border: 1px solid #666666; -moz-border-radius:8px; -webkit-border-radius:8px; padding: 5px; background: #ffffff; none repeat scroll 0% 0%; width: 510px; text-align: left; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; height: 110px;'><center>
  <b><img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_sundul.gif' width='40'/>
  :ka:
  <img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/s_big_cendol.gif' width='40'/>
  :kb:
  <img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_shakehand2.gif' width='40'/>
  :kc:
  <img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_ngakak.gif' width='40'/>
  :kd:
  <img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_pertamax.gif' width='40'/>
  :ke:
  <img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_mewek.gif' width='40'/>
  :kf:
  <img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_siul.gif' width='40'/>
  :kg:
  <br/><img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_nosara.gif' width='40'/>
  :kh:
  <img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_takut.gif' width='40'/>
  :ki:
  <img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_tkp.gif' width='40'/>
  :kj:
  <img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_marah.gif' width='40'/>
  :kk:
  <img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_I-Luv-Indonesia.gif' width='40'/>
  :kl:
  <img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_hoax.gif' width='40'/>
  :km:
  <img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_berduka.gif' width='40'/>
  :kn:
  </b></center></div></center>
  &lt;div style=&quot;text-align: center;&quot;&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
  &lt;!--
  google_ad_client = &quot;ca-pub-6109930972696170&quot;;
  google_ad_host = &quot;pub-1556223355139109&quot;;
  /* MonoCore 468x15 Link */
  google_ad_slot = &quot;2912254634&quot;;
  google_ad_width = 468;
  google_ad_height = 15;
  //--&gt;
  &lt;/script&gt;&lt;a href=&quot;http://www.blogger.com/page-edit.do?blogID=7105494544424735270&amp;amp;pageID=1647161614117998862&quot;&gt;
  &lt;script src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot; type=&quot;text/javascript&quot;&gt;
  &lt;/script&gt;&lt;/a&gt;&lt;/div&gt;
• Jika kode <p class='comment-footer'> ada dua maka pilih yang kedua atau yang ada di bawah.

Langkah 4

• Cari kode </head>.
• Tambahkan kode di bawah ini dan letakan di atas kode </head>.
  
• The Code...
  

  <script src='http://7startmenu.googlecode.com/files/jquery_vstart.js' type='text/javascript'/>
  <script src='http://7startmenu.googlecode.com/files/animatedcollapse.js' type='text/javascript'/>
  <script type='text/javascript'>
  animatedcollapse.addDiv(&#39;cemo&#39;, &#39;fade=1&#39;)
  animatedcollapse.addDiv(&#39;uiemo&#39;, &#39;fade=1&#39;)
  animatedcollapse.addDiv(&#39;kkemo&#39;, &#39;fade=1&#39;)
  animatedcollapse.ontoggle=function($, divobj, state){}
  animatedcollapse.init()
  </script>
• Kode tersebut berfungsi sebagai Show / Hide Script.

Langkah 5

• Cari kode </body>.
• Tambahkan kode di bawah ini dan letakan di atas kode </body>.
• The Code...
  

  <script src='http://7startmenu.googlecode.com/files/smiley_comment.js' type='text/javascript'/>
  <script src='http://7startmenu.googlecode.com/files/upinipin_smiley_comment.js' type='text/javascript'/>
  <script src='http://7startmenu.googlecode.com/files/kaskus_smiley.js' type='text/javascript'/>

Selamat mencoba...jika ada pertanyaan silakan tulis di kolom komentar....

Posted in: Blogger, Tips and Trik