Cara Menciptakan Emoticon Keren Di Kotak Komentar

Kali ini akan membahas wacana "Cara Membuat Emoticon Keren Di Kotak Komentar". Kebetulan nih bagi yang ingin mempercantik tampilan blog-nya sanggup menggunakan cara ini, selain itu, memasang emoticon di kotak komentar juga sanggup membuat pengunjung lebih tertarik untuk berkomentar hehehe ... xD Ok, pribadi aja simak tutorial cara memasangnya ya ...

1. Log-in Blogger

Baca Juga

2. Dari Dashboard, masuk ke Template >> Edit HTML
3. Cari arahan ]]></b:skin>
4. Dan letakan arahan berikut diatas arahan ]]></b:skin>

.emoWrap{ background:#ccc; border: 1px solid #333; margin:5px; padding:10px;}

5. Lalu cari arahan </body>

6. Dan letakan arahan berikut diatas arahan </body>

<b:if cond="data:blog.pageType == " item="">

<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 :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p $-) (b) (f) x-) (k) (h) (c) cheer

<b>Click to see the code!</b>

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(/

:/g, "

:")

.replace(/

;/g, "

;")

.replace(/

=/g, "

=")

.replace(/

\^/g, "

^")

.replace(emo, " <img style='max-height:24px' src='" + imgRep + "' class='emo delayLoad' alt='" + emoKey + "' />"));

});

};

emo(/\s:\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqXtN1X2bU4m7Z0ayKH_ya9BqthI-Vjk6Y-HSsB5Slza5M2F_j6TyBhRRkyf3nXRCAgbeK8FTpRlxKpTU1h8IgH6Rm5n6WfZ0SJTFtd56Gwdx7Bz8sC6SqPjXg81j6e0SQAz4R6iOMqXk/s36/03.gif", ":))");

emo(/\s;$\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjVWqSRAmOpQFjCi0SKjGPCVMHDU73RMNrQACljz-yuuAB_NG0FwzcivyENjmyo9rs1FVgwKvIvUpcjTSOrPLjhFaEpy7NyLr-mVqilv5PgZoFQUrn5Yu6w14sWJMfK9POYuyU1At2cME/s47/06.gif", ";((");

emo(/\s:$+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinOd0JV7NOGSTD9WpJ23S5IndBKZ3Dj0kBg2o_D1f9JQhP6Iua-HCMMSTF3nrRI1CSXHrPHQ0D8sHDEh3mp16eKNf5ieN2f2ATMh-fpuSS9UJPkcF1szGy8SI55Hkxqh_KL3Dt6n3Ydws/s36/01.gif", ":)");

emo(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGQPYBkyCGkOfE-A6oOxu4RGXHFkaoJomtebBkqc2wGwQfOmnNV7P-2OFCnzRk_D5n92-i0M_i9Bu53RULRJ03r7az9phJOz8-lY2pnFc2M7Zf9XBkfV8qyD3XASJUpVHNj6k0NK2W3Ag/s36/02.gif", ":-)");

emo(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqihE7iPE3amYvJwrSH3aHTGaa2IyxrUwhKqRYnWKthouixXaIN0svMo_4EU7emzh9O_GUhFHThBhcxt_zJL4YrS-v_YFESwbw0h7vJeT6V0lXwLIGIM_KjdiSuRo1yUNZSein_CFl-Fk/s36/03a.gif", "=))");

emo(/\s;$+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk5u7I7iWy9hBsWOhAzU73EHauIDDCQNLX0jcN-9CwLu2dUBmaqwZP9oFRSCt_bsKjKv3JXfZFjCE-LNwQcpY8j5Ndx1bbj_p-QVVgFofr6hQb75rIKl0E94gIonVq2BkFbAWvQC3veOE/s36/04.gif", ";(");

emo(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHHK1AR0o9v8yrh3VcC38aiQ3bH2F1a8m7bOHWp9qDWERqtZmwDH8GgVfMdR8jRQOv3z6fL1E3p-GBs1HH0BORrBG_FGZkgmZNyNeZNNWhlHdVfpfmDbkgJRwL37iSl2XNHVTXcY7el4E/s36/05.gif", ";-(");

emo(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGnkdO7LP0cs6wou4yb4mX7eVDMj_H-lYDiftm0eDpb8oIPfhTUDYHOXWuhynNK_mox-9tX-sloGuV0N1qQSXYY9G9mYyt1XMJ8-Zg7xtmOixFqniA503M2NSStMAxRHQ8mI32nNVIgY4/s36/7.gif", ":d");

emo(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh63ZXM0OdlHKnEmh3RrALhKYXez94v6DsYFjm8Yep8S2sD6GRXV8N9Es8XNeOKWq2s91x2o7dyXBSWjdKIyfXHMvPYrLY3H8rweNPG5KyiYuipsQ7QchHMwXfdzOzIQPT8rXaaOrPuOGo/s36/8.gif", ":-d");

emo(/\s@-$+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVdBE9UosLrEb7aNQbEoCsVSo_xjAdMdc27K0dNCr5sFymoQIASbxL4USfDdgvWqlLjQHhHgAtfegQF5MmTGlKxS2DuCVAZjv4RHexGtAXHRh_UPMAqgrXaet__wmWs-lB7BrE_Qg-ryw/s36/09.gif", "@-)");

emo(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZCTV8wyuEdTjYoGAK_69wE246j-YxhlVhjp9HIoHWEb7JS2adF9XDUA8SGNR-SNDYcUCzSIOKJ8PTQDGYlKa9mHgC1fEMp3dcOPgz5cwAvVtzsiB9b_ZHol_aTp6_DYJVK5dHXMGrpZ8/s36/10.gif", ":p");

emo(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji9QJuKXIPNTsZiIoYUai2csJz3TC3TA8cIIPtLuHziU-ln4OVkllui6HSc9QU4Qql-YLABw-QDhmZW_KaJgR0dtyIJ6z1bZkXp_DqRrAul_jxkfyPhmumuuqGPs7bfDCeGZEkBrC_gEg/s36/11.gif", ":o");

emo(/\s:>\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZNZfXTHdnoKfBTuKO_km4tjV3Li-k2dowYy7KWsdCxmxuCL0uNjjX72T0nFZ3Pdbjc2idHpGatJRBO_gSntzH3Xx32jjYFQsO21vCw2nrKv2tj6oswrhBbSyqHVaU5llW4oI4EnH3mvY/s36/12.gif", ":>)");

emo(/\s$o$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7HVau2PZO3iZ_byRJF29mOdAncSMr8SILjOYecoKEvep5IHBFtVhc7NvUKnnkT_TdqjOMRFm0t6xsDAfvF_GYAp_NtP37XKCy-nEe2J4m8cPwDklLCMxvqBM8KtbG5Qksgbx2oFL9B7U/s36/13.gif", "(o)");

emo(/\s\[-$+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsGUpBw5MswYBRgnZnSqRd67LFdKOmutV93gPLXhFjAyvU71sCfyWklpPOu_4YL9VrfThS4ZT2zUb8sphUBzUuv-B7zRmMncHzh0Hjv38w9-aCecK33uA72KjOZMCo4wV9DthOKpLcFvo/s36/14.gif", "[-(");

emo(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7uws2PfPNcT6TaXV5KcdLIfTqbk6ESb0nPVTz4EBk7FpjHs7irtfteoy5Rlmvb53nl8OR3OFAsdnW_TyMLGYvGIh3DntEIS3s_cyKPDJoWXt5ggknmuIp0Z1hvR-ybELs2pVo_hG1jUg/s36/15.gif", ":-?");

emo(/\s\(p$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuJhPLcxv9k8OmZwNqb7SOOhxv4epJX5ncGG7czAjSeq0kNmCR274OonQwzAX_tx4Nyk33jJ8PhyphenhyphenYWRQdSHALXKRISfZ4fTmdqV8f_xkyccRaViyxmCcwPsVpKmG_0e7qHt-hR0RkdK8o/s36/16.gif", "(p)");

emo(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwXiO22qqLBrll0Xba6gepPTD5dC33lDgnUt0tVA_SxWTCsUdkyvt57D9tTpMIZh_6i0_H7XkboJrmAy267nNuHffWvucp0YgJHJxgQ3UduoW__ZYAbAzxFXeVieeWgffTfb-Lak3k7Qg/s36/17.gif", ":-s");

emo(/\s$m$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnu4MnMfcjlILpHkXslub0tCKtDoIvyidNyeTI6Qt4GkGAUfF-8ObcmNaEKh7gISNr24LfHC9p3shbfdFNZ-TjfHEAzKPMtkE5QDq8NvZMFrQ6SSw8juDrLA6dzFevef4X4n20qhnundA/s36/18.gif", "(m)");

emo(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuCkB0keZpLgd2QOX9y6n_zaNiO3PUlmfHPDR_T6xGZG4s2evQAHtk7mthl0ObC01pM-wbOUDGFmv9Oa-VjV2fTfzTUeG-jCQc4RiIe-VvEyUCo1E5Sc-OEpK2ZixDuASHeYPGa3Vh_XU/s36/19.gif", "8-)");

emo(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGOQCadkNexejC9RCtQ_ZPSqTcjHDBdoLVpO0NYepTRy2arQd8PN0JlOYs_DjGlrxfVCtV6kZllXY9lKpV_NU-Fsjo0hY3xkQW5iLbUeYeICk-vDMfi-jnpg2o2TbuCXi652qoktIey2w/s36/20.gif", ":-t");

emo(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_VPnOEN16JuS_8eQLzXY7DJRNR5uXcZSrV_kaVGgAsoSoN6LdN8mEbuhmxKe4QEt7BvEaNxC1aeeGaldHkzS3iJTwBbeBAL-rRr9rgeCIhESPYWmEWTYPh5CKzNhXmguuzdtLa0C5uS8/s36/21.gif", ":-b");

emo(/\sb-$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdyoCkn4hPaG0YZ0WJvtb4czhTJAZOq9DyxKlB3dAiHgK12vl7E1wxqCvw1pBxJRTQII50B_gw3sSJMEXyZLjK28_O8adYcK3SWIY4HWzI8eMm-ELe34Ap-Ro1FZGWdN4UmgaYwR0Nv0o/s35/22.gif", "b-(");

emo(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA0mM7S3pW-4fqS5RNasMj3bOFDWQw1MMcr_0-ETxhvWsbRP-4Pnm1Yd0xAO6X44_tRC2qJ2Tw_ktQX5wC5_F9bGmwBK9aJQv4mb8zpB8NfqUccQu3o0JWUgxiS-DLVXQ51QHt75Oh2kg/s36/23.gif", ":-#");

emo(/\s=p /ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLdvjLt3EGdAf-USZjtCURTV9cQMDziDSOy17Uuy2hCRprKsYV5x1jg7bTi2zDWztp_jnE9EvsWgm6comSmFSb-cc_tBSDWprWFh2I_uAmAoiKRw6w6ivXhZuF1gyI09BMdpv_MTmQWUQ/s36/24.gif", "=p ");

emo(/\s\$-$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj55CCC27Ant8AAsGI_mBopd0mzYZm_3Ms596bt6DP3dc3h2N4p0L9YWr_FkvxrfAKVUoqGS5O2UYR5iucVteLCoFm_HNOt4Mhi2QGROaWfmvmQ-9eFo7ylhczEI5ruZ0Uhlyy2ZJFG2sE/s36/25.gif", "$-)");

emo(/\s$b$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRpLKQcbj1xw26v_gAO38xcvR74j_EXqIB9HQIcYXIYd2GxJKMpeai9fkc9rPxja9QEpMADfVU79CflavVZUDBs_vJ-wHfG8wI-LCHEA6HOe1pFM4iyFnvmByNSYKzyCy4QsKGqvMJOxc/s36/26.gif", "(b)");

emo(/\s$f$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKTodiROs-3riEAWDKzlFwGcf_XldOEnfJDX0Yvt920nNtiiIDBj7CbwxcUoEdyZM-e6R3RWGBvYAN8mYt_ggrDWfx2lxUOuVVLyFvzkdjR-lYOWlg_p_zyOhampBBfO2lNx9sC5Zjlrs/s36/27.gif'", "(f)");

emo(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNf7k_4i-iEcCD_Lqc4jQi_ZQ9ui211ftcm-1S_tYtnACXaqyjKUHj2otDZszQB1fvmlLRIq7D8Mo9sKsl99uEeuamJU2Od4sSnlL3PVX4YtOV5EsdesiStAvPc71eBVhd87F_gVbGZxw/s36/28.gif", "x-)");

emo(/\s$k$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZibQZBs5g2q4Mz8KDB-9MAefGKgKtdjmYAO38enrQHaMJIAQJ0dCzC7bBIauLlJWwZW39brQuUbHc1xRTuy3txkltbUqbcbnFT_akzs34NjvdQgqCWJgMF126J-tqbZZ7rb7YWZVkJjs/s36/29.gif", "(k)");

emo(/\s$h$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKihn45mSMZEClcg0lsveQE8ukG3X1koXLvRW1xLsFmofQg2YE9Zer_HA8jeepqAL4dhzkssULaSnpuCZjbqRewHcvBL_oIREtI9pjlR99y0EIk2yc_6DL5tqEeUYxi2xGoSXct9RuSOo/s36/30.gif", "(h)");

emo(/\s$c$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRbEmrbgm-nxMRDChlbe-A8NlsH61VwKxhbRZSkNowd5LFlEcI6ecGROW251mi2L4OwzjxTsN3m0aRkJBT3nq6AuBDvfKx39_p-DQ6Z3U_Pb9-ew1MVFyTzeMdkXG7dL4GLggggB_ajpU/s36/31.gif", "(c)");

emo(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh32-nm8JpVxkUE_M_ymU-8ENSvDHxNpkCHYY7uXzbuwuir_11_UXQa09IE2m0IFp2WK_nRbo7NZwSkSkV2AQjhsUGrpqfVohW-ZRUASHDKPA7lW8TpVxtDwH_m1OtrDkKMyaAMKx-jjc8/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>

7. Simpan template dan silahkan cek blog-mu hehehe ....

Sekian artikel wacana Cara Membuat Emoticon Keren Di Kotak Komentar semoga bermanfaat ...