Menyisipkan Smileys Pada Komentar

Penerangannya Jelek '-')/ Smileys Pada Komentar ^^

Hai temen-temen! Akhir-akhir ini, chatbox aku rame pada request tutorial ^^ Kali ini, Trinadia yang request.

Trinadia : Tiara, gimana sih cara buat emoticon di comment box yg kyk pny km itu?

Nah, dia request kayak gitu. Oke, kita bikin, yuk! Yang penasaran, simak yaa! Oh ya, ini juga bisa buat blogskins atau classic template lohh!
Langsung aja, yuk!

Desgin Templ.

• Dashboard > Template > Edit HTML 
• Cari (ctrl f) kode

</body>

• Sudah ketemu?
• Copy kode ini 

<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/AVvXsEiFpWwpdeMWfDT6gumZSgzxbKpU0aDcFljHNqbivpLi4t_s4nLVhodWmJlK9CsRBf2R25A3mhGN4rWbP9BMGUrOvR_bS76uSvT0ZLLB4nlkRoNl6B1JVw91Lm-xEWUknCeRxNnXJT07-n4/s36/03.gif", ":))");
    emo(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXcae8TXYsXU45pxkteo2NcjUyb3u-W4d_1ahlz6hGogGINT4Rimgc1WdejfcI0cgmr7OEI1_cMpHrUAovWzdbLeodlTw77_9hq4qQrs5tmUXJ7GUmR1EQO5X3UTdVLHgkiF0JY1yvCLs/s47/06.gif", ";((");
    emo(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWnP4ufan_jS55aseslighIxT4YUMXjARCkZJC_9giKmbuOO8-1GlvZLgyOVLfcfMEXGk26oCobKH0yKGJCr4S-bGTeXsmRFN1SP9L_lPhVLFUIz_hIY9PfwmEoDpXm0Wja2PPN08MjZM/s36/01.gif", ":)");
    emo(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOWEDPyzKPWi_Xvy0YfwyiuDANimjmgC094lJR3xkiFbJfPoPBbgjaYseIGlJR5hs0_PCsCudU402qpgOlpTH9KcJnluX5_0JFWzHTHBl7CIHH_ufXGxVcyMTXzhq3XRN-vTvtRzna1io/s36/02.gif", ":-)");
    emo(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG7Q1p3U0ami2oqNR9itar7cqN1R-Ge5DY6PK5LBHI1QpWFlaA5TjzwCN9FWz9pxZBC8TDsIaaLgpUnPL1OxZNYzhvctWOVpAUrTo1aFX441EvhfDT2lBOYdSNE1NhZ7FFtvIa3CVZLiM/s36/03a.gif", "=))");
    emo(/\s;\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlXfDodI0WecczqcXFeBISrFUYSDB_-ye3DPag8pMkRJzExYMdc1xu-ogqAajhXIuez-ukoeBuigfOEedRuq6UQ1sDyLaEB07DQVc63SHnZ8bjPX6A95MtYd30iTUN5u83E7rKVaX25KM/s36/04.gif", ";(");
    emo(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1HBWCAuOJljBdr0wyd67sueuMKTJZZhFohUJJN-arhilAskW3bhd_OyxHbWed9kiWFXwlSri2PjhMsEPb_aNSOySPBWMCyp_pNkJ27m5BSKzR5t_Mgr07_r7zzNPKXVmP1EsulY8Efpo/s36/05.gif", ";-(");
    emo(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip9CjAsZe1PhFlsqzl7S_FKH3pNGqwQhrmbdAbJ-AHisbyi3i2y5H-vLF_iLmWWF8OgBmG3ATbeOLD7z0zGZ6ZvqQHILhD_tPXgmIFvasahORxYY1CZv-UxBYsd5z86ZVu9qrzUnurUWA/s36/7.gif", ":d");
    emo(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUBsyp18zW1PYHDapcr8V64KMtgQ4zb2qatYrtT83fRghOH_B12qIxHBKCZlhn9ydvLyzve7LxULyq-Yvvy70wIY1DwZ1tO0vov_vEFXpeMQLJHoWaG1lXWjWf_KorD_0uFREhFGeFMPQ/s36/8.gif", ":-d");
    emo(/\s@-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMXzCmk2ajjJk09aPETjHx9pzdP-4bWsYPe8fJMaKQPcASTKEX_NwPAOX_CmDcAWag-ISi8rPHZVutU5x4u4fLKAyH7ZfnsWm8VGZ_VPGEJnZaEUbHHkIEcBERuZcp2z0T48deolg5d5c/s36/09.gif", "@-)");
    emo(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0imiHee14_dELyWBOufLvJJ9E4BHFcF27U8VeEfJuPojVPW9K0jJohEiHUBCtZO82HxgRR9DxHDhlr_33HKnk-exoGc7YHUzMPgZV2uPI0Wwmc0PV27PH2s1ZpOe4kTaxeztISbBkdKY/s36/10.gif", ":p");
    emo(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNEdx4SZWybTvg17ZdSd0wSc7Ex5c5DCzin0ad4tPU_dC0AxbgaDP83Bs5fGrVrODKIPIvVkg6LMhWxdszn1CqbOO-SvvRjvnbc7j66_lbjpuBU-LXFF0itQwZI9eTgJ4RXYThMT8yVQc/s36/11.gif", ":o");
    emo(/\s:&gt;\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2lCbmRR6qcZruILqmevwWh0-mHCBJUiwKzoPz1J4-ePXwtg38UM3rzD7DflDWIE3x0lAR5n_KYWAEnrW5i9lMT6B6n8DuNLpg8drRXIL0qGOKHDGb0jt2A_jdzVZa8p-A0VFDpnrvhHc/s36/12.gif", ":&gt;)");
    emo(/\s\(o\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj6YsdEyVgVGen-zPRBiSnGheKROxZUA8NmSAzpgRer4-UF0rQGJ5GX_CEPEl5pkmZKYLPQKYMaRvdeb2x0B3E8yIJbys1661dfOMaT557Mz-k2mlhEanYOnm32ExRCvTmisY4KZdkDZU/s36/13.gif", "(o)");
    emo(/\s\[-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuijUMGfjrzbHyr5hkhpUo3GoNpQpuCSr8689tHkiBmXgxGaM_mXIX8mG43873VFkpStpxBh3blbdp0zLF-adGzHFFnAXIFWQQiyn9ovEHBDlINFqXsoz9f7EvhFkauD1uwDUwb33mZYM/s36/14.gif", "[-(");
    emo(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiujx2Wr-teM3X7UOLfO3WwUZFdZAsvwKyIW5-8sa9ZNEctjMNsEbYDp1gjMnGk5NK5coYrG_Zeyfyykunj9ZBNEn9h3ISacvdSke28jZudjCPcIBNItDvg4hbkjy6zNc6bGQrEOFFp4ng/s36/15.gif", ":-?");
    emo(/\s\(p\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhac8qBeEufh5uZdWMoZpjJ8Az_sJqyxfS74AHEnFD9gCOvpvRUnwus2OBcqgR1sJO73mr26KxxTYNXbEgGB-VS-C1jmjaBc_A6dcQDKLS6EVXeVtFoA8KDXKmrch_bv7pQF-a8xxk06DY/s36/16.gif", "(p)");
    emo(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL87X1XAZCox_Y3nFb1XUyfm4ZqzUN2bqoShXue3D5XMeXxBFNMJvR7M-zswXIFzP7uzkskIgWv34xmBT1koXUL2UYttdxC3g7crgCLhG1BTgYFkBP9Qxqenl9hHnxKTlxKJ3ZvYG_Weo/s36/17.gif", ":-s");
    emo(/\s\(m\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF5mpwQJWm6u3RwmZmjEqFYZHfAQYbMzsKEWHlFg6JKo95gbTkrcEur_T0SJSwUwjWZdA9OuoTZpCQ_VtlzlOsp7ZPZiNe4YE5yS8VptN9z28OwmPrOYUE0kFOTvoNKnD2iLpti_J1GZE/s36/18.gif", "(m)");
    emo(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLqwlZWaaqQ32skDG2rZrlopg2J9lawmozc_5AdI4RrRmWzfa-ZL3R1rEPKf20jcS72hveY6Kb6daLUwLRziRLcjmXx-rkEa4-re9LCLDOmfM0kjzM2ANjGeqBI3vccdimo6dlgx4dMJY/s36/19.gif", "8-)");
    emo(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihg5j0u8Y_mbSwyvAig8qwk_RSsvI9GIwyhOb25xIwhhugj-INM9IuzFFHmJBhs0llJkmC3xQwv4arUpomXb3rrBDGxG40pOQruaaNEgsM5z8fPYWh2vYfH-nnvWs9LaZEOgK__gTa3WU/s36/20.gif", ":-t");
    emo(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfd0I1-SLx80IWy71Sp-wnyrKZTXbTL_eTSja_Q0osM3qgPvdaWC4jQ6QLIlMJIAwD2pVoVX3LE2f29AYPxSQwTQ5IHf3sNH2l489whzgN1oGVCyH853Zodm5ntRtqxdkhKt94i8YW7wA/s36/21.gif", ":-b");
    emo(/\sb-\(+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh4IAP2eoG0lKDblzu9K6wjveCP3NX0Zod7OT_SrYXw8AuYEGbJO2lxIxypJ8kddv9s4SlbTfPccXWeuPa-OQyz4C8C8WhBKL0hzl6_8qNkRrW_YY0OSfEj_KKeO2Xfj6vEhYYq6VwZ1g/s35/22.gif", "b-(");
    emo(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDF4l7-WHoGR21CVxnIvVXpMolVBenGeDJUbXmwMFQfpEcpHSkuHfLaRyJ3wwqA2bOmFMdml2e01DtdiLKxR3vnBKWjbtn6ibEMURw2CQdndXx_VLQw_hYN4wfFg-KzyxtdU8duTFVC-Y/s36/23.gif", ":-#");
    emo(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0xsBYGVnWywrJIyvXedvNpnDhjRyTcgBAfgcQ5ho9I8287CElAHXQpdL5vzKX3_StSKgD1CQsIFSIcWkrROXIS3MP2HebT2BrJcbTs1_nV2jbUtg-ZtU4JrH_Pt_WosjrF7wb4qndt1A/s36/24.gif", "=p~");
    emo(/\s\$-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSUhoD4nm8sVu_0gL6MCsMAAKvAsVGqbtpbQa3doh_KVlKKRXVqM7T72R9wsxUtfeGA3-DGokBh2yPmgAqOhxiYz0S_BWRfS2tsKiL68-Ia3iPU3YvTrv0xRGwJWdlr2KBsIYo4RG5bZA/s36/25.gif", "$-)");
    emo(/\s\(b\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzawebPLEoOC-QKLoC6-KKQN0bXP_xZJRIKMZS6fkDOyAs5cTmq7QmeVYxvkr9Qn91cTjkf9w7mnz8eFC8x2kr3ddJDecUSHpIqJ5rJxvCg-BPehYZBvaFFxjplGN7FkW5JNjrFQDBFgs/s36/26.gif", "(b)");
    emo(/\s\(f\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_SVXrQnvBpzz66YARx_y1dNqQsoJsFdau4P7UZXlqS6GjDwqPrKrTq8FYqs_iA6lT46vi2ExzhB7RikPRO6gdzdUAzKmM8fGP6T5eSzA0SSq57qxLRSw8_P0dXKGXe4P55M82TzKD8nQ/s36/27.gif'", "(f)");
    emo(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeI3QX4OVcIs7BIMyMpmCNvQcwD73T7NIQPB06Doi6V54XvNt6dSB_c0WRyGa0E8xCbkdQOXuMaTO5Em1YzbZh8uUxtRVPVlWdDoRmGhEsXwKEhS2gnJg2Uk5f6AlLpdTuJeTw92gRMqA/s36/28.gif", "x-)");
    emo(/\s\(k\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBh0FbeKZDVcFIx_E1srs4tzZiEfcZ5XZRjkkr-sBF17IepcbNNfYWQatfGZdiJT2lyY_EtvU7LFc-5DeWCvtKjHstlodGuu2KKLaPCJElAB1z_Jd9jMV34jXZ7PMoknSX-c0By2q23tg/s36/29.gif", "(k)");
    emo(/\s\(h\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDtMDotxInsjjpEbeW8GFR9Q7xCyCWb-Z-nxZyS9wD5eOI2LolYY0TcF33RYNFBHWl-Szh7W8ULUE7btHzoMR6heUBfSFlCMQcJWS18y8Q9PZWN-ALmF84OYwybMX0KvEarOmMgg6dcnI/s36/30.gif", "(h)");
    emo(/\s\(c\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUIQyHswV2P-LZKLcDnC5hg2TwuIfwQo73QQhh43hXs9UhCbKLtd7NRCrLMGgaKJK209dLe03bNRFKO_aIyEea6Q7hkj1Qv2Ao6YCiL-eGlfrI7krJB3_QexrT3JjO07faoFAm-lCIfos/s36/31.gif", "(c)");
    emo(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTsUnEyEckKyxNFlJ_BR90t6Hr9-tVJ-NUsXxa8HCuOupSQhti8bTNZ_pVzsSwIR6JXcZOaMFW3kzESpGFEjI3PHRUBF5PZlKQLSsWaXmktJHak9f_CC-eWDhsctMwLUt6BFxPW3lIriI/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>

• Pastekan di atas kode </body> tadi, ya.

Sebenarnya sih, udah selesai. Tapi, kalau ingin menampilkan bagian smileysnya menjadi cantik. Ini belum selesai untuk kalian.

Kalian lihat kan, di daerah smileysnya ada border putus-putus? Nah, itu yang kumaksud! Bikin, yuk!

• Cari kode

]]></b:skin>

• Sudah ketemu? Copy kode ini

.emoWrap{ background:#aaa; border: 1px dashed #000; margin:5px; padding:10px;}

• Pastekan kode tersebut di atas kode ]]></b:skin>
• Save!

Classic Templ. / Blogskins

• Cari kode </body>
• Kalo udah ketemu, copy dan pastekan kode smileys yang panjang banget itu di atas kode </body> tadi.
• Terus, cari kode </style>
• Kalo udah ketemu, copy dan pastekan kode 

.emoWrap{ background:#aaa; border: 1px dashed #000; margin:5px; padding:10px;}

• Di atas kode </style> tadi. 
• Save!

Repost? Credit! Oh ya, itu yang blogskins pake caraku sendiri, loh! ^^ Dan itu berhasil! ^^ 

Semoga bermanfaat, yaa! Thanks for the code someone.