Cara menambah emoticon keren di komentar blog

Cara menambah emoticon keren di komentar blog - Untuk mempercantik tampilan pada komentar di blog, Kita memerlukan sedikit modifikasi yaitu dengan cara menambah emoticon di komentar blog, agar tampilan komentar di blog kita menjadi lebih menarik, untuk pemasangannya sangatlah mudah, silahkan ikuti cara-caranya sebagai berikut,

Cara menambah emoticon keren di komentar blog

Cara menambah emoticon keren di komentar blog.
1. Seperti biasa Login ke accun Blogger anda.
2. Pada Dashboard pilih Template » Edit HTML
3. Cari code </body>
4. Kemudian letakkan code berikut tepat di atas Code nomor 3 (tiga)

<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/AVvXsEhyYgj43xie870kQqbPlBPK1r4SSq3TDttB9Ifg_F65X84dTipeNaCP9VofPt5ZB4V1UYd419NsmxPE99IxV48ngSE5xBt5y_-vgk9jYGRFwQr_aSPiArBhp_lwEq_n0_D5MyOYBakkjVY/s36/03.gif", ":))");
emo(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifhRP3JWkPGerK9CuwaM_D9oggmRQfbM4cudblXVPfOJdSkwCFlGf4NnKxH3xiR1ssQDN_wCgVdzMBFfy9Kt4Nm4J-pb3rLqgUHlemPYIkxe2aAkH51FiW8S2nACLQxTCPnVNa3cx9NMk/s47/06.gif", ";((");
emo(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuaAo0Rfnknw10xkFcRBZiDhUoo8XG5Bt5_v3zbsTJP4wJbrBUXPYlcsRl-cLcyVsD-wm9FhKG3WsXvkNBYgTOFllQ-bZ_uMzmYlxzhaqPTbCApnifHubmk2oA505WBY2GMpzz5FW3Gd8/s36/01.gif", ":)");
emo(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXMrIdHra70MlXtAvIbfqE7n8DcoKMdCRG3r3tD4gc5pYp_fGr6qlZok1xiYx4I0T1RVEObiLnU5mvpvt-M8Eb_Vm5X3yDNn_YPPlGjwenLbddzrB4A-sILI7cBxQhfFlop0nLR3JsbtM/s36/02.gif", ":-)");
emo(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtDZ5FxtN1Za9fVuimWtTOkqIDccoRCYsSoJ20Q9jkOB_1A_8qa3l57PmIVx_eOL0SNnztpv4sRVBmNvfFGZQibHni15f9MW8aT89Gz09KRl72-HlLsxVRaXC6PXGBTAoA6Nhg3uPPfjU/s36/03a.gif", "=))");
emo(/\s;\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRvU6haKKWxyALSljWPIuP5O6M6hApnN756nRFDW5d0QyL7ZZZH7sSHZq9msOHwqKLfJ_vxJt4ry88NPB3PKQFAXjJBhdyKDIL7SXbWRbk9kIjrsJsvcmnS-7OKGVQPj2OqBDtit7Ew_Y/s36/04.gif", ";(");
emo(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLYwz7Xaao5bHXpnvCp-dMKPrOtr3Vueiovxh8fgAUNxg0EQLptXjKSujmjUHatU0XGJx0uuGOufiIB91l_w2d2ibeDgTPcNwg7-0NZpZB9ShSTtc_AvaQff94Jf-HzgfuzIBpoL63J4A/s36/05.gif", ";-(");
emo(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMEX1iP5ULMOAR6MOyv6Qff_NODgqQ2qdO2NYDuYCKsC1Vy3FbzL1RBucS1SccCARHU6KGY7zzF6g4FCobyXHK6yzgZHxDar2BKHr9yiIVlW4MeiCz8M19B-bRmXV0SV3NzjQHzHk5_mE/s36/7.gif", ":d");
emo(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1JSRmFEpvtW9kqPJLQZ8D0XW_DJsvhNoswtHsf3knsshJvXgMQ6R4EMF7FnXS8Vd7tel-b3a56t6GmeIm3JAlOJt5osNvi6dBYiJBnlOyQ-XT7YDprl5K8fmrSHBO1tcCOVRxfIirOkk/s36/8.gif", ":-d");
emo(/\s@-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPKiru67XvAeUYqxaB_W3bWCKV_r7XARxMUNxfx7JDtGNWdtfdB3ZjonOvMLfJfg_voULv8SeZT9NiW4y1Bg2goFYdONhHtyBHToIqTwyi6xOqaNO2j4xYf-9NkJeJyIw5BAkchQRpA8A/s36/09.gif", "@-)");
emo(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW0S6BHXylmMvJXbcoZED6f9uFaVNbmjpP5Pp6DnwYGTXzUU8crrQN_gCH3IlqaIwrH3dwWv2QnHDy0GpnrPMtqvP-Vq5VvZCzBvL_FVXgbu7HwGvUukyO0QaJPYCLtOB8yf_Y2Zoriv0/s36/10.gif", ":p");
emo(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAl9FAR9zc4bJnbNgAw3D_jI2EJFORCr_-le9sCFsDL4MWvNy-hQkwZpctvWUdhqKyStPlbWyU602rygjQGD3aK-dnxxig_GctGz3fRjBbR8-OzHcC2_CBSxN4IcVTTaKIB5Xd-r-W6wE/s36/11.gif", ":o");
emo(/\s:&gt;\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEGZPG4csy5jqJe4sAhiWVwUJDPFRvNj4r8O5R89eCuS26DwSQAjQHif4BViZjx-e4vQ7AJ7umjc7D0Lc8QuuJVBtIMS38GF8Mtl8ck3iA6jq5ThoaS4Hl6INfnyrDL5vgxvL1YhyphenhyphenIUHI/s36/12.gif", ":&gt;)");
emo(/\s\(o\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD92IewCaAOST_aFG0VsnRWtspvhkonn3kF-MMOFKMIHTtWnEj9WCZIo5tTTpF6UElzDDErzFCR-hWcHxZax4WagVk8UtoCzKx_4Bwv7_-PB5uOhi-qRkf31xJcIzgpkzVb1iw8Tg8EMo/s36/13.gif", "(o)");
emo(/\s\[-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSP1wFN1RYC9A8m_mXsVlonvQLUsHb2rRoqo9melWKJUUhjj0iPiAF9_8__GimeSMOqe5jBSeswZ1MBN9R5slKQVNPLWDaA4aKcIrT3YePdsONWD8_r-tHllvzTNfOQ_87Wpy6mufzt3o/s36/14.gif", "[-(");
emo(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe-Sl9reKITpt2n_QXqlbS4KV66nJ6s1Ay1JzhP6dH98-mbyKhAXM7a7Xa32tVzVxF2fcmhodxGPsqCBbMUhCcjaEqFqqE5VENSiT3MJ8IZT-UKKFFEijP9Uvfw_SJYSKxQ4DAV9H55EA/s36/15.gif", ":-?");
emo(/\s\(p\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgap8h76xeCUVVXpAxjrnLu-hFRIg-8Cs-U7QUUjd0PmwVehFJzkp_6RTGdA4oDDfDWDACYJYR1Y9Hw9kLoobORHHASR_DwbHJt1GHmmjiz4mEokwM70fBDJet-YeYM1i3ArC_En2twF8s/s36/16.gif", "(p)");
emo(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYeKAb0DeNc0t1iBojsWuF3jbAeJ2Tyv3uSNGoZ9j7JtNZr6nHkFh1_8p8MloSuCXDIhGRNrtKh_mY0RCLdVfQLb6V4KPgUqflTMj2fZJhHjQsNHB-E_d6pV3AKEtIfSIqaVMriLOaBlw/s36/17.gif", ":-s");
emo(/\s\(m\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlqOka8-KVvPRc8NubV5bXCnEDCHe2PHNeFdTbnIt1cNcE2YIJPoa81XUTW0t77bpxhATTJV4vJHHKCI6zNvSSBvUd1UCic4Nx01QVFQC7LE7_WEZwpb3s7A7KA4NdXIPxUvYUiqzBSUs/s36/18.gif", "(m)");
emo(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGhDdoqBtUEB5xLBzZkE7ykpFjiob_G2feO0aif6iCWxTi64wH2DIdoh1QUMcUluYTM5YEz-3Xop0hjsLpTIWbRFKsxjRzoGJ6u-ZA1mvp6cqqBwNzOC1bs-FjNV9nmQXa9QH_pUYvWSM/s36/19.gif", "8-)");
emo(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRSUzExF8vMLGucaMYU5xBoXifg2oC8jG8lk8nxGlKoDir3BZZvPYQfr9QlFRmWjiXecjAHAPEiyQ8a5XbLwhZMFdPchHXEfV4ZlBRroUg5yCU9WT2b6UX_LbX2RafWqitzxX4MXfRqn0/s36/20.gif", ":-t");
emo(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK9GEZbJUrzECwIkdZrC3wy-sArp7DmBQzyfzGteQurE4vQLmq8mUVc96gJuaQWxpIDzjU4zUlHxLh49Eeb21l8wZwzL3Z4qegNGMpfDTYWBVzg5inDdsy6S0yXneZqH7IN4OksmN1ajc/s36/21.gif", ":-b");
emo(/\sb-\(+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifK-X6MCSr7vDMAZxgw6SiBlp_hb4eYLpp-ooH1UbKbRfaf7FZVvkqGPUh46dXfQKUyQ2jtbX2oDaGlM4E2z7uP1CcrtGcb9TMfQGo9Cxu2VXW3_FDvPx2kGoK2E8GTPLX9pxwI-AKmGU/s35/22.gif", "b-(");
emo(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk7uUiGgv9rF22mnnSQnCkuyfduxS8q13mDHGYTGsk3FSG3LCcj5-m-vjTvnF-Ptp6laEltNSUyA4upUtDWOtzttkO03mocA7netx-D_H97UwwSRgQrcfkF8TuUGNmDa0CKmNEPTRapN8/s36/23.gif", ":-#");
emo(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw0KLEDfvaBR9_36DWh_0fpghvOPRYJZ7aPEvre400apTLdWxqJdL_DkuDsRXgd6l0zBxyciL32YfGpWOPLIX6tgXMurcxe4BTkW937Z97jLdiE4sS3162KLWiUW-GRf1xRoum_30jvM0/s36/24.gif", "=p~");
emo(/\s\$-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0fsVgWNk_dvxFUYTn_OVRVY6HPI_oVzSlvWuBfwJ4GQMnAzRroXB4sgMhFdTBlY2pdjENyAHcZuiIrAYD6PqjdC7LUnZbfjbV6pkcPyhdqTNcp3RY_YsUU6f_xWAFkLhIFTQ-yBjTiYo/s36/25.gif", "$-)");
emo(/\s\(b\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJFruN4GP5P668WQb-s-9udZohM-w7Dh7kZqggQroAb3aYO1f6BQROuq2N8fJD2ir32vedry635SHHN0Xmtbb3k05FMzXY6ySmUEBr2lM-GV7FvJnXVfCGIb2uTeFrMKRiicfYU0O_U0c/s36/26.gif", "(b)");
emo(/\s\(f\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghpwI1ctTO_Vklyva3cjyaofKylTAP-K3q-n3Smp8rWDQhTDoH7aWHht4ePo_9GXzyFq2faUK0L2Pq06L-nvGRfj6Zdj041Jm8mcY5sWJQQielWEMmxyrlvp5eKhm1QER6F00JxrXgKf4/s36/27.gif'", "(f)");
emo(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia4n4Avl8VDlMjtUZHvtOqXcoxrK3QfqDMFXeXjIx1Jynzgmu2QyicVYzovNqYxAEfyALMKN_yF2sFq_YqAtmIGlh87n_ZDkZb6I0XTrbPjHUlY6B5HzVRhQ1ghM7BWtUr_ZepVAIyWf0/s36/28.gif", "x-)");
emo(/\s\(k\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYiGkMy5K4QhDE5c6_19O0pg5Zql_OIM3k6LnR-PYg8Yi0SO9xQgtRPtlpqVEpcuZ84DSG2VQDR8CWOecwYFpokRGcwWC4JJNXuQk6yX3nUaX2cX7NWU5KK4TctTBmFrLKbhXcxkyEMJg/s36/29.gif", "(k)");
emo(/\s\(h\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfZfo15Br-dr8s2QWvwNPO8LzCNbnJywwaz4SE1HFj9jxaIKNBnmcZZ4TSmlsYrS9J_xc0wom8NcydA4Ty6VLh-Y7PQu3PrFGQINkwStZ5HkZcwkPaqJ5OLjK3q5Z7ld4-zG458DvGdoI/s36/30.gif", "(h)");
emo(/\s\(c\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJwOLuremFi3a_WXaWhjwmjxPVpSb5tD1RkJlFQiDZcFt3opwWQf367vG1E_ORyaZOJz-Rlv_DGdP-vXHgxEtXZPwpb1_LCo51K_XAcszCniukpWkfnLDqipoReZKIPss5oDwp5uEQd9M/s36/31.gif", "(c)");
emo(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhivLNQsl_7R8kdazZ01abdDJYeOBuuPiGeXuA4rBSlGpMCLRfVjIIsXwzKM9ZFTKJoY4gD41s-UviWsEG934DIbr8WulGwMgfn2Pl0OyWNX_FwG9S_ZKPuF_iHPYFoelHlMTEpmGlIpgg/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>

5. Untuk mempercantik tampilannya baik dengan mengubah background maupun memberikan border silahkan cari Code ]]></b:skin> dan letakkan code berikut ini di atasnya.

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

6. Dan ini yang paling penting setelah anda melakukan tahap - tahap di atas yaitu Simpan :-)