Cara Membuat Emoticon Keren Di Kotak Komentar

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

1. Log-in Blogger
2. Dari Dashboard, masuk ke Template >> Edit HTML
3. Cari kode ]]></b:skin>
4. Dan letakan kode berikut diatas kode ]]></b:skin>

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

5. Lalu cari kode </body>
6. Dan letakan kode berikut diatas kode </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/AVvXsEgf4XEHG6cZJgXrDt2mPEY0qhESxKdyLhwSga-ZAdo8lRHoNN2icJn6w2PVfMcRNS8p9MLfMlX1X9ReYGTX-aXp7fY7YkdKr52LkGW7Tq0QpB7ERGVBkGNQV7H08NRmsNf5O-JTg5KgMgY/s36/03.gif", ":))");
    emo(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig2ujuKVXPPbuJ_P7zHRYxJFp4f5nmomCAX_UE_tCjoPFqPsJs73wtWsk5y-wPtUt-9w7esCiGI_EetPSBPSPuJrJ6azniVF1714_Z6jmn-uIhLVvT6alpAj0WYinHI4zeT958XdyWOP0/s47/06.gif", ";((");
    emo(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVJ8M4oP4zYUi3GxKc_VOGMK8gqEd274GFiRXju_GwRmatDDc3yYI5CcJF9KpzTbQNP6bvFeZgATZ3Jky_q1FpHAQtMlcRLYGwWggLdBl9VpBJhWhMwsaT6Vd0AHpiyqnPfzwHN90pkK8/s36/01.gif", ":)");
    emo(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeqZ5AkyIfo7h_Q_H6psGdpvC5WHW_DSrMh8691vigSJFGioUWwkWqDwJTtLC2UpxkHXrmieUnLsgg5dFi4P3Gw3TLYbGSHhtySa2-3cV8DSNjA5mB6JUXBCq3qwCAVlijXP-cdVRjDcs/s36/02.gif", ":-)");
    emo(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7QSOqYqLZ3b6xn8jz6i8z5GvXEdqKCxpwymIRyhKF8PYMGhCTUVCZc55XT5KD3PJLhjZ7bRIl9Vvnd1Lky4b8J_TvCI_ux9KRq0jTo4Anipu6LLC-zSLcf_SNmaVol1JMCYY2UzXzbrY/s36/03a.gif", "=))");
    emo(/\s;\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSfQntUzA4bqD3OtXOVvQkke4SYkb_ArtESwZwbz279fzcXizDU7fXzzp6rqciZkBUQAZMNxXt2WWFNLAbyPwa0PKH7WMDYHVsJ1lVWmb8A2VKjsVF0_8bh2pWAM8KoEMXpo3QUvXCSZs/s36/04.gif", ";(");
    emo(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimiiPLVcq-SnNC1FCJiP2Rr9DxOiiRd93knFBEI9fLjfO6d2RUhtbucTPXf7NsA6jTHC6ObKc_hYTDk0UrpNWVDfwKpuDF_fNZjRnvc3v9FD6aST0a34jYf8CXkn9a5OhEd9zDfikrTqQ/s36/05.gif", ";-(");
    emo(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpMa9ccb1HAAwXC8gp8Z9rKjGTywAH4Twn-lRSOv6j_s1L72uNd5yilokuJ3yxHQPwf8V-DRuAd921xOZ48F_XhOAD7EUH4gtRsJ_huKEoUug3-5f4AQHNTF2SN7SUKvYVPfVtEek3A3w/s36/7.gif", ":d");
    emo(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh253Ie5hWkVtgpQAmiE4SGnUwtXa5UMfavOuCnKbNUlsffeXYVzrG7hak0QaBMf2VS2JxkZm5fu7n3jcOGPBHN_HuYC6rUrKKWv7LezadJx0VjdZG-4iH1WsY2MpyAN5QdDPWgsfFF1io/s36/8.gif", ":-d");
    emo(/\s@-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbhQdlipeGIMQS_g9K2BG6U9r2Bgo4mPeTArj2nZjPTYx_ll0G4ft1Xrzm_foLxUUNfhy2WFeh69PVZzM9kgJao3sCzIwG3twiKv9zbUjCHDOBREPpvoT81T1kIlcBnAvgLYp9pOUXhpY/s36/09.gif", "@-)");
    emo(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOZ3VjhFwNPqNfyUYJxhw63-CFC50CVWNGGmESggiCzQAhQqGVlRcx2DZ7-5SEuIHa8P4bqb1Q8ddagnMebUktZaZQEbSqJC5VwKyM4ewJhhH1flXoGl_zHz3qt98xcUEReivHXvT4hEU/s36/10.gif", ":p");
    emo(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDPic5Jk6RkLIruNYCArA651k_cX1Ndq67GEGh5kEEgR0HA9UGvC_XpwPPXvxfLIIPG8mABMHsok0s4pVxdsIL_ycoL5XqLFQKJXUE-3bwKLTEWcUQmQbEo0N0UjjGfXawcO5h74sYJIw/s36/11.gif", ":o");
    emo(/\s:>\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRg-CD8BNM97x3gkDMwsr8lYlWetoHamc0cq8UwF3RntMocVM2iyjjsQq3sO36amRttj_CeoXF3bm6OXCrHEoijF8J2n5F1V4wIoM-JdvHlJZ-MwpV0NvG9vR-yeElTltUBxnvfpmZA-8/s36/12.gif", ":>)");
    emo(/\s\(o\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXx4xH4Kka5flCfHa2dhA9BXpkgicnVAEe-mHeFbZtsTJHbL321BSS3jio8LmTN9Sznk2YQMcm9uDcjktUSKT1SDEIXHuKoKzTUfpbr40M_Xl1Ua9gatRn5kI4tL6nFzB5q0zBgxoQp-E/s36/13.gif", "(o)");
    emo(/\s\[-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih5PECP_UCCCvnuZGNAYaHixTQm9j9fQwAsS-HkrK8RVBXxY4fqKa72aUkcKp1lM7d2RoDtFmc0x3bIUUz5Nw7mx_VLjBvmWvURAKO7V5wgjh8Uf4HDBCqlN49CNoNMpGcWvD-KZu8DwQ/s36/14.gif", "[-(");
    emo(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ3GmBkds_COxTNmYfWDwczkXiwbbsnvMf80UU6O1I-Q4_M_CoYgZb8aOLCpexcjIIIuXLTGH6JbC4nZlHc5bU5g83FGR4dEDBixE7yWUlcfktsV2ChuvO-E7nfYTNWBfAWIereXCM1xw/s36/15.gif", ":-?");
    emo(/\s\(p\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjouZPVb7cdWGbng1uhrhjRx5C4hVbemyit3fPXuZZLMQRi-YwclGvL08-yyZ0PmvkKmeJZ6aStOP64zRA7Rvp0t6ZKuP28UuqNV7_C_3LwvoR3ReqcJWPZsUGjaxVn64CB-f-l1LVWiAM/s36/16.gif", "(p)");
    emo(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje_IzjU9argzPoP-GnceyPyFgZmZNWzq5Li-AAUicFXEWDQ-06ZPyd05PdkOnKu03KmBx4ORGmIUQYu8j334tbUrn1de83RZUz4ySdOVegJQ9XVy2OvTqf3GLXrOLgxd4craYKkVPuhWc/s36/17.gif", ":-s");
    emo(/\s\(m\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilOk9nFJn8Cs6ZPkm87f14nMc-cGOchY59tQfUiGimZFo1fhRUCbDHwL2UhCfN4ayx79c0SXMUIaO1Rw7T4H3Yp7UKZSEwjczrzpCh1S7LQW3ka2dudFjfnnNv33JYwkWGDPE_FDg31h4/s36/18.gif", "(m)");
    emo(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc-8JpFybu_tfjL86491ukUWzh6NMkJl1npUCMp29QrhCY_hZySXThJLsBjDnMt_ILXs8JH9vLoudnLoisVhww7SuvnK1fpbrd-njqLDNI_B1f29gCE-MZagaDchfXUUIYR90xHtSU2sk/s36/19.gif", "8-)");
    emo(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLU_5IfKXBrZjFfFNbdv-IwrvrfAbh_07x4VumXhcCKWWAiY33irErQy64W19yKe5QWNcob-jkzYMCRTEHjMriS_Bt5fTSbD9fGfeGPxR0_WtcdF0CPqOm2cXZ5seUQPx1Gpb21DlBc3M/s36/20.gif", ":-t");
    emo(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibpOddbcE-lAENnkkqVElLcJ-mo-BTdfUbXEd2IUseqgM2EIgy3kLNCytvqmSAwRIo-QPcr4ldMFjvBddLmBRkZA1CMqBUV6JzJiorpFcrWHp7fRbDYm0-ynqYauZtAwlmYRcYpnLHxxo/s36/21.gif", ":-b");
    emo(/\sb-\(+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdMT0c99kBk4g2FknPajOyMyZRglGQBkXsds-_YaXPlvcAglzGKCNdtmQjTswvdwqRlteURoMwqa0JO-Glj6RX4p533JBcjvKFYdACDV64fFGvs4_ku_fVplDz9Y3iqT0jeDesPMFOvxc/s35/22.gif", "b-(");
    emo(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYiWhGhyphenhyphenjWdC2cmxo3PUCvV574ffzQR6ao-awld77a7gpomUKK5I-0GYRCNqLqsitTy_eQVA188rQ5uhjmC43as7B6j-yDRqnVYqRQKjEooVaAyj9p1gvp3CE6sLWlyZZm35QA5O4lLC0/s36/23.gif", ":-#");
    emo(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjotoVyM638bc3TVKu_9ZvRNy6xjtmfTbohnhq9trYYMmovB3DOvfSw5Fe-9DXoFly4KZEEekYaKMWtjIfd-zWRondRU8EBZepOY7-_4Qj2HHn_vXRNAPbWMpcAhsCkJzVo6RlIwllETms/s36/24.gif", "=p~");
    emo(/\s\$-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi43pW7lIN1VCQYgW-jklJECyQDbk94rq0QOmuLMVcjfEO57-nWAMG7EDozQO39bekv2_ntwPU_ZeAuXkTAU3LvktLpyx2ktbdnji5qmBHYf-tjRJ7aFbOuE6RVc5tgvs3-WCIZRuzXezo/s36/25.gif", "$-)");
    emo(/\s\(b\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCcLNqsNqME-wf_OlT-TJZZqh7vRJksjnPnLeMo4FKRTgdTu9AzMViOHCt6aHol9ddq4o9wb-ZdkiSkjGl8CUZGTyV74QmMQaHHI2nTK24mMVgtE8Uirj3nSAzvkVETMnCbpDGrqnpadM/s36/26.gif", "(b)");
    emo(/\s\(f\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvCQPEClNhtk6iyTWU-vbxMMsSuP0H_i5bd8ui16I4s4S4IxYrKdmoyDQOqSV1LFRxb3mZ3w_bC-5S9FmA832ECmLxHchYyyscdt0DzKph_TFCYzglfQoBWoEijD3RCt59pNUPLUy60a4/s36/27.gif'", "(f)");
    emo(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb9Uyg8UKIfEc9oMDvaJxsusmgkhPqcPGbLPbcFT_dw_foI4OfN_WKg7MAnrkB3jsYS5_STABEPFqhzCJdmWIvMpaiq-armrESZetiIYWmqWtkAkTXxxMBMhOD8tp-HLhwvX0M-mLf1qE/s36/28.gif", "x-)");
    emo(/\s\(k\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbskUi0z02SLLmJm5OyBfdHY9BUQk8KtMDr2yJhCmU8iaaQLHkihChPFWXqzR_sIUlZeVEs8RYDHrR2pQqMeVPvYkUWX9xpZczscK0MrEYE_2i4nG1aEBG0_1P0PgpyofuDmZn3D5sVNQ/s36/29.gif", "(k)");
    emo(/\s\(h\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeD9Vxrw2_cwyOTkFWp4EogwbytksroCxOxgqfyW4uQkTkdF7W7zlz4D6X5UboQic9PehnlFvp1aGZkdtjRcUBbrf92YkC5QPTFtwsa-qF17J5QbD5G44h4t0MkHiHRTF0FvfQEcYQLJ0/s36/30.gif", "(h)");
    emo(/\s\(c\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJm5LZEVYUiGRULsT0oFL_EahkkqATNp5Ntizhl4KsCOuXgsdNnbJsbL6xFG9Mbk_enAA4Ed86rRC6J5zp8A-6La59AHImoIhM1L01szh9gvxUxaC33-3lNk7o3TBMtlFqYJ57-qIOm3c/s36/31.gif", "(c)");
    emo(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ6a-vmfwr40CAhb5s61gSzMkQNnndKstH2e2Z_QTwbLYNEjQ460CzXC0AF4RJ6726A9Lac0aH4JFdysKQY1HiiEYRik_E1exKnNmMqaHSCC0aHwu5MwVpRGU_nGsa8MlH0ECVX5FaGK4/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 tentang Cara Membuat Emoticon Keren Di Kotak Komentar semoga bermanfaat ...