Home Blogging

Cara Memasang Emoticon di Komentar Blog

• min read
Table of Contents
Bangiz - Kali ini admin 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. 

 Dengan adanya emoticon akan membuat tampilan komentar menjadi lebih atraktif dan menarik. Langsung saja ikuti cara-caranya di bawah ini:

1.  Login ke Dasbor Blogger.

 2. Pilih menu Template dan pilih Edit HTML.

3. Cari kode ]]></b:skin> (gunakan Ctrl+F untuk memudahkan).
emoticon image
Emoticon
4. Copy kode berikut lalu Paste di atas atau sebelum kode ]]></b:skin>:
.emoWrap{ background:#ccc; border: 1px solid #333; margin:5px; padding:10px;}
5. Selanjutnya cari kode </body> (gunakan Ctrl+F untuk memudahkan).

 6. 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/AVvXsEgQf0KYk104eSy158kQyRAJ2AzEX3QzG1g9AtV0nU5rjToTIaKAtc-qxVqQ8D1F4ES8i6bEgXkoNAbo3oikOieza6LP3sRd15nXE4lGLYQVpfZc0_16pjqH7cALpPVGZfWztPHhBdWDAdM/s36/03.gif", ":))");
    emo(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCTnlfJIGfs8AxCruj52US8uk1lqSh95Ky7WjpCTDwkU19CMMs8m9hhbsolfbdAaEw5l0TTN5mv4VL1F7QRBWXvqUcjE0bAKSQl6IGI59yA7ET1ScUUKoecp7wuzGKdnXVH7vndfZ1uzE/s47/06.gif", ";((");
    emo(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVsab5nZ_nWYEzRuOEfVX-YgC04tiousnQPYxPf5-utptxy-w6Cdlu0hztd5wPiseQV-0JUE4j4CK17DtVZCGYYkuAORVGJz_boSdIqSeyevPF8rdFLuJGSD66IJgFj71oSOynTMpDTs4/s36/01.gif", ":)");
    emo(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiATu_oUmeCelZBTRFbTJpZt_DjQtpGs-TVAh9iFTz6KGOxldLNL4pmiVdVnrhHBnO9OmzckVvn-X3DoFBNdcZe36SwlEqveYz72zkdfQ-Dv9WJ5iM3z98pGSCDtkUBjKAMq810TRtiOZA/s36/02.gif", ":-)");
    emo(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1pHFFAWa4-BfRdmpMolJ1F_0kdEoduVdr3Xe1tyE6Qff0bius8Znqttd0WyDdt5PzdzGc8NFVdwK2npAKT5rEMdbQ-rVeRPqelX4Ur0ytQFD4oTDR4J8lYobhZE7WzpxYtwl-F6XtaR8/s36/03a.gif", "=))");
    emo(/\s;\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2WoRSQcA2ZREZZyVP6RHkTvr8IIHzVWpxt_hb-xoh2iCDWagxTvTBmdJUjxWT7M7UQToLl-VWyaS5WuRQqCFUg6SYhKST6qBdq-yFQ1V05txQunTfpUdlBPwFuVxlt4L-7CMaktk6o-0/s36/04.gif", ";(");
    emo(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8yOdK4hbRjfzSWRA6Gy05MQmdT8IJGo7BJX6xojRGWh5fUQMPKHA7ZOB1qQN7PMbqg3HAu1dph-JdFRm9weON4efZlVtQK4N3lFmTwuaPVLpJiBcrETlVAtmwtNW8EYOaCMbKZX9FHkA/s36/05.gif", ";-(");
    emo(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHLs0ZBi1GLOw8_huMevzsYFH3CX_SPDKZpBPtmp1HO-t6nxp3fcXSJJCV3NeqaZjcpNER43kG30kuECSWWhbbKNGd0Hi7bQs47UP463wwepCGKFYrhAOl7wfZj0RNmIEUH8BkdeWczGI/s36/7.gif", ":d");
    emo(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-7vu6VHawDQa7GeLhyASCbI9gzmZLHN72IPr8YF7cG2a8DBE8dzMHZ0B6sNykaa2t8-Tchmr-QtkppC5QyBVmCuQjvYVyXCpSX8BLTTjNx1x0uAZLm2MTdR73KNvSzBabdkpI_89pHB0/s36/8.gif", ":-d");
    emo(/\s@-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE7GI6skSUivlQVJ7BeS8JeBxWPhBW-5cxZGdIUocsSPd5C0wMLedhIVy-wCXI0ezWCh3P23VwaLDPEv5AfLS1x8cifY5LgF7lwTrBhVgGpjMCpou8nldQYxcr98IFGuDM2g885T3l90Y/s36/09.gif", "@-)");
    emo(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsFDGhmLZ_fF7Bx5EKWbuCGxhK2x3JBQUvkBumYOcSaDuLNXEAXQSrWKxyyl4Do-bBs6tI_ZrnSe5Ht9oyznxx8jKvMOdIAVIzG1fA3oLePHWFK4xZQ-TN7x802NTf-n-rIjwp76H-qEQ/s36/10.gif", ":p");
    emo(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB-0cqGZk_nkDD_vu304RvEfSDszTivI14d7qj48BxmyF3HhbYJofY2xixBrL2BDeJhOhWQCrOmvO2XiwpO7q3cFLfVznXvysB9xdUtPDSI5CA7P-DGa3GStEriF7sqDGT4PKZanzdOgU/s36/11.gif", ":o");
    emo(/\s:&gt;\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioxdCccyTEBulqIxht3HM4afxBC8qHDqGoo9PaBkPL_3fNI3ylBwFBzfjbhZilxeC2G2k_a7Bvwa1CFTcB15myxgP2HufRMzDpub2plWGQ9ky_lMYgo0UOht0308AIKdD39Tn0XF4cq6k/s36/12.gif", ":&gt;)");
    emo(/\s\(o\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2GpYgZYBwKPQ5EETo-0-ffEV1qBtrGe242EnF7YYkZAKsyl0B2vcz8mDt7LMNBqsQIo3UU_L7pDxH4jlmkgZaLs9VJwD5eJKRDPifISQpRlITa6H6_8_G4mqIAKmusKGdhTzLRNqKiBM/s36/13.gif", "(o)");
    emo(/\s\[-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKY41aLTh1uEBLCOzKrwzH-2UGxQ7xf2dyXtW9LTEGDw87SsIn5oD8i3kj_FlxoO5C5apf0FQ-6T2-rAVnmRGbg7w_gZdy2VKVl5RcDhG0YFOPWZ886Et_irbNInj8FfV33H6hafKkAlU/s36/14.gif", "[-(");
    emo(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY9w4LL-gVbCMf8SHfdIg4YqQeu8kJYCGA-BMkt5masoaamxPTrXJDjoUfAtfaIonk4zR1iQpnSQqtHQhsrtjliRNkNOAS705w6asnYJ9JFGXe_HEUyk5e35meO0RREglZj2mPX3vAXoc/s36/15.gif", ":-?");
    emo(/\s\(p\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNWQR_2XHs200YTOouio-h2B-Bb88CYz2hmr-R_HPhud6qpmPQTYQZCHJKv0HBK_Iygr74cEu06E8au8tAvaZPSa8jEdmbEcTRThaI1SnWY_hyfi4GrtzqHbvC1Lr5G5dWHd1a0qK2Ok4/s36/16.gif", "(p)");
    emo(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ1z9M8FenCUUuTVEN9fkRDWvBQ5VW0aG8wHSOS-CJVgcemvTl7Wl9sK-XXCNld_0OTlEI2bpOZl_lxlK_g5o80znEAdpkL49VBeg6llEasCfcbyK7sF9ls_3rcPsyF64H02wCFuedMKg/s36/17.gif", ":-s");
    emo(/\s\(m\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0dwlia_Zu4v9xSpVBglkdPLAegszeym7lZFHJsnuTyPAOg4jz-M_Vqof38s-9Z5M6RNGDXEqK9YJa8hjmpbGdl7dE7vpWBrCjHs7MDetmu3KZABbaRcNcNP-9E5bLe5tKYWbDRhY3_Rw/s36/18.gif", "(m)");
    emo(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8fPEdlLgXUXZS_GQwdkKKja6gJwNgUTKu2IYaD-DdoADaFDS7ewGjdSRTJmqRa8o0Ysx8S3C382EjAfMJ6Zgtgg3aGwhZUgkDFri1QPSC3_V4dckQjJQV8NAtzlQlgk6j-YwJWQth5SU/s36/19.gif", "8-)");
    emo(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPafwuH0DDEZoc5JtzdiraDyxu1KKP2VLy_Zg-ecpZjnQUX7SbaeP4aLwo6J9CehvPqsXm0OYW8HYMJ4KbH5kyGAk07P6EOSGumHzt1SBdcNelIg2B0jymifImpLSZzyFJTNyAx8TbztY/s36/20.gif", ":-t");
    emo(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhX1-YyvCRlZFdF5JdP4AJDq1T_XjHPSkFkdD0PzXvyIxRQNgn_pbdcf3KeuO0T8VIKAD4X2EVgNbeP7tWmhKe1FMnjwbAQOGayMs5FIjKU3s5JNcUtR4L7OPt_oAsnBdwABSmKRFL010/s36/21.gif", ":-b");
    emo(/\sb-\(+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit76E7umKLHOU14PMT4ZkLe2xBA2UuxVugmZpytQ2nDJ-_nZZ8diy_iXbnrDczZlfbBvK_AFAjIr33i5-XUFMNyMof73vaKVImRorVpYw0Bflsohvq_kYKz1YFb5O000Ed6uFG_mnHVlo/s35/22.gif", "b-(");
    emo(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSCykvOGXTCfzPEcn-7Ke2SOKPEBnWl9pwGp86eA6Y7t7QjII13lP8LQ_L8-iqsKrqFgeipRLJlGyanQclnAkoINK_Y3L5dqMU1YDuMwoQbhLAVo5JLHc9Sli3uiz7sjKF3DgMEYL6XUk/s36/23.gif", ":-#");
    emo(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcoSeG1GZAp_bSqCbBxrGJChBFu31szQ94OwY20D9YRehsB-lkO3Fcg7a388_abvNdeiCaO6D2Nuddkt76_Oh503sWyy_jJbmpQiIwTu-0_IQkAm-qYCHXLyTmvwTPQlNirN6yFyh4bz4/s36/24.gif", "=p~");
    emo(/\s\$-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig8lvlWLgKRrfVmXBk8V6q1mxFnxv97XXTm9L-zikVJ9Ucd16QZNTacNG4YaQL9nMyxGc5btLopLViNiN1sF3JqIOmOA_aA-wROuqots9RxMNuAsgtzHOXCj0oFBdUoba939m6Kon9Ic0/s36/25.gif", "$-)");
    emo(/\s\(b\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOxm0S6MQSkk4dTfsT-G4Idv-469kKu5tPajhivCMezptvJAbpvamlKX18dDaK4XuxD7w7sfUGbVB88kvKeCqtV4Wyp04JnKck0RuIZP8qyenC3FTYDAO6gqhi4aS6W9554gCZGxO2CHY/s36/26.gif", "(b)");
    emo(/\s\(f\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb3CKZQclHaCaXEXxiQ4v8HPW35h0pJ9V_nxWsdi2lL49LCfi-WtVEUp8LyztO0oQsIh4rlCSlZ07GxCWLb6s2RLMWW_KfJh1j6uYvgbFp5hZaH4Q15uo0bfL0JZCotKkCbkxAv1VT2Ds/s36/27.gif'", "(f)");
    emo(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf0Kglu4NC8fwyWclQxTbiE1a8L9yVatMoo68Lic75s1Zu8Hjeo336r_vgW4NWzVUqXVMrgYfY6elSyW9eS9kiw05Yc6THKpbrOsNJ67AFbZtv_zSA171eW3QmQn0oNw0z2vJPKCzoG1c/s36/28.gif", "x-)");
    emo(/\s\(k\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW-uoeIXKo9SWdfr-zETelDsvsod6LOemnzKTt-m_jARHSfMpoaY5WtGjSTxJXlbzfV3GOMQMiaCEL1O4Ng0iIg1PyYnPRnywbx6usedatSqbzdZtqpJuAzWuVTMuWiB8We9JnQzzUZVI/s36/29.gif", "(k)");
    emo(/\s\(h\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkEVDf2ZU3SBb6-M6PPQ4o75UGoPSbfNxCuiZqB9Xgf8Jhu6Peue4jEBMLN_bHXPInKmfU4RogBnAckmyvjqhhqFerfUxl_WqYa4Zg2XiRpoynn0EP6dPUOvnQe6Ytp0qxW62ahU3bzdg/s36/30.gif", "(h)");
    emo(/\s\(c\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivGdjX-YVbemA-XS9DWAeF8hoK0SiXYT1kZlm_kJYCDKogsXwfoj5tEr7JY0M9Ez5lXgBO4qjnOD70DKqgrPxx9WX9e7MdhbJ-E8MBXLEnfUguDredRrjZSe2LgONioDl35_4Yf0zWxsY/s36/31.gif", "(c)");
    emo(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAfjUdKTknSrAXPUfn6KoPgLJ5bW7ebpRjzUqS1BGV5VvcHSGR462IjSSHajA2UeF0mygf5YvAh7E_2vneZWQZdio43L4Fy795Am-prF4Ce6yNgvWGuzi9pQOjrqvIRSsmJUSg6xPPzzo/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 lihat hasilnya.

Itulah cara memasang atau membuat gambar emoticon untuk komentar blog Anda. Selamat mencoba dan semoga berhasil. Jangan lupa lihat blogging tips lainnya.

Baca juga: Cara Merubah Label Blog Otomatis Semuanya