Senin, 04 Februari 2013

14 Cara Membuat Emoticon Di Komentar Blogger




Melanjutkan postingan saya sebelumnya tentang memasang emoticon di komentar blogger, pada postingan kali ini saya mencoba untuk menyederhanakan cara pemasangan trik ini sehingga lebih mudah untuk diaplikasikan dan juga bisa berhasil untuk pemasangan emoticon di komentar blogger. Postingan kali ini juga untuk menggantikan postingan yang lama dikarenakan banyak kegagalan dalam menerapkan pemasangan emoticon di komentar blogger, tapi postingan lama tetap saya pasang karena cara yang lama masih cocok digunakan untuk template blog yang masih menggunakan versi lama.

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.

Memang banyak sekali cara untuk trik pemasangan emoticon di komentar blog apabila kita cari melalui search engine google, kebanyakan dari para blogger yang membuat postingan trik pemasangan emoticon di komentar blogger ini masih menggunakan cara lama yang kebanyakan gagal untuk diaplikasikan, kalo ga percaya coba tes dikotak komentar blogger yang membuat postingan pemasangan emoticon di komentar pasti kebanyakan tidak keluar emoticonnya alias gagal. Biasanya yang gagal cuma copy-paste (copas) doank... alias tidak di coba dahulu sebelum membuat postingan artikel pemasangan emoticon di komentar... Semoga sobat blogger yang membaca postingan artikel ini bukan termasuk orang suka copas postingan artikel orang lain tanpa seizin yang punya... hehehe :):) oke sob... langsung aja kita ke TKP...

Cara Pemasangan :
  • Login ke  blog sobat...

  • Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.


  • Cari kode <p class='comment-footer'> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudiancopy kode di bawah ini dan paste di bawah kode <p class='comment-footer'>tersebut. Jika kode <p class='comment-footer'> ada dua maka pilih yang kedua atau yang ada di bawah.

    <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: 50px;'><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://lh5.googleusercontent.com/-0n2cpDdK2os/Tz4AI_R7UTI/AAAAAAAAA_M/BnRcao-IwHU/s800/ehsan01.gif' width='50'/>
    :a:
    <img height='50' src='http://lh5.googleusercontent.com/-mCQ8cZ4yC2w/Tz4Adaz50AI/AAAAAAAAA_g/3hSH4T0ludY/s800/ehsan02.gif' width='50'/>
    :b:
    <img height='50' src='http://lh6.googleusercontent.com/-JeWZ9SuEl3I/Tz4AdfXqxtI/AAAAAAAAA_k/bRuWwS40qbg/s800/fizi01.gif' width='50'/>
    :c:
    <img height='50' src='http://lh4.googleusercontent.com/-6mKK55Etzcw/Tz4AdZ-42gI/AAAAAAAAA_o/W5dAjrP2BYg/s800/ipin01.gif' width='50'/>
    :d:
    <img height='50' src='http://lh3.googleusercontent.com/-ToHD6mdqv6g/Tz4Aep8-1uI/AAAAAAAAA_w/S5ACTAENsKk/s800/ipin02.gif' width='50'/>
    :e:
    <img height='50' src='http://lh3.googleusercontent.com/-ywRCTv7chXA/Tz4AevsyowI/AAAAAAAAA_0/xg7vya2vtvA/s800/kakros01.gif' width='50'/>
    :f:
    <img height='50' src='http://lh3.googleusercontent.com/-ydaj69VDdlU/Tz4Aey6BEnI/AAAAAAAAA_4/uvq3GU3v3Eg/s800/kakros02.gif' width='50'/>
    :g:
    <img height='50' src='http://lh6.googleusercontent.com/-xXDkjM8SNKM/Tz4AgAW3BqI/AAAAAAAABAM/BvrkzDUUtaY/s800/mail01.gif' width='50'/>
    :h:
    <img height='50' src='http://lh3.googleusercontent.com/-M83gze63Ecg/Tz4Af-QFh3I/AAAAAAAABAY/ZVhNb62CAcg/s800/upin01.gif' width='50'/>
    :i:
    <img height='50' src='http://lh5.googleusercontent.com/-RV7AvDrQBIg/Tz4AgFP6TDI/AAAAAAAABAU/baVU339IpcQ/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: 150px;'><center>
    <b><img src='http://lh4.googleusercontent.com/-elteyu9j0ZA/T0DJ4ZPOPEI/AAAAAAAABE0/V164S3vG2Es/s800/sundul.gif' width='40'/>
    :ka:
    <img src='http://lh4.googleusercontent.com/-kfpB6BSl6L8/T0DHBGQPvXI/AAAAAAAABEc/09bf8p8ilgA/s800/s_big_cendol.gif' width='40'/>
    :kb:
    <img src='http://lh6.googleusercontent.com/-6aweKr9ee1g/T0DKdz_ubLI/AAAAAAAABE8/Lm05aw2WulQ/s800/shakehand2.gif' width='40'/>
    :kc:
    <img src='http://lh5.googleusercontent.com/-UGl56_JqXyI/T0DG9YM_ckI/AAAAAAAABD8/cAMkupClLKg/s800/ngakak.gif' width='40'/>
    :kd:
    <img src='http://lh4.googleusercontent.com/-KKRlwKznE44/T0DNePlvN7I/AAAAAAAABFI/mK-hYCJSeQA/s800/pertamax.gif' width='40'/>
    :ke:
    <img src='http://lh4.googleusercontent.com/-02G-YphioXQ/T0DOuYYOpuI/AAAAAAAABFQ/2oSLOlYjITU/s800/mewek.gif' width='40'/>
    :kf:
    <img src='http://lh4.googleusercontent.com/-JLQ6VLH_8eQ/T0DPBxzIdTI/AAAAAAAABFY/DGR2Z1-mIhI/s800/siul.gif' width='40'/>
    :kg:
    <br/><img src='http://lh6.googleusercontent.com/-NuLf-BR5G6s/T0DPbNElt0I/AAAAAAAABFg/kLUppnbhq-c/s800/nosara.gif' width='40'/>
    :kh:
    <img src='http://lh6.googleusercontent.com/-G8IStEoj5nA/T0DG-37KP1I/AAAAAAAABEM/yKosc-fG74g/s800/takut.gif' width='40'/>
    :ki:
    <img src='http://lh3.googleusercontent.com/-h46OZLQh1O0/T0DR2RiRkYI/AAAAAAAABFo/1BzbpPNoi20/s800/tkp.gif' width='40'/>
    :kj:
    <img src='http://lh4.googleusercontent.com/-1dkfWvZdWMI/T0DG8O8_yWI/AAAAAAAABDc/_AkfKeuYKqo/s800/marah.gif' width='40'/>
    :kk:
    <img src='http://lh4.googleusercontent.com/-fF0HMqivVyo/T0DSUGEritI/AAAAAAAABFw/PXHJoVAUVj4/s800/I-Luv-Indonesia.gif' width='40'/>
    :kl:
    <img src='http://lh3.googleusercontent.com/-o_sl8EExmy4/T0DSjQrp8xI/AAAAAAAABF4/aFVdE7pcYaw/s800/hoax.gif' width='40'/>
    :km:
    <img src='http://lh4.googleusercontent.com/-tlF97MhC7qA/T0DG6Br_JaI/AAAAAAAABDA/bRohHV6W7xQ/s800/berduka.gif' width='40'/>
    :kn:
    <img src='https://lh5.googleusercontent.com/-0HyrFtM0xY4/TtIYkw07p4I/AAAAAAAAAic/9XBkBP4peOE/s800/ngacir2.gif' width='40'/>
    :km:
    <img src='https://lh3.googleusercontent.com/-kAjMVdQiNi4/TtIYwDokFDI/AAAAAAAAAik/crirrAjPFpQ/s800/bis.gif' width='40'/>
    :ko:
    </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;

    - Keterangan :
    • Fungsi dari pemasangan kode ini adalah untuk menyediakan preview dari emoticon yang disediakan pada komentar blogger yaitu emoticon yahoo, upin & ipin dan kaskus.

  • Cari kode </Head> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode</Head> tersebut.
    <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>

    - Keterangan :
    • Kode script diatas merupakan kode untuk mengatur preview emoticon dan animasi saat memilih preview emoticon yang ingin digunakan.
    • Kode yang berwana biru merupakan kode script jquery jika sudah memasang jquery di blognya silakan sobat hapus kode di atas yang berwarna biru.

  • Cari kode </Body> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode </Body> tersebut.
    <script>

    tag="p";
    clas="comment";

    </script>
    <script src="http://monozcore-project.googlecode.com/files/MonozCore%20Emoticon%20Script.js" language=javascript></script>

    - Keterangan : 
    • Kode yang berwana biru merupakan kode variabel tag dan class yang akan digunakan untuk merubah teks menjadi emoticon dimana teks tersebut merupakan lokasi yang ada di dalam tag dan class. Harap jangan dirubah kecuali emoticon tidak berhasil terlihat maka silakan ikuti langkah berikutnya.

  • Klik "Save" untuk menyimpan template blog, dan lihat hasilnya...
Langkah Berikutnya Jika Emoticon Tidak Terlihat :

Oke...sob silakan ikuti langkah-langkah di bawah ini jika dan hanya jika prosedur diatas tidak berhasil, hehehe :):) sedikit dramatisir biar tambah seru....
  • Silakan sobat test di kotak komentar dengan menuliskan karakter yang akan dirubah menjadi emoticon, contoh: tuliskan teks ==> :)) :a: :ka:

  • Lihat apakah teks tersebut berubah menjadi emoticon ???. Jika tidak maka kita edit teks tersebut dengan cara men-select (memilih) teks tersebut mulai dari atas avatar sampai teks karakter tersebut, kemudian klik kanan ==> klik "View Selection Source" ==> cari teks karakter emoticon (:a: :ka: atau yang karakter emoticon yang diketik pada saat mau men-test dalam contoh ini karekter yang digunakan adalah :ka: ) pada kode HTML yang ditampilkan saat page editor ditampilkan.




  • Pada gambar ke-3 perhatikan pada kode yang terpilih, karakter emoticon diapit oleh tag "p" di dalam class "comment-content" (<p class="comment-content" id="bc_0_0MC">:ka:</p>). Kode tersebut bisa berbeda-beda tergantung template yang digunakan.

  • Sekarang kita kembali pada kode script diatas :

    <script>
    tag="p";
    clas="comment";
    </script>

    Silakan dirubah variabelnya pada kode script di atas menjadi

    <script>
    tag="p";

    clas="comment-content";
    </script>

  • Klik "Save" dan coba lihat hasilnya...
Wuiihhh cape juga bikin postingan ini, oke.. bro jangan lupa cendolnya dan saya mohon jika ingin menggunakan artikel ini atau meng-copas seluruh postingan artikel ini harap sumber dari artikel dicantumkan. Selamat mencoba...jika ada pertanyaan silakan tulis di kolom komentar...

.: Semoga Bermanfaat :.

14 Comments

YESHIA mengatakan...

Mau pasang di blog aku ah

haekal afri mengatakan...

Pasang aja

maulana nakashima mengatakan...

Wow keren infonya :)

blogwalking komenback ke

rpl-yes.blogspot.com (no lifelink)

haekal afri mengatakan...

Ok

RIDHWANBLOGZ DOFOLLOW BLOG mengatakan...

Bermanfaat sekali gan :D

teteh reny berbagi informasi mengatakan...

informatif sekali artikel nya :: pasang banner sama aku mau gak ::::

haekal afri mengatakan...

@ridhwan : terimakasih telah berkunjung
@teteh : hahahaha boleh jugabtuh change banner

Rama Banten Blogs mengatakan...

mantap.. like ahh

dian mengatakan...

tanks

Tofa Riyadi mengatakan...

hadeh,,,
panjang amat sob...
rajin kali ngetiknya, :D
mantab sob, n
anjutkan!!! :)

sherina mengatakan...

makasih informasinya

aulian yoga mengatakan...

:P tes

Anonim mengatakan...

mantap

Putra Blerong mengatakan...

coba di coba,

Bagaimana Pendapat Anda ?