Memasang Emotion di Komentar Blog

Kali ini saya akan berbagi bagaimana caranya untuk memasang emotion di kotak komentar blog anda. Gunanya tentu saja agar pengunjung yang datang dan berkomentar di blog anda dan bisa mengungkapkan ekpresinya melalui emotion tersebut. Langsung saja ikuti cara-caranya di bawah ini:

1.  Login ke Dasbor Blogger > Template > Edit HTML
2. Cari kode ]]></b:skin> (gunakan Ctrl+F untuk memudahkan)
3. Copy kode berikut lalu Paste di atas atau sebelum kode ]]></b:skin> 

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

4. Selanjutnya cari kode </body> (gunakan Ctrl+F untuk memudahkan)
5. Copy kode berikut lalu Paste di atas atau sebelum kode </body>

<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/AVvXsEiUsxM36qqvjtw-rvYWToU8UKDcEHmLMDFDlp5N5k3_1lDRs2QvwzBZXECX-nDsdrTENzfdMcpKVQ5RuNkBpU9a32SpBV3ByBltctQR-SnNSeq5ahKKPTlqjFecMG2INMzVz5xEFQt5XM4/s36/03.gif", ":))");
    emo(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi16j3rJgRiwGLtEfPyzwiTmSSYhbDws7SWxGwfpTDufouT0JhMjH-T1vfsDdWWIC-lcoiJEPOfWcjUWkerBq4AjfeQn-MhFcudOXiRvCAazpNZpfMn8y-qM06Mq3DMJoWvh9ZgcGp3jDQ/s47/06.gif", ";((");
    emo(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ_TdFZa7S4N2HYtZi81vX4JPqkfrqgV7dGjdH7KR7dEOUWK7IPSaZMEK5Y9fXiTdfLQerDofTO_ZqWT59GXLQ1CJGzKyfqooae4YVU0rOjR2Clw-tr8kM-moIuL46K4VGx-lFA00ZCq8/s36/01.gif", ":)");
    emo(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiE7-AAXNQWwFhsf7-LICbIBky2AJgFQjFHf29f269ZAIV-NM0oevQFEsmy29m5pyvBCLAac8da244tJAngoQOCmeuFJHbN8pucyuCvZY-SHmPDgA4vK1oIA97pY7X_QVtboqTH-NZxII/s36/02.gif", ":-)");
    emo(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAU7GEp5huoyeYssQtWRxieZZAjwhurnULxTtxVkWlSh4qTNBQZVEruVRA-wnz_gcPdzcosVDuoY3BWJdv-HynvXtUPAP6Z1_VTItJBndA7UtkCigV0Y0m2WHtGQdU5VOQzGuEggyEeGI/s36/03a.gif", "=))");
    emo(/\s;\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisw7jmfGYy79cYxxBzIcZ0DApq6nQRNIdGnYEtZN3E39eyosptiMcRC1MHi6b_gSIwSm-5TzD8Ndi5io_rt7BIGa8KOFuZtpTdXlSBfD4kgLjQ20F5jUxmBzGNFuEf6DgRI7h1xnu0L9g/s36/04.gif", ";(");
    emo(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGkL8kksllrsNTySgb6BG0ffEYUhpXUcfsVLx2LiMObqvAcXhmu0qFN-TKwS2Gd_IL5eVAPmk1fn59MvoBICn16Yv8ObJhoFDC-8tScT7WuCpick2m6TeUnaA1BMh94-LNN5bnw8rozaw/s36/05.gif", ";-(");
    emo(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4ZLzxTjg2ix9XYfdaY61Tknaw4YsjL9x7fIgxv4AN7qXz0kl-26bxLRqr5lMjRy7O0ietWF15nxK8CFSvfey1sl9DP8xatmdi8o7Vlg_nmuLlEFzYUIHlN4vf5FJIOuSI7PRuIk_71Ko/s36/7.gif", ":d");
    emo(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge3Y0svqrrLBwVtCooCYnn1H_-Y0DIP3blbLDkhONXmU2zZpjM3U-CExkFAkWt81r_0TXKzA9iBvvEVFNzXcfvQ2Tg58ZIyKtx4gs555s-MWaKKwdqZtdiTwBhUhTQ0GHnmLEzGmFvunc/s36/8.gif", ":-d");
    emo(/\s@-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBN-Tb7og9Ubljk18-RaGOkcPOivaJSjWs7hEqlTcRqj5hZ5h9cygTEhXCFiuIlblGObfom2wwdKF3cDeGycXyWlvC9mrjAKTg1N8JGp8v9BNvK5HnO0NANFQJaMm0QlZ5Wfvn33lQTr4/s36/09.gif", "@-)");
    emo(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvdfB5RUTzRzP35cYwPRkCjCh0iActR-de8yjHyjLSsoPy-Ehv87D5aCWl5g4wy-VwfoY69rAF_h9l2HJzwMLqYOrekLlINOatPSTyePaHDmcupE9kTkwBx7LZhCdJEjtWcdF3t0ixS5c/s36/10.gif", ":p");
    emo(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA8zJaVXXOnEr5X_aA16qxCylr8xwWSHeVt5LK-9QipUd2gqsVVTFfeDNiykRgaaTBM8iRqtfjre9W7wia_46CTk4ym6xFCOZ0TvWZ3NpCUqp5FCVlMPvQKJ8AzxgfeHTvHwE-u1XWSUQ/s36/11.gif", ":o");
    emo(/\s:&gt;\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0hN118g0Jbn1pTT2KD_O2dQd10qDTu8n_dCN6PGgH7kI96UXsZhp5X1zMDNCdDNhK4Ns8JD41Yg2U-Vq-FdsOur92NhWTtjKbX67l7evCvyz5Htwddlv28Amvy5lEzA2oTcIQdkJAklg/s36/12.gif", ":&gt;)");
    emo(/\s\(o\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMlze1V_SkYYomPFhymEJxYOKl0dQk-kgvWOLWan-NHL3fNp7VBWbN6KsdBqC42g1oyBAm4f_BKxYninS6KS6ElwQnVoGW2J1x9nfec-L49zQpInJWdzgrfJBMQMld3vPTUV3VxT9k9FA/s36/13.gif", "(o)");
    emo(/\s\[-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPJrhTlp9j-urh3l8_nsSbdISs7rAMSyG42oFbu2dzgxlP-_SGW4zDrTDUaSdNJt3ERAY-OLBG31Fi9v7D2swc53z8fEETt-6VofhtNfgglZwUGJz5aSU44_IaWcWH-fvv2HvhGkKx5VM/s36/14.gif", "[-(");
    emo(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvEKmue9il_h-MLhTxBtZv1ZaMwDEHArz2Q-RYGvGkOJ-_JBCY1FmAXEXomkvsa7QOkhUSq88ItJF7iv4AXSfYPKWddW6MbTgQzXSEEegy3J5tnmK7i1n7112MpR0knorwQTeMfTkyRD4/s36/15.gif", ":-?");
    emo(/\s\(p\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0OGLBy2OjZ25Nu0m6oFNjEq_Mb48C0F3ADHRp4Wun_50KrFNjmQaOeOIxX35w0fTvGNQrpW6qhIcXVxgh3pjK9H63Ksj7VPzFgoJW0DlrIEePolxA6U37WUDzWnVD9mX67hyphenhyphenWvCtte04/s36/16.gif", "(p)");
    emo(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJw9fBV3-TpVs9uvzUKdYjHgyEO6oKPjU-9GGtjCOgtRaDlrZSk3pCKbmI3CC91Cr7SAEyXB-BHZlK5I7usMAHgt_OCRH_uLY_vv5UA8qdS-IRTLfXYRE6KXgAVvjP0bX0YGlT27ysJMQ/s36/17.gif", ":-s");
    emo(/\s\(m\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXlJForUka-VTz5sAW9MbXMb1eiGRMUFnTMLVKPwYSaOfJxy9n36c6twkZAg_Gi7FuR9PJGwu2-bDWxkLAmrpUTJ7t42g4ZDl6YG43T3hy8Ii6R5d2oMwIanrFRlwLsoUo40Y2Wiy4fd4/s36/18.gif", "(m)");
    emo(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdsr-6WCzQ0JQxV-Ee0bM2EzdHeBMDMjkGqcvGofdysgBpSw1rrrRuXhNZprPQbNRcdZ0mEoXCGDcA32ia2RL_OPildeCtC1ymdILfwdZxRF9toOvK1rEISXauL31qUnJff8paeH6cc7Q/s36/19.gif", "8-)");
    emo(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhosm_pVHzvbk5C3QjFTPHixUR2ghYZyifHLIwJdc4pHm0SMjEypJvfeHMkQT2KhIs9yvPnuxuw9Blk3UYbHXeSIvYFpzj72DpIzry6OtP5jZ4BHEkK6PKJ7XyW8Ix9HlwbPYtMrabpoR0/s36/20.gif", ":-t");
    emo(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZjfGOBz5WvwwXtQh42XcelS80CI9fnqRUIYShB8CXIqZzVYbZ1dRhmvGdV35WgiEL_FOBTlSFR3w6HXgUIf-IWG6BfNiM1nY_6K76buVYj9Lb9HOhDH2cIsf5oqcDL6R4M9VtILaSoCc/s36/21.gif", ":-b");
    emo(/\sb-\(+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw3bMKpnQSIJd0TYxQbp7rPlsg_lDIcWPcELp6ct1AFXwgM0qtklfebsE0QMUNKNhWRi4rtp0A6et5zqYMUXzy0NH0C8nADstFIR6gsoVSzxUUgJR4x4gZDKDqMKWWWb8Mj-w153uFGFM/s35/22.gif", "b-(");
    emo(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQUed-FaEZS85ZUsqfpcYHrMBYUkM3C94lcU3hwnp-4KMcsLmc791tP3tauoAmBdrBLWB1iv14rthmFTxPXDPuQHPVJ4nmC23MbYkUQrgqRm_DYhz7wRx8t-bxkGJfDBXThomT9Atv-Hg/s36/23.gif", ":-#");
    emo(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja62-kPgLKGIpzDuG7-Ecuq4KnYZ-eiOKm7Dflc3n0S1qNDMJaxTJvqrfhomnqS3FykHoGRkN3VVjIoDH06QkbXYJnkKt6X7x5mJUNpeeQIeakk9Tk2-dY3F-dBJfnqrGHhRQQ22mQjvU/s36/24.gif", "=p~");
    emo(/\s\$-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja5DJJzRWEZGv3iUFAxU1P5acQQbq_1Syy9LAUy_4wIlsb7j0Amg2TXln6h-IqbwZ17vSjv-KODgL5ddk9fHy36UF4-6d_pcuUpuVAIjysb9el_OouqyEI0mGlYjeZd5Vohc0OrWgpnVE/s36/25.gif", "$-)");
    emo(/\s\(b\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgieivDipG53Gg4-nTMSOavb7ifwN0SKh0basahJHT-n0xF-C7slEGCI4nX6FOid5DqLZjiZCywpJ677HC9LoQZYfAyx7rU7t-gUqXPw269iShrUmbeYNrLPmdtV_CJZYt-b5hdyLjra1E/s36/26.gif", "(b)");
    emo(/\s\(f\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS90gnpAb2TCOx0EMwv6zKqRnxe2hqfxFBHrdnKviFChenz56_jKUIJRVGJGoY5TINTRKgavWOBNs4J9e5RjOcBs6nxpw-CcIjlg21WrYnYSMGp_VtuSmxzOR-efkh9utR0KEDrtk-StQ/s36/27.gif'", "(f)");
    emo(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB2ai9ZnQG1hfjEraUh0Q76D7DLZVxt0sLVBt680FLQ0bFe5MpJlCiRWOhdkjugnZ-yBcJK_zBPzxh6cvhi868SBZDnz3SCiyCBrYrOj5r_ia_mWlE2TY1c1m34EZJ7mZiRgfm8YSfcMY/s36/28.gif", "x-)");
    emo(/\s\(k\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZYQDuUEv3IJfRyIm2J1Zwmz2_jew3ZFLgRM2tPh5mA26MUGCNAB201KRN14RGs34PpPE5G5t7afQtOjO_pxDKf1LWVe8-Wuy-LjC1N-7A_RGNGnQqAblCOP8on8mThec1emHwW0vU6ns/s36/29.gif", "(k)");
    emo(/\s\(h\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNiG2dPo7NBi9So-VhH7hGDi_aSvzw93f13OcmxbsKlWkMOO7FyPcBoJ3mqDMg-B9HRGfQxlBQNnRXh7a6-II9H3nF8WAGMu_Bv911SuAbO1PIHg_w0Ej9mHcpV4I7Vq-exS7DqGeDUmA/s36/30.gif", "(h)");
    emo(/\s\(c\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ1GXQbscaAzVwM9jrsJgON6vmiu8BESUU5qFHYR1maJrVZlAuJ0lckSzF6RjjbFrRfowVizOtfskb9jImvs1-6JuCylkQaFlRhPYfn_xRGjlTA4MBhjnYMJA80O2znIX_ryEjW0QLm9Y/s36/31.gif", "(c)");
    emo(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjhWyb6DLYQocyas1zmsTYbpOtin6tMJoKsPJFBnMD1bCP9LVuZ3JpgvjuepdyMUIAEI0u2-WQN_e7Q_MGGaXvSGvs95Z7y2ynkTQAQGotBxd_E136QTJ3w5v-2XsOjuI8sSNI1YHoEWU/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. Simpan Template dan lihat hasilnya