Cara Memasang Emoticon Pada Komentar Blogger

Kali ini Ammar Fathin akan membahas Artikel yang berjudul Cara Memasang Emoticon Pada Komentar Blogger. Emoticon adalah sebuah simbol atau kombinasi dari simbol - simbol yang biasanya digunakan untuk menggambarkan ekspresi wajah manusia yang mengandung emosi atau perasaan dalam bentuk pesan atau tulisan. Kata Emoticon ini sebenarnya merupakan gabungan dua kata dalam bahasa Inggris, yaitu emotion, yang berarti emosi, dan icon, yang berarti simbol. Emoticon biasa digunakan pada teks pesan singkat, e - mail, maupun pada forum - forum internet, seperti chat - rooms maupun blog.

Klik Untuk Memperbesar

Untuk memasang Emoticon pada komentar Blogger, silahkan ikuti langkah - langkah di bawah :

1. Login ke akun Blogger Anda dengan menekan link di samping : http://www.blogger.com/

2. Pilih Blog yang akan dipasangkan Emoticon.

3. Setelah itu, tekan menu "Template".

Klik Untuk Memperbesar

4. Kemudian tekan tombol "Edit HTML".

Klik Untuk Memperbesar

5. Cari kode </head>, kemudian letakkan jQuery di bawah diatas kode </head> :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Pemasangan jQuery, hanya 1 dalam template. Tidak boleh ada 2 script atau lebih, karena akan mengakibatkan beberapa script tidak akan bekerja. Apabila ingin mengganti dengan yang terbaru, cukup ganti link-nya saja.

6. Kemudian cari kode </body>, dan letakkan kode di bawah diatas 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/AVvXsEgk21m4ROnKK-pGA0kiF1tAtgAQ4Il6FW5TE-VKBXwDbsv1dzpM2FW0DKT_DsuJEX56RQdVsV5ROCCCH2GD-Rxb2EMVtKiLua-XBjzYSTdXiwA_vMmMdB4MqPUdPaipzCbZ9eBgK7eb7RE/s36/03.gif", ":))");
    emo(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyTV4kUgAWJlEpXqu1Hju2sAuPRqqRpBEfbzXLZeIYCyYxXAQUkGXr3QuHvYaWdw60aO9uIO9CopyDOgJQZK6r3GkoJulP3RkLzuQwSHteyNHCHa4jD2MJNMPLg1Z3DCrnGMK2_LNTuvY/s47/06.gif", ";((");
    emo(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPhVAp839c3d9NVaHbVwxq9Xm8Rux295EEHEURtYKpzSgxTH2EDBEJt9r-hAWgfPOgcNveI6Y4m6pTdZgG4fD8JKKaRxOyrdF4T3jhLxlqZIZw0jirG2JX8JC97Y4k0mMfNchMd80YWXs/s36/01.gif", ":)");
    emo(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSvM3NKHABldFs08kDB3ecKpj8uL7JXt9Rr0329b7oG7OJd59PJHtR_leOIeekG2YHu4AQROsd5JazQb4nTIIe46ZnIUKDEIYpA_z4MMyzDUri7VpSbdpvpGlGHHIlnf9k4OdY5Hi-5x8/s36/02.gif", ":-)");
    emo(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXRILrLCzS2KxY6pTvq6MZCz4IsIuzd5XY7cIpIQ6Vh4ZydqyZB90I4puoMm2tlJBrqEBVJHOUyrtiPT-mGHuRch462VW0NlrJ23RciyCOBQgC1McNXF_VNrL7z7yyISWqAiab-lcgAug/s36/03a.gif", "=))");
    emo(/\s;\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSVDRvWtbCSemgiycoXNUYULXRcjpsSJOiEI2K1naNFtQfDd4hVCjpSHRon48OO4c3pXKUIKjlbeL8ow4lfeoTFYUW50IM2TRC_cy7lUxI7GjB9GhNL-vPF-E5poUoW-3EicFE3E8RuA4/s36/04.gif", ";(");
    emo(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV8h3P89e9jXEoHzTrtWUYjsSsxCp6Yr99K_KlDCUcNrgUYn6o6k5u-o2wVGonYx1nc8j_sorAx0Li2_oHu7e6WwDnB3tngP1J55BuEcaMU6_Q9sU36HVOr07RMUtiI1W4iM-HH5BpMBo/s36/05.gif", ";-(");
    emo(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguhbFaDDfL7WWLJiR3svO_aLDv4SWIXuyOsMv_QDmxPJeUyi79HFtE8XAx8JZwGepqYWWOVzVCUUQkJ20hrbK_YETVbjy3jiCUu2uGJt9vXbyIzUHh8GmDLXd19hUsrd477ouj7YEC7rA/s36/7.gif", ":d");
    emo(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinKwa8jIj4C6i1OFdPnQbhbkk8TupxRJgCgobrD0rR2xDYam_3hp7uEmL7s_CcEEvUnuhot6CsFbX7KklaoNM1SKRWNMMioevw5DWPi7_jojOlf72CW08miSPIGmmcMx292VDJrBtEbdQ/s36/8.gif", ":-d");
    emo(/\s@-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirwcS7aAQaqKz6CFXX7-HarfaQBh6OO-wCEQUGjThxbZRoCQ-bhIxJS4IPzr3CoN8moc95G9cTLhOyHkAIwv1wOJqzeJj43VhPqez2ksuX8SkFdUXdozvV4YJCBmLkN1Db0oz6KZC7x5s/s36/09.gif", "@-)");
    emo(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbomJjUy9A9sahZ2uU5g8BTG27LtMEvhXhHl6FRXZE_-pDvfwbqBd4Mq_kowcHAgF7n49BZHhhMNZ4KeN5CHjCL_8LlYz7bQeDdTqZ30XWtO-VfkGrufq0dmf8OkfaiKpRf8uASEa9k34/s36/10.gif", ":p");
    emo(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvoRrCKgzswCnapf5Hn1joRVQR0mRmUUuZY8ez4AR6B4psawbqGwDbtM_JX4MZvW1-8WhrXAHA1uk9r7t5Osf9Yiz8AHwjWpuZHXxIxYoNLDPOjryNq9LMe0Wfd17dTJPZd9N9iCLSYJI/s36/11.gif", ":o");
    emo(/\s:&gt;\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-CK2EmnsL0EqT2f1FcrIkWd5oa0x7kggpqDRz2YUDlt-lAg2g2x4J7snGs0EuvFT_7TFF5dqMFT_-ZMYRx0fdOZXiM2bONdZldLX4Ki3VBxA7shxMe4emrm5vkBK_qK1rUxCXMuWobwg/s36/12.gif", ":&gt;)");
    emo(/\s\(o\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4SUcZjA4vMtETHWtV72XZ65xF9-zKMAzjAzoKFdzvTI2ZWr8RTTOiFml518mPXkqBcId4PLjgKRNxiAYpraHsqOJS495yHodmKyUOJ27tXpxFrK1bjkyTNb1UCG-cvwTv0GF-YFS0UTM/s36/13.gif", "(o)");
    emo(/\s\[-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2kJZdxgweBdeJnM4TAuqIkeQGfNVZvX4GrRTw9k0N3Wfd3FL7NlxLvHyKRai8XQ3yP8CU5n8x-MoOJTmnYqeW300yxrxqEh7vvL3169jC5nf5-C4WQN_EjDoSU6rQLitRDhMMpfZsLNI/s36/14.gif", "[-(");
    emo(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTp7oVTdDNTb4fnOB52JdYIxnBhAKcLCYUb3jBEMj80Ujwi09aaVOez8qpTVBHvg8fQCFU03NVJzfv7WH8_o5ZI05qBpD_hTIgujoIa4DpVd9PszVnyFBIe2he8vnGRfaqab6m6-aIQsA/s36/15.gif", ":-?");
    emo(/\s\(p\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxKtEuwzyM9MKqb2UUA5SN5w_-yWeCoRWWocj6KPvpsUolYaVQ1tP5EqPICsOqxw-K8rGMhC8DMn-zNfOgMBJ-VIsHoVgbS7q9nlISPygaJv3Wc1s8o_KsESv5eEUrW3x75-kCI0kgw6U/s36/16.gif", "(p)");
    emo(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO2Ie8gdJs497lPKs-ILSiHCo2NQn9AhxdqFrQoPFMwTeURpyZaPjUZqLXhHYpJcT72eKZsZ1CFcbV6RO29_kt8fXu9HlqSCzn7PpKn7HmG4DWt0xcwxpyqpRvdYq8i1Iw1MCHBkHX77M/s36/17.gif", ":-s");
    emo(/\s\(m\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkfrV2cm37j7sQbnNDEGIvRxPVN6DkXXDq6sdDwvAuz4UYex7AnZg5DGkL-YEd6bJhpVouqdMw7ivsyIrU3r5NG9zBuEw63LsDFQUDkh7hOQYztGYp74DL-XHJw6urYLr4n1ltmof2xX4/s36/18.gif", "(m)");
    emo(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8EpLXx9gq3_TrEHBXy7DF_ZcxsI9bRiw6i3-Fg2GgB56tiIRirXXQy_4sgBchwzCKoCGYAR95uKDN_8rcJ8fJTrfDm-tLpacaz2BHPf3-F6LNKpBU7K_vC8SxtPRdT9E3uZxkKaQXUts/s36/19.gif", "8-)");
    emo(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbqDY5H-tK9v5K9BMLZQsNUTiwb0cmPhHk_34R5a8utVUsIMzVJqfVel6Ro_2bQkJCWz9yUyj05NakBnkciERCsVqXh2Y1rBhywSr7UGuRLGT8SI-sEGNN5oDHfkHVyGjbtfnFWu-07CA/s36/20.gif", ":-t");
    emo(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghheHlXK2ucsscTMTi-pO6ifSj4DSLaABC6EJQAMjpBRAVvIHn5X4MA0F31tWWQEjVxO6oa_i-UMPuuM5z8-LvXvI85PRbmj1GIjRPr5kkgtGOHx3K08wCFOVxOBafSHePY5NC8tOIJfE/s36/21.gif", ":-b");
    emo(/\sb-\(+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR-SWssGcHqanrdR198-gONX951UnE0cnmaFmf-DSxTiF5JN6t2Lh2Gy-XFhS3Zx2T4oUoZ58HReIgKHpVVq9wtLyEZtqAf__xuFDPLmYJCv-XyVtIjR0hzGMcMUrytvSbCHSFXpLo6tQ/s35/22.gif", "b-(");
    emo(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR5uRx4AFXCQXwsGtOGvK_7QywVDS3IRb6KauwTyIO8qkcXXBmLksb0qi3gu43a3cPnFf-Pf6PYSVQIzOZHULvaTW8la-zRg7Zf6wVpuJAi7sy3zT0KlH5oY7P8_e8TH9IEgA0Fm6euV0/s36/23.gif", ":-#");
    emo(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZRL_NEmJ7TgmvF9OQ_hJZ354bIBpfUoRDV6fSSc6bAk3S5XaWkSUcjIr965iZEAfSD6Sy2MigPGDQHMBb6MEZ9FhjaV0zYCqNdKZ_I7qcdmKVrCuJeOFb7-KLQzWgkNe1W5oABkOG13c/s36/24.gif", "=p~");
    emo(/\s\$-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH9HR-htRYG4ntxrYkIUDEaF-ii_TmWjvsyvSDZ1ciFRz8xubvAi_CaKOBhVyUbYvus3QgTYw8qPYrAyIKbNodEGMAgGjpP_uh0iGAo5XU52NQWM2tLjjX_GXtE0-1ZDtLUasts_egreE/s36/25.gif", "$-)");
    emo(/\s\(b\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrE1uz_UrwHGt1vuCFDfJ7NeYcjVswQ8SN6sSJCxiJ2sKm35tF3-RcE1tnPvJoPY5HjdSUdfLNn_sNsqYkqG9HS0aJmRVFDDWR3cE2sxBXXAE6uzMVWEx0IzuoOl_FPcuPEgbLrUADYY4/s36/26.gif", "(b)");
    emo(/\s\(f\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYPkWPG_aa_QvVah7Rt8cFWiot58ZuJ19qJ0kRMlMRxQZpR8yQoO8QK65U85wcOijW64IFljTBXRadBc99aELJxnNrqPpB4djNDhtO54w7if38tk_vM4-Q_D2mMpolCo9d-zmn7T4TnlQ/s36/27.gif'", "(f)");
    emo(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Xf-Oe8Mr24Vkk2u3vN1IClDsEqFae1WJlHUOOogjaxtLopSZr0eUnpTN9fmhrjx0Ebo4CN4d-0p8iqWaC2wFx5QZs56ZBh2A_oN3ORhzMwtQhv_I5MfqynrIU22V4romi1s_9r-so0k/s36/28.gif", "x-)");
    emo(/\s\(k\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5iDRV_mbZyyht-MSfICtv4-JjNLGjos0XXE7c0L5To4YdvhSQ8n6lAAPKV3VV1OM9bKaqA5Ni4ay1GOr1j4j1HsOOhmAHDZAiRlKdt5MgLSggFSgRGYTuJc34nyc80DpuM-_Xsu0TD9M/s36/29.gif", "(k)");
    emo(/\s\(h\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiAHIywiQiOkS99q0jAL_81T93Zmm_75XJEgTzKm7a7A00D1F_lJGgfP1bgYWL99f8ZZRoViKDzxKyfc9il7tGm-yzh__NhylnNvrXOJ8JynrhrSl4_bsEMfVy_rpiyBQXKihC-CDSLlE/s36/30.gif", "(h)");
    emo(/\s\(c\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgux8C809pbbaiQUt-_uf_HktNb9bahXl3T_8tCusjcUUWsN_lfruZlErxuo5I8_xNXQlWcuyTUXlKkaJH4HvVYOGFk0W3ptVDuCLOQ2YeG61_25boKvAHwKmiPKqnm8aXFpLKZbsg-Vi4/s36/31.gif", "(c)");
    emo(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyDGxelj2zGwWqSSyMDTk-4eDws0gFQXbfppk6xsB64-BqDKkgtYYHq86Xh9gmI3gqZi6rOFNuhyphenhyphenFjLchndLdkVWUi99UOhpTLo7LwU7rksMw49kczln-pfrS8mBGvjRHQg2c_s0AM_8k/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. Sebagai tambahan, cari kode ]]></b:skin> dan letakkan kode di bawah diatas kode ]]></b:skin> :

/*Emoticon-----------------------*/
.emoWrap {text-align:center; border: 1px solid #CECECE; border-radius:3px; padding:10px}

8. Klik tombol "Simpan Template".

Sekian isi dari Artikel saya yang berjudul Cara Memasang Emoticon Pada Komentar Blogger. Terima kasih banyak karena telah mengunjungi blog saya. Jika ada pertanyaan, silahkan berkomentar dengan sopan. Semoga bermanfaat.