Pages

DonkeyMails.com: No Minimum Payout
Server : Channel :
Use List | DalNet Commands (Open) | Help

Wednesday, March 7, 2012

Cara Membuat Emoticon Di Komentar Blogger #2


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) kemudian copy 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>

    - 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...
<script src='http://monozcore-project.googlecode.com/files/smiley_comment.js' type='text/javascript'/>
<script src='http://monozcore-project.googlecode.com/files/upinipin_smiley_comment.js' type='text/javascript'/>
<script src='http://monozcore-project.googlecode.com/files/Monozcore_Kaskus_Emoticon.js' type='text/javascript'/>
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 :.
DMCAProtected by CopyscapeMyFreeCopyright.com Registered & Protected
Share :
Comments
Tweets
35 Comments

35 comments:

  1. . . aq jadi yg pertama ne. he..86x. GudLuck ya?!? . .

    ReplyDelete
  2. monozcore kok saya lihat script aneh ya..!! :d :-/

    ReplyDelete
  3. ERORR NIH http://fhandikainternet.blogspot.com/ :(

    ReplyDelete
  4. M.Fhandika : ya terang aja error scriptnya belom dipasang.... coba tutorialnya dibaca dulu ikuti langkah demi langkah... jangan terburu2... oke sob

    ReplyDelete
  5. dah aku test tanpa rubah script tetep hasilnya galat, langkah yang ke tiga tuh mas, yg pertama dan ke 2 gk ada masalah saat pratinjau, aku sengaja buat blogs baru cuma buat test emo doank, biar tau template apa yang support sama emo, kalau blogs yang lama takutnya berantakan gonta ganti template, kalau boleh saran, minta template yang cocok donk buat emo, ok om :D :a:

    ReplyDelete
  6. Bisa koq tadi saya dah mampir dan test di blog sobat... gimana kerenkan... jangan lupa supportnya ya...

    ReplyDelete
  7. ok ty, ak dah join ke blog km, visit back ya n join jg di blog saya... ;)

    ReplyDelete
  8. gan, ada msalah sdikit ni..??
    kotak gambar nya gk poll di template blog ane..
    jd gambarnya kgak kliatan smua..
    g mna cara ngatur ukuran nya...
    trs gi mana ngilangin tlisan di bawah nya tu..??
    tolong pencerahannya...

    ReplyDelete
  9. oke bang..
    mkasih atas pencerahan nya.. udah bisa ..


    :kc:

    ReplyDelete
  10. gan pnya sya kok gak muncul yah?
    mohon pncerahannya dong..
    :kf:.

    ini blog saya rifgimbal.blogspot.com

    ReplyDelete
  11. @rifersgothicz: seperti yang sering saya bilang jangan gunakan kode jquery lebih dari satu karena bisa mengakibatkan konflik pada script atau widget yang lain. Apabila anda menggunakan jquery lebih dari satu coba gunakan kode no-conflict supaya scriptnya bisa berjalan normal.

    ReplyDelete
  12. cara nya make kode no-conflict nya gmn yah gan?? d:

    ReplyDelete
  13. @rifers: coba nich...
    <script>jQuery.noConflict();</script>

    ReplyDelete
  14. taruh diatas kode jquery atau diatas </Head>

    ReplyDelete
  15. tetap gak mau niih gan??
    gimana yah??
    niih contohnya gan:
    http://rifgimbal.blogspot.com/2012/04/cool-pool-portable.html?showComment=1335762494492#c2205651686189343866

    ReplyDelete
  16. coba gunakan variabel
    <script>
    tag="div";
    clas="comment-body-author";
    </script>

    oh ya hapus juga kode no-conflict... dan juga hapus kode link berikut:

    https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
    http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
    http://code.jquery.com/jquery-latest.js
    http://7startmenu.googlecode.com/files/jquery_vstart.js
    var jQuery = $.noConflict(true);
    http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js
    $.noConflict(true);
    http://sites.google.com/site/epgstudiosite/javascript/jquery.min.js

    pasang satu jquery saja :
    http://code.jquery.com/jquery-latest.js

    di coba dulu...

    ReplyDelete
  17. SUKSES gan ..
    Oke skrg ane udh ngerti THANKS Banget ..

    Gan Join di blog ane dong,entar ane follback..
    sekalian tukeran link gan...he
    :kc:

    ReplyDelete
  18. aneh sob
    yg nomor 3
    error pas di save template
    :kn:

    ReplyDelete
  19. sob kok template nya error ketika save template ???? ~x(

    ReplyDelete
  20. Bagus sob. Semoga adsnya lancar ya. hehehe

    ReplyDelete
  21. Sob,email nya apa .. saya gagal trus tiap masang emoticon :kn: :kn:

    ReplyDelete
  22. malah muncul tulisan gini " Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: Open quote is expected for attribute "{1}" associated with an element type "language".
    Error 500

    apanya itu gan??? :kk:

    ReplyDelete
  23. Gan kenapa ga muncul ya??
    coba dicek anangirawan.co.cc :i:

    ReplyDelete
  24. gan kog emoction kaskusnya ga bisa dipake ya?
    padahal uda nongol di Pos komentar tuh...
    klo di pake cuma muncul kode emoction nya doank tuh apanya gan??? :kf:
    coba komen/cek bang anangirawan.co.cc

    #Thanks Before

    ReplyDelete
  25. penyebabnya apa gan kog emoctiona ga muncul tuh padahal uda bisa kepasang di blog ane . . . coba dicek dong gan . . .
    anangirawan.co.cc :kg:

    ReplyDelete
  26. Gan...code pertama sih bisa tapi code
    Head ama Body...Gimana nih Gan...

    ReplyDelete