Laman

  • HOME
  • LOMBA BLOG
  • ARTIKEL
  • TUTORIAL
  • ORDER DESIGN
  • ABOUT ME
  • JUAL KEFIR
JASA DESIGN BLOG KHUSUS BLOGSPOT & JUAL PRODUK KEFIR

Cara Memasang Emoticon di Komentar Blog

Agustinadian Susanti | Selasa, Agustus 20, 2013 |
Saat Blogwalking (BW) ke blog-blog teman, saya sempat tertarik dengan emoticon lucu yang bisa dicantumkan di dalam komentar blog seperti ini: 
Mulai deh browsing cara memasangnya dari google. Belasan tutorial coba saya ikuti tapi ga ada yang berhasil entah saya yang salah masukin kode scriptnya atau entahlah bingung saya. 

Dalam kebingungan dan sempet frustasi, tapi hati masih penasaran karena pengen banget bisa masang emoticon di blog saya. Keesokan harinya, saya coba lagi dan mulai bertanya kepada teman yang kasih tutorial ini. Untungnya beliau sabar sekali menjawab pertanyaan bertubi-tubi dariku. Hehe, ya itulah saya dengan rasa ingin tahu yang besar kadang yang saya tanyai bisa emosi dan keluar asap kali kepalanya karena jengkel haha..#lebay.com. 

Ok, kalau ga ada kesulitan ya ga belajar kan? Hari ini saya sudah berhasil memasangnya di blog. Jadi nanti kalau Anda sekalian komentar di blogku jangan lupa dicoba ya sertakan emotion lucunya hehe…

Caranya klik dulu emoticon yang Anda mau lalu copy kodenya (Ctrl+C) baru paste (Ctrl+V) di komentar. Nah, setiap saya sudah berhasil menerapkan sesuatu pasti langsung aku bagi deh buat Anda pengunjung setia blogku yang mau belajar. Ga afdol rasanya punya ilmu ga dibagi-bagi hehe. Mohon sabar ya mengikuti tutorial ini dan hati-hati soalnya pake acara edit template yang penuh kode CSS salah sedikit kacau balau deh tapi tenang aja ada solusinya. Ikuti ya: 

1. Log in ke www.blogger.com 
2. Klik Template 
3. Edit HTML 
4. Centang Expand Widget Template 
5. Cari kode </body> (caranya dengan menekan Ctrl+F di dalam kotak) 

dan copy kode dibawah ini (Ctrl+C) → paste (Ctrl+V) /letakkan kode berikut tepat diatasnya

Kode Script:
<b:if cond='data:blog.pageType == &quot;item&quot;'> <script type='text/javascript'> //<![CDATA[ var emoRange = "#comments p, div.emoWrap", putEmoAbove = "iframe#comment-editor", emoMessage = "To insert emoticon you must added at least one space before the code."; // Emoticon bar before comment-form $(function() { $(putEmoAbove) .before('<div style="text-align:center" class="emoWrap"> :) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :&gt;) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer <br/><b>Click to see the code!</b><br/>To insert emoticon you must added at least one space before the code.</div>'); var emo = function(emo, imgRep, emoKey) { $(emoRange) .each(function() { $(this) .html($(this) .html() .replace(/<br>:/g, "<br> :") .replace(/<br>;/g, "<br> ;") .replace(/<br>=/g, "<br> =") .replace(/<br>^/g, "<br> ^") .replace(emo, " <img style='max-height:24px' src='" + imgRep + "' class='emo delayLoad' alt='" + emoKey + "' />")); }); }; emo(/s:))+/g, "https://lh3.googleusercontent.com/-duNoMAb1RS4/T2WEWrOfR8I/AAAAAAAACZ0/ObgHf-PmTuE/s36/03.gif", ":))"); emo(/s;((+/g, "https://lh6.googleusercontent.com/-LIr-ZdDp2xI/T2WEYDacVnI/AAAAAAAACaY/W7MF5qKO2sE/s47/06.gif", ";(("); emo(/s:)+/g, "https://lh6.googleusercontent.com/-Q5lMkgcmVR4/T2WEWkNi3MI/AAAAAAAACZ4/7VBYeVbx7kA/s36/01.gif", ":)"); emo(/s:-)+/g, "https://lh3.googleusercontent.com/-mCsZPeixHvA/T2WEWivv9FI/AAAAAAAACZw/64ZGRgdlDeg/s36/02.gif", ":-)"); emo(/s=))+/g, "https://lh5.googleusercontent.com/-u__sc3DgZ2c/T2d0_lDLueI/AAAAAAAACkw/YbeuRNde61Q/s36/03a.gif", "=))"); emo(/s;(+/g, "https://lh5.googleusercontent.com/-EwonQGBTYwo/T2WEXeVq3oI/AAAAAAAACZ8/4ixt2ZVlqrI/s36/04.gif", ";("); emo(/s;-(+/g, "https://lh3.googleusercontent.com/-fMtAZDakmBI/T2WEXswr5BI/AAAAAAAACaA/83R1X_PumTk/s36/05.gif", ";-("); emo(/s:d/ig, "https://lh3.googleusercontent.com/-Em3lvBgvYlI/T2WElbV0BaI/AAAAAAAACdI/ApynphQdka8/s36/7.gif", ":d"); emo(/s:-d/ig, "https://lh4.googleusercontent.com/-0R7-2DC1klM/T2WEmMQajfI/AAAAAAAACdM/-4JFCeC6QD8/s36/8.gif", ":-d"); emo(/s@-)+/g, "https://lh5.googleusercontent.com/-PE2GWBseiGk/T2acYH_uNRI/AAAAAAAAChg/HloTeaRIdyQ/s36/09.gif", "@-)"); emo(/s:p/ig, "https://lh5.googleusercontent.com/-nkyzLkHUPg8/T2WEYdFqFxI/AAAAAAAACaQ/Mu1yPq91yuc/s36/10.gif", ":p"); emo(/s:o/ig, "https://lh6.googleusercontent.com/-0-zgLVgK2Cg/T2WEY10FXuI/AAAAAAAACag/dyKQ5pPUIGQ/s36/11.gif", ":o"); emo(/s:&gt;)+/g, "https://lh3.googleusercontent.com/-xbWqvOWJNE0/T2WEZM-VLTI/AAAAAAAACak/8dLATIlXRDk/s36/12.gif", ":&gt;)"); emo(/s(o)+/ig, "https://lh4.googleusercontent.com/-cguZVxYzR3o/T2WEZSgFvUI/AAAAAAAACas/nDJgr6YcuaI/s36/13.gif", "(o)"); emo(/s[-(+/g, "https://lh5.googleusercontent.com/-VKGWq-wPGUw/T2WEaEQLA9I/AAAAAAAACa4/ZDnLP29mlgk/s36/14.gif", "[-("); emo(/s:-?/g, "https://lh6.googleusercontent.com/-hIVRIc7IAJw/T2WEaO5ASUI/AAAAAAAACaw/FLmCvzeMSbc/s36/15.gif", ":-?"); emo(/s(p)+/ig, "https://lh4.googleusercontent.com/-hk3q3tP-0Pg/T2WEcRONc5I/AAAAAAAACbY/bJ00rge5Mq8/s36/16.gif", "(p)"); emo(/s:-s/ig, "https://lh5.googleusercontent.com/-cysJNcXxT-Q/T2WEcxVM5dI/AAAAAAAACbU/Mvuc437f1ZI/s36/17.gif", ":-s"); emo(/s(m)+/ig, "https://lh6.googleusercontent.com/-H20tIsy7Hvw/T2WEbDW0R7I/AAAAAAAACbE/DymXsZOmO3s/s36/18.gif", "(m)"); emo(/s8-)+/ig, "https://lh4.googleusercontent.com/-IvNFZtzJJYI/T2WEcDj-0NI/AAAAAAAACbM/kiqtHbdkarQ/s36/19.gif", "8-)"); emo(/s:-t/ig, "https://lh5.googleusercontent.com/-XCXdaCYaOGE/T2WEcmd15EI/AAAAAAAACbQ/Z5UyZCuX4Xo/s36/20.gif", ":-t"); emo(/s:-b/ig, "https://lh4.googleusercontent.com/-g6V0tBD1vwk/T2WEdRGJfWI/AAAAAAAACbo/P8P_SGEdhzI/s36/21.gif", ":-b"); emo(/sb-(+/ig, "https://lh6.googleusercontent.com/-ErUGB8ea0H4/T2WEdm5-ZSI/AAAAAAAACbs/245Hxnaa82g/s35/22.gif", "b-("); emo(/s:-#/ig, "https://lh6.googleusercontent.com/-p-5AT-amLik/T2WEi_MJDqI/AAAAAAAACco/5J-MqivSQw4/s36/23.gif", ":-#"); emo(/s=p~/ig, "https://lh3.googleusercontent.com/-H8izCFTaHFE/T2b39mmu2NI/AAAAAAAACkM/k4bDdFe301U/s36/24.gif", "=p~"); emo(/s$-)+/ig, "https://lh5.googleusercontent.com/-LZn6dX8GslQ/T2W30lpp_kI/AAAAAAAAChA/Rym2Ql5H-jU/s36/25.gif", "$-)"); emo(/s(b)+/ig, "https://lh5.googleusercontent.com/-k6r8YBUhxVk/T2WEgBtjFtI/AAAAAAAACcE/U5U5uPCpxq8/s36/26.gif", "(b)"); emo(/s(f)+/ig, "https://lh5.googleusercontent.com/-pj6fMvZXTyc/T2WEga9-gjI/AAAAAAAACcM/kVpUCa7uqpw/s36/27.gif'", "(f)"); emo(/sx-)+/ig, "https://lh3.googleusercontent.com/-zI2UJmwerDM/T2WEhSRkuTI/AAAAAAAACcc/Gr3xFDrZF3Y/s36/28.gif", "x-)"); emo(/s(k)+/ig, "https://lh3.googleusercontent.com/-ilBYLLWFQJQ/T2WEiJXJ7LI/AAAAAAAACcY/bXpkIPuVUto/s36/29.gif", "(k)"); emo(/s(h)+/ig, "https://lh5.googleusercontent.com/-_NHYkuf5bZg/T2WEjOhTIxI/AAAAAAAACcg/76qRE27R_ig/s36/30.gif", "(h)"); emo(/s(c)+/ig, "https://lh6.googleusercontent.com/-O6m44_Z-8AA/T2WEjLRImnI/AAAAAAAACck/c_jh643HU6o/s36/31.gif", "(c)"); emo(/scheer/ig, "https://lh5.googleusercontent.com/-9TYEg93ImUM/T2WEjvuhxTI/AAAAAAAACc0/KQRBXuuV_Yg/s36/32.gif", "cheer"); // Show alert one times! $('div.emoWrap') .one("click", function() { if (emoMessage) { alert(emoMessage); } }); // Click to show the code! $('.emo') .css('cursor', 'pointer') .live("click", function(e) { $('.emoKey') .remove(); $(this) .after('<input class="emoKey" type="text" size="' + this.alt.length + '" value=" ' + this.alt + '" />'); $('.emoKey') .trigger("select"); e.stopPropagation(); }); $('.emoKey') .live("click", function() { $(this) .focus() .select(); }); }); //]]> </script> </b:if>
6. Untuk mengatur besarnya kotak, background, dan border emoticonnya cari kode ]]></b:skin>   (caranya sama dengan menekan Ctrl+F di dalam kotak) dan copy kode dibawah ini (Ctrl+C) → paste (Ctrl+V) /letakkan kode berikut tepat di atasnya
.emoWrap{width:540px; height:100px; background:#fff; border: 1px solid #ccc; margin:5px; padding:10px;}
7. Cari kode </head> (caranya dengan menekan Ctrl+F di dalam kotak) dan copy kode dibawah ini (Ctrl+C) → paste (Ctrl+V) / letakkan kode berikut tepat di atasnya

Kode Script:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
8. Simpan dan Lihat Blog Anda 

Selamat mencoba ya…semoga berhasil… 

Sumber: 
http://junedalbughisy.blogspot.com/2013/06/cara-memasang-emotion-keren-pada.html

49 komentar:

  1. Keren mbak Susan. Salut dengan pribadi mbak yang suka berbagi ilmu. Sejak saya bergabung di IIDN, saya jadi sering intip blognya mbak Susan buat baca dan pelajari ilmu yg mbak bagi. Makasih buanyak ya mbak Susan.

    BalasHapus
    Balasan
    1. Oh ya? btw, kog namanya Anonim? saya kan jadi ga tau siapa Anda [-( hehe...makasi sudah mengintip blogku

      Hapus
  2. Kode sbanyak ituh membuat Blog tampil lebih cantik ya, Mba.
    Oiya, ada template yang menyediakan emotikon ini secara otomatis lho, Mba. Sudah tau, kan? :)

    BalasHapus
    Balasan
    1. oh ya? masa? wah saya blum tau tuh mbak...hm..kasih tau donk hehe :-?

      Hapus
  3. Kereen banget emoticonnya jadi pengin nyobaa, wowww :d

    BalasHapus
  4. :) keren mba, selama ini aku juga pengin bisa masang ini. tapi blm on nih utk utak-atik html, harus sabar dan telaten. thks utk tipsnya ya mba (k)

    BalasHapus
    Balasan
    1. :d ya mbak memang harus sabar dan telaten hehe..makasi kunjungannya

      Hapus
  5. :) makasih mbak infonya
    bermanfaat sekali

    BalasHapus
  6. Asiik nanti aku coba di blogapotku :D

    BalasHapus
  7. Saya kemarin pernah nyoba makek emoticon yang ini.. :-D
    Tapi kurang seru!! Pengen buat emoticon sendiri.. heheheh

    BalasHapus
    Balasan
    1. Oh...bagus donk mas, nanti dishare ya biar seru hahaa (h)

      Hapus
    2. Oke ini Mbak, akhirnya selesai juga Emoticon Versi WhatsApp.. ^_^
      http://www.chaidir.web.id/2013/09/cara-memasang-emoticon-keren-pada-komentar-dan-postingan-blogger.html

      Hapus
  8. kok gagal gan..?
    padahal dari step awal smpe akhir slesai urut,..
    http://adhitiarizki.blogspot.com/

    BalasHapus
  9. Mba Kalo Buat Komentar Facebook Bisa Gk ??

    BalasHapus
    Balasan
    1. ga bisa gan, kalau komentar facebook kan udah ada sendiri pake manual hehe

      Hapus
  10. Melayani jasa online : ♥ buat blog - rapikan blog - design header blog ♥
    Tolong Diganti dong deskripsi blognya,scriptnya juga ngak berjalan sempurna,banyak yang perlu diperbaharui di blog ini ni,maaf ni jika agak keras kritiknya,salam blogger
    http://bimbang-blogger.blogspot.com/

    BalasHapus
    Balasan
    1. kenapa harus diganti gan? semua tutorial yang saya bagi disini sudah saya praktekkan terlebih dahulu dan berhasil, cm ada beberapa template yang tidak bisa karena mungkin ada bentrok kode script . makasih sarannya..

      Hapus
  11. Alhamdulillah sudah bisa makasih kunjungi balik boegem.blogspot.com

    BalasHapus
    Balasan
    1. emang dicoba dimana gan? aku buka blognya kok ga ada emoticonnya

      Hapus
  12. makasih nih kak,, sudah mau berbagi,,, ^_^

    BalasHapus
  13. kalo gagal kesalahaannya dimana ya ... apa di templatenya

    BalasHapus
    Balasan
    1. mungkin ada clash / bentrok kode script gan.. mgk anda pasang kode script yang tidak bisa sinkron dengan kode ini.. :) memang tdk semua tutorial di google bisa diterapkan di template kita.

      Hapus
  14. Salam kenal. Mba aku baru buat blog widget utk ini (tidak perlu edit HTML).
    Dan emoticon juga bisa tampil di posting article blog. Umpama ingin coba http://bit.ly/1m9qyc6

    BalasHapus
    Balasan
    1. wah penemuan baru nih, ok sudah saya download tadi makasi ya mas Glenn :D

      Hapus
  15. Nyimak aja,mau blog yg simple aja ah...
    http://wellkomsel.blogspot.com/

    BalasHapus
  16. mba tq atas infonya...
    mampir ke http://downloadnovelheyna.blogspot.com/

    BalasHapus
  17. wahh info menarik nih
    kunbalnya dan commentnya ya mba ferdausnote.blogspot.com

    BalasHapus
  18. Sudah saya praktekkan gan. Ternyata berhasil

    BalasHapus
  19. mantap dah artikelnya
    http://acemaxs31.com/obat-kanker-paru-paru/

    BalasHapus
  20. untuk blogspot terbaru itu juga bisa ya min? atau untuk semua jenis jenis blog lainnya?

    BalasHapus

Terima kasih sudah berkunjung. Silakan tuliskan komentar Anda di bawah ini. Komentar Anda sangat bermanfaat dan sangat saya hargai atau jika ada pertanyaan silakan tinggalkan pesan di livechat saya (sidebar kiri bawah)
Perhatian: saya akan menghapus otomatis komentar yang ada link hidupnya :D

Related Posts Plugin for WordPress, Blogger...