Cara Memasang Emoticon di Komentar Blog

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy7wursSBwS6WbC_FuhYspExRa8-7TJUOQvSkl-yUcb4_iBhd2a5-zgigyZ0VOvBjK5uk0TMMn5KldQ0R5W2Xb7faJ8nTnTUjbslRfksNFh5lDb2D-AtnvFWBQCn_4zcmEj9nFec-rWoE/s36/03.gif", ":))"); emo(/s;((+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-1slJDP_zcY8crwarpktoIC_aIIxMoFtAvQCPW4EtYvv8yMNep0xmUm4FwF6BjH_mquR0oAHJBgKx_VRdrILSu2vhqmm_FcyxqpyPFis8Rvxrq8IDPZSSwiR8y8aFg4husGWqrSxDOkI/s47/06.gif", ";(("); emo(/s:)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU6ORiamFNO8cPbAUEWilSHYIHxBZqf9CPIoeVn_2AUI9cJj-eV6dYAEr61u-VdQ2JrUu6AUtV81A5f4a0G6r2qd4e4M6VNU-ov24FZsmBedLn5VQq7SDbTjzG5jgNWLBGrlUa6fVQeoE/s36/01.gif", ":)"); emo(/s:-)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirqty6PoGhByaeVf7fXHiXUCsBaTcULdFVjAkFZ4y77VYwSF1uTXI2rghkvoTDLe4fnVq8aJXrm8OiPE4Rvu45t87XYO3D7-icYDpvRhTlaSLZJ6UsV-vm0XjEZ-itBNSOqCuubmIDlEk/s36/02.gif", ":-)"); emo(/s=))+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmEVMop7EYWcc_ese3jFyXnwPCTJ-xnMNimoeZDwNgD0a4m8yNBlA_RKbuvwPHCZdLtEqyEL694hzdpJuUD53HaGuGEEwIfF0a63dBh3A3AqSfd0AssqzLXc0nXh1LWiN_VxqUrGcTcT4/s36/03a.gif", "=))"); emo(/s;(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjncWhoPvdpAs-RFzQGnjEYPNFJlcZL91bMRr3y_NSEoBvAmZZ9l2YsoKYg90J3xPqQzPdtRbyan5W6kLvk3T1yfl0T4v2Lrl7WnumrSLaWZJz5vaP5NcHJJAmW0XCKNC99NWgFyMOQeF0/s36/04.gif", ";("); emo(/s;-(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxZkXm-Zd7Podf9wDvEz0B3Er4AZuNgbWHLXyPAFtrM3OvL8VztVdts5-cUC1roW7MqSgrOcyvLpglQTlo44eZjA9GH9y5-e8WOOayPVL1OxltPrva2-qAkz8RJXl6QgE4Kq1cXltMf7M/s36/05.gif", ";-("); emo(/s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK9CkO2MH-V_kto9Vzjc3DH5Fti5dzvn_OuQ-RlPCPDRAwjVOGK9LwbeG4mt0ycZ-ZUrS73BU8lKJWyZEsPFF1iET_GnG2UJ6ZsGf9zCTPp29Y5h5ZtEfVSDyrhP8EsGFV0acRTu9LMj4/s36/7.gif", ":d"); emo(/s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0aUTHaxBSlDmxMoomcxXvtBLs2MN7W12MjKpGP9aq4_1O88GrUx13YehHCpXxchYkkKVxFBG984CVLCv24gB5brGXxaOjmm04e5AKo5YkDN21lMxzxe-Ll6fDrfMmuHtv7wAa8jlVv1Q/s36/8.gif", ":-d"); emo(/s@-)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdaOVF09-5hiG1P5pPxOq4vN_SnwV972AQqmVPtSCzaSiVEuSfH5WAolv0dL5wKywdQPPhYkIu4mRgs3bb5mgEPOolcV9fi93syFo6AKjiYggV6NPKRMF_CLm3WWaPNz0d5CgycCvax_Y/s36/09.gif", "@-)"); emo(/s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6WI9fxKbEw8nuOmAbMrPr6X6Ba1ul75FEqf1aFiEZP3HV2OIMYDHMPyzsrHYMNaSme7TOo-KYHGwGlq9K6W0ddul1TmCAzqjPlX1VxR8CRgbsU_UrGpN_LvbtktuxERV2G2lgVSUWXjs/s36/10.gif", ":p"); emo(/s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh48c1jgGGD3Ne6CPzFKFHyw7kwvbtuyGK4IhUduejs5yAczqMWni4fGKgXr4Aq3dNJvmLDQwJmOYxx5UZSfeWWCtmHy7ap60LbcJWMI9tqndYAGEssx13VT_hIfTDNhYMKMM6eVhjleBA/s36/11.gif", ":o"); emo(/s:&gt;)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_sHl42GkUNg4aK_OKwHPP81jr-3hPCQ0htvp1WF1e0xwvHbt7cA5XKowncr5WqXwNDv6oSNKYGaodrQbRZmkJqFjJdjyJjo9WCLwTdN9Z1ExjAprh8c6TYrE7X6KQXLNFK0J85OB0o6w/s36/12.gif", ":&gt;)"); emo(/s(o)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_i5UUVVIiFEwlRbc-nqwcnQahivfye8qrVB3olq3ZxGajGk-qYImc-J0koA_D4BMZAPBrHvD8gLGLpATjJlawppAd7XcGC-o09xe7EFooFwd9FlOuIKCiQr-x0HgHDFvWiM0-h2X6HEo/s36/13.gif", "(o)"); emo(/s[-(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhncvIKkIRFbURhQsXdRng8VwTroc2QD9S1_UoD09Q3oqguUMcDBwOvBhF2F6SErDMFqLbdftKCyQzFFTwCKZOOoepJxraMYOntd3T81YnnkGa10b6mkaWhdYtdoDAr-J1DH3vp-ADY6j0/s36/14.gif", "[-("); emo(/s:-?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf-kFeHvMs05HHhXsEg4eYONNT-eilZklEOpwJsCAzxquOH_l3rrvYn6rs56pnBg4Xlu1ksozXlK9s9k7ihq3F5GiO4Y0KBwrJVcwVvJyBfipCaaecwUU_w2mWGqBoCjzWUR1q33abwGg/s36/15.gif", ":-?"); emo(/s(p)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCC8MNK5FwG1X9n-8yDxuZtwGFapYBsLHC97oYnmWoRWvn5IlnwQAwGnfzGruOX9ebMAlduMGsEI9uM4-Qb2U3nDtKnh3azbPwqLQieDPOoi-FXIaMfGHfp-OLQY321jmZryaoRH5FRk4/s36/16.gif", "(p)"); emo(/s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_H-Js1LZLpICnu-OllgThEF3mxaFOkO-Dt4u7iOfn-hZ_QeYz78zGoAqDqJMNReOvkEqA87x5tdT8HFQVAjzfZXAevyQZYq7xkzHS-v1q1R_g_9y67d_YzE9ANTB58lH7E5Z02xbNVm4/s36/17.gif", ":-s"); emo(/s(m)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaA-NyqmcbG0zf-5hWwRfZNBWackDmMhFV7dorUiI_zIqwEcgUVc_biN_5vF9Z0q5tmhcBtsfpnZnnQFQot2iIUA_N5PTCyucrBcNHcAXltcOPUDOyBY80WzrvXnI4vRQVBe_LehOA01c/s36/18.gif", "(m)"); emo(/s8-)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyniIVQVG-BJAwozTjuBJD9-uf4qqXdsjVwR3v2l6zYnk44NKzs9v1gx7VpbINbJro9vrQxZ9Q592m-MMdmYwe8dhkray0lxELgqojFk3QPATqTFKgPn4P4Bgl5mPjKkbxA4O5YEX7T9Q/s36/19.gif", "8-)"); emo(/s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhyphenhyphenFCb660FY7llKXJZl9tAjc4JVGk92LWgI0xJAONJDscVBnhfVThEPCPhS-0yTF6uhSiNg1H-2ue2eXPATHGm5GppkQERHB9a1SglcWVfoB8lFtvyDboArENtl2wGlIr0J5sOtgP7-gc/s36/20.gif", ":-t"); emo(/s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzG6mDfMukF-HPeFwMDF2vzQC6WkdMYZk-J7sK7-E_ynyGfc0JoGPH-rx0rP6yuaZr9XQPVMujXUMCRxxBmuE0EULDBA3EeEeKL29zP66ZTgZGFeaDAYDJImFv_pdRoAUBgwsN5ul5HAA/s36/21.gif", ":-b"); emo(/sb-(+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ZDbCzGVieieJZLpH9g6ZU6qUjp_tpu62b000NabSR1MRVHy4f8E7eMiaPbFl4seaKXJhA0gOznAyR9p5xtA4w2faWR-nxZG21hzMiXw9XIEls-e9oXN4eJGdZjXN8bK1mfDbsBxTJZk/s35/22.gif", "b-("); emo(/s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf0Mys_3ixTSoD3D2-9BHbRxPlyo6SmZj5_WdzKIN7MxclEnx3V9J_Y-zEls6yg9uzfrnm8B7iXEE0Mju3irKJozECwElkXIo_J1Vy42pPNJupe_3peLjp6Bxte-9cytmlJy2grtZaxGY/s36/23.gif", ":-#"); emo(/s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWhruHrqnarDApsr36FoHL8SvLsS-NMj-Jn_ufni4Wjuo5qFtzXRTFa4nkX7l2-QRHX1d4gwoqs6LwJvOVVc4bcF0akuddCsrtt1DlTQunpY0MOd7mtBdScQ87G67wVB_YeTGPB6YmWpo/s36/24.gif", "=p~"); emo(/s$-)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix-j-Xl-T3M9RzkW2PP0DQp_-ZSP0-ApveXDa3FlTXe9i99ROsACByf_IjQa8WL3gTZT5AYJ474Pc90sMojWiW35RlMbMXjf8y0kBDmOT1MEdTPPSzxPnM521mPoUWnX_0eCIQPl1kQqU/s36/25.gif", "$-)"); emo(/s(b)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5GpD5ojlIgkPY5QioVMBOlw4e_YxVt2pAV-RreJN7OpI2gDy9oi_SpYtw_MsBiqshq0Mrej6zGuFkwEmc3LH1CquZAUlEioU5EOe4tPf6W_QUq9VfkVWHFPfBJUXbLkj0-08OWOZ86oI/s36/26.gif", "(b)"); emo(/s(f)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3zP1uOnyz92Qj56AqSiSXLBN33RGqJvjG5ERvHixJS_-0caNRG-E5pcBCU7WCiPY8aq2Mhci6enATesaycQ-58imxwNxjQK1yZ5xIwAC-Ibp0ZQS-I2bT7a9g_xpFVT8Dq_YGfdRDSmA/s36/27.gif'", "(f)"); emo(/sx-)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4yKWbxLrgeROhd5YbPObxHtRGsgasmjYOiAhxIFUAV-9L8cy_mEoK7dGME7AplyToLVofgenns_DhfoDMn4K8sJF7QJoCdGRL3pVZu2M783s_50IDV5hE_7xZ5N0gOo3Uz3j_I5_8xlI/s36/28.gif", "x-)"); emo(/s(k)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXxqTG7kYSz3N7NyDxWUXdEKOiORomx60PxTEvNEGq6ZgNS1yu4OWU1EQNqGamGE357puZfZZc0YWE6bb_NkstWuFAgGK9-ZybZNPaZwtySNf5lcllRl4Cu0bqUYV2bq4FWWlX0iTks84/s36/29.gif", "(k)"); emo(/s(h)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZbdNEuItAIh2h3a0PR7zevDoVQE9PdlGxMhuhqGvH6XGOqrilQCRMO6bPDAEC9v_ycnBSvOSVwh8kBRmd8D7V5BNYHggc8mzqiLi8zAZ8ROixvS50bLZuyFsxac8EJPhGprJkmZ3-h0U/s36/30.gif", "(h)"); emo(/s(c)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwzVNJ98oNhQrkIRcMbn-vVlL3rOc5HD716-PxTaj_i7NOuLQc9oNH7W2uxuGq1zYQvbS2GOBhR7QwHrqURlZkJejeh5Rc_X1w3KcBdol8BI8omNvZQzDZ-XJNyoQhU5tZ6Ai_uCcXz30/s36/31.gif", "(c)"); emo(/scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-0QGKSXVholiybJ7ubLfBjVEXcw2ApVbXb3BbgBwV3asip1QdoN_TpJTq4SM7TQpaY2CXJB-G2YLlXMGt8nBHCQJi-7x1k9cBjYhs_n7gQfyHUCgp9GL4DC8YGmsnltu0KYlFEFUCIY/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