Selamat Pagi Brad and Sist.. Mau Share Lagi Neh.. Yaitu
Cara Menambahkan Emoticon Pada Dialog Komentar di Blog.. Tentunya ini akan menambahkan kesan Ramai dan seru di blog teman - teman semua.. Biar komentar kita bisa terlihat Hidup tentunya..

Langsung aja Kita lihat Screen Shootnya..


Nah Itu..
Kita Lansung aja Bagaimana kita menambahkan Widget Unik ini..

Caranya :

1. Masuk Ke Dashboard blog sobat
2. Masuk ke Template
3. Edit Html
4. Cari Kode Berikut </body> biar lebih mudah pakai ctrl+f
5. Kemudian letakkan code berikut tepat di atas Kode </body>  tadi

<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/AVvXsEh8ZqI0zFzw935jWOzeeVYDhmA-6Vbnls4H9KA1iZzjjhlo0hRtgltew1Q2Xfs7oqbGJ5VuiaJMhxzXSrN87excwtU5jUZjlWm41sNkw61hNKUh5xv7QA3AVKLBjV5pjqZhBOS_zfNLhuo/s36/03.gif", ":))");
    emo(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiidR8snMbVG4BT1GWntRA-S_775Vh_t8ygjESObKjfAtfsrQJ5ltK1X0cYcIR6S_zCrz18ucTUsMaIa2g94jd7piK0IzWlK12PImiaygvGK4yLMXRoLuAXHtEH6VGq8yudYJMJRMptxBc/s47/06.gif", ";((");
    emo(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJZUuZl34VELpyyqnYZQHSxv0wdlZM8zu7IVO-zymZKElQAv6wYSib6DZvKhbmuL3kGvfXo28j4GeBwWBEoRDOw22K0opfB9qps_G9FQmkKXqJi5eTY5Pb0hZXGk_0AG8Mshznq43M_Rw/s36/01.gif", ":)");
    emo(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk7LOjLKIPOB1ovx_lWebst1UyRR7VKypJWSHzEYVLYJ4Njl3oRKOpbOT2ktWnKqwRrmaDOZvNjdTWMj1r_3e1xeWzbx0S4HI_n1pIjCCBNCAOMHnqyXJn1c4pDp1WPYpvC04SlxxkNqY/s36/02.gif", ":-)");
    emo(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj38EYTyADaMum8Q7yOeD0KiR2NAnNxT5wWSLhcNOzX_mL2sl126EltxlbSvkJsiLbRE8YQvbjGaFApqLJnylLr3rGc7wQ30J_IVu9MLNkQgN1xE8ONAdontJyQ3kGgaaLxJceOmUrAlXo/s36/03a.gif", "=))");
    emo(/\s;\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjue1k4-IyL9rVW1YG1anzmARqKkRrPUQSYJ1tf6zJdS4C700KxYx1WDuATZB3TnH6fwtjur5L3yJr3qrK6F8byLv8JeptvANsmtNSeFnKV5Gf4wq9DoR-C4sG53T1XmPjHIVcxEX4ZJdE/s36/04.gif", ";(");
    emo(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgxftOnw3Yp_jzWCuvloyOoSL9L18gMocFi7KbXoRHy66XfNZac2q1Xtwb3UD6s-jhpFHIxYwIPis0JRk70N2JWS1QGU6Ds3R15eBq8XCKonCY8692WRC7_Ehfn75ey1ZIF9Qg-ybxtxw/s36/05.gif", ";-(");
    emo(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmJJMpuQBF8LgscWXfEaxIRimNDsmVh3xLyIUnyomK0Il0TKZQ2yDQUpaf7ZM3omb8-EOtVqfX7c5WbRznKdOSEMpRkiE1xPHtwIQgaL-kdec26uQKxM9kPCRVZ0vGgeP_G7kfJs3A8AE/s36/7.gif", ":d");
    emo(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpcjDZC-NtP3E5syt1_H5VOVtbkXd3H4-P3FvHPxYg47PAcYZslXtiETiFFKlmcP8X31moWn3gBEdqLxU7VU_SfSk4YDsuNS892MVI7hoGZ48r_kegKm9Pv5nQZzqTomTkA_bC-Gq0TN8/s36/8.gif", ":-d");
    emo(/\s@-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjicH2-f7lY2nufkRvibR7wbWHKxpgzfK8nlk0IGvCb9rlAtlHEvVKyLX9sNqvjMX5NgxqQoqrKV9_Io4XBDSdQSNoIw211EHL5QA_4OyoSbAucnitogH3FCiecTI4y-DYeExCOweYFXM/s36/09.gif", "@-)");
    emo(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSI4kseBS7AaqpMtIoJrMIlghdQpzauaiqJjgrjMWl7q7WesIan1bgmtL8q9vocpbgmBM21-QXOWYQqP6eUTtNwkNAxgvNmGjk-CeQQnhAuM7KfRMYUEgou5N65ISZNzmi7YRVmcpOLNA/s36/10.gif", ":p");
    emo(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg394DjfZ2mcgzspISv9xfkNiJGYTCQSdGqaobc1wugFtcNieqhV4rMbI2etYciYN28VyHVxqZL0bALQoBdTmhmAkNZzmPBmALS5IrzIRT8P9rR2R1ppqgTjMC2SpesHgkHYg8pGtLBhXU/s36/11.gif", ":o");
    emo(/\s:&gt;\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsGzX2sOSc1PTJnboOx4BG97TDS7w72au4m-a8ie2ztPOZnW3t_JXU0iSmNHxFKCxYLfOAYlRV77jdNns_ZZ-TApu2BAn0Vvx4O91JUDhzHDmQajf7nVCxzMMzE-FIKmkrV-Bb2vZfU3I/s36/12.gif", ":&gt;)");
    emo(/\s\(o\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi46GVcl_2oXPyFQGouB65L8c34s9MTwqQPKZnU09liPLZaAkm22p41c8-Epn9QseUSR4mQvm_IO657zJj6-mGqi2nD65zZlcxC0K13gR9bmi1XE4piqziKYOYD-UF7ExqCHDWejZksQw4/s36/13.gif", "(o)");
    emo(/\s\[-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJH69WkEuqDlKtPq7t90QunRag58GQ_skHK_McNs045PrkAkgKOYJQY3m4k3FvH818FfZmSvEq55HgnlUsEMoIsJ7tnNLACZfAm6pRwigTIirwcttCigCGEWTWF7sj_gbx7NdbqCsedQc/s36/14.gif", "[-(");
    emo(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_HgSfRkzoU4mox5N-EZlUVe2TEYL5ghWiIdkcAZ7YAMamTLRIIPb_yNXN3_YMFVd9olxXBEYZ483iJY97ZrLFUowOMxGPHWVhmjf9VyVXSgb-fK5nVyL-v-2PnRWqUHtnLa4sG212kDc/s36/15.gif", ":-?");
    emo(/\s\(p\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-5e-B4nEf8YZ7pychBlM1Z8OZ5qIzRalGZ2PT_P0TVrQsP5L2J-Md72Ns8bhcZuRaYFVIjqeHjBhIoVISm6A3KT3r4X3Z8lefrUa8BAiHBrLJ8s6cB33o9pkZpEvRBffWEId7ti3ZoXs/s36/16.gif", "(p)");
    emo(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPnqKo55m9pzEP4X9btKKERYQcAbo7vA61e4yy8898yatv3D3H64VZhDH1vlMqDPnPxN2D7YuEN_4ExreMsRAQGAonTIZ3AxKo3BZ-70i2VWZIyiJKiE01DHnyl3W5HzVQJuxfijMcxh0/s36/17.gif", ":-s");
    emo(/\s\(m\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp1guJwdLFX2ZY829GUVEJH4wKJyT474M19BTy9bcYk5gRjUVUjnAmbqB7gKqs_Fh_ENA6FnTDPnF2bWWqdnD9p8TspGJmLvvZEnsY4PeXeMN55BFqFlL6kWjJysB94VGfkcrWLIzjFuw/s36/18.gif", "(m)");
    emo(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx1mu-OpL8s-xPpYtqMJeSgO-n8zzIvMe7htr-B1kvw22_KNipEpbmtiaq9jBXTR7BzeO4ksfU9s7gsxCRA24DJZ1OoPByCx87ZJ80h8F5J9W4yHiG0JzePpGz5k_7vUsiGgSpeDowGvw/s36/19.gif", "8-)");
    emo(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghiajU6_Af83uGGPyGP6PD9J5Q_dT159uIVsrvTmbYKavGeoeEjwct_wh5C54wfnMMFVmdjn5UsXH3qPuB9XHqVQXiVLUYBXqFRK2Uv2GGYXRhQyRJIq49ewh3aFeMp8mf1m9YywYa6wM/s36/20.gif", ":-t");
    emo(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhk3JrETA1TCfYuqYu8qcjXZ_sa3_uVINIMpxUObK251_thMJSypWCMO9saL0TKeFgpi6FnQ57UbbHiK_PspBpnU3W0YydDeRBpeiyCZ0Q-WapuLDG5dAIv1tEa6Ip3rf2Gq1WuAWJk5U/s36/21.gif", ":-b");
    emo(/\sb-\(+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhURtybrOziupcimRD_DoltVWHhkzMatVJfqgG9AjLTLBOIn__Zhvk3IepK0M1JN7NjINEhoGYAV2T7aYB0VtY5M0BA73C1JbBQKrDZ08ZYyB57ldY5ZV6pc6s7fDKcHXo8B2U1dch8Kis/s35/22.gif", "b-(");
    emo(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHzzr4DtHyephrEmMNR0DyKqba3zyN_pcvgljXcke3vAfOq6j6jlTV18NRNif-9E7Lw5tI1h-hirvblZfG_HgvPW1cAgouHBJBz6KMfn6SAWmzXEFxU0tRHVudeGjdsmmcVmT0jEwmK7s/s36/23.gif", ":-#");
    emo(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1tLWtSTQOKsN3uTf2Hv8tDWYPpumRuOzdsr03CMKl-8v-N9Nhqrh8eqAdmvpVtyoIaTGio4dWySwZX3Slnz3kOSNdW85PXh84e8EBdJziWYg6YWMQdLhncSlNNNbHjJ8W1a0ob-2Ag7w/s36/24.gif", "=p~");
    emo(/\s\$-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWzoJzHDBbrvksyRDRSAh4AcAXV7pI_s7qt_Q0wx7yLVVhqlM4FmgqEQDlvnpxh9ICgBkAdYn7EE3RkgfT4Rb62ulV5fGgyxD0lO3q770kRxgiiAwmbhO6TqUXIIc2IKimvmQWrFBfDB0/s36/25.gif", "$-)");
    emo(/\s\(b\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnKDuG2RrOh9G2sF8gcCnDi5YVvnyE_ZvyxIWE86FKmKZcPotehKGtCjO5H2jH6DDTaYavCSRHlqQkX8JeI1_QwCZ707LnD5dmK52Jy77eqp1Jz5jX6Ex4ciKQOAek_MYvJLzZsQ-T9U8/s36/26.gif", "(b)");
    emo(/\s\(f\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlslgXekYCi3r1jmg60-XDwXp7_XZwgJQUVO5pvmZmhD6JPkajzXKgPqW1I5l7Zyoin5MMu_UgYOxJdfF1ohiVXntjlmmYSYu-Q2ZUyxMlWsWDQt8CfR3HR7SY5qAp2QdIzHNExU_Z25U/s36/27.gif'", "(f)");
    emo(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiafhK15U1eGAVZZW1nZumIqbMTQ07jwrpzysrwTwwRcDpRUs6X8y4GZ9MP2b6wpqDdKu4rfxd_Cp6GOCzH0NOBh_I_sjNlpoBS9moRK2LtaVcio_4jZvfAVi2AUAfaYzuMdZ0IVqthXuQ/s36/28.gif", "x-)");
    emo(/\s\(k\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhga98T1taDI3DOGy10gj1iTCvYTMRxm-YzrWXNh_1ZfIsb2xkB_tSTecvEugkoSRB5TedMMFcULkPNy43KV43BeYBqxnr36NgKGRbEOSgZ4-GYPwxLYnRVo61JLsaKV2wSoSOFp_VluC8/s36/29.gif", "(k)");
    emo(/\s\(h\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3vZjlYxfp1MbbUfDuDCCV2JEpK2guUynBJIcbqggmI8Vf51kbKEo3tAs7wYtjILc3PpSMMU5EyeXY6QNDI7ph_zPN-RQVy8zIbXm-MjHosBwdI_qWdyiZmprJiD38HpouBUbOLE5eAgY/s36/30.gif", "(h)");
    emo(/\s\(c\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwM9edZlP7UEKWPvox3jq8AYAHzBaVEuhfvtcP72wOqeaYhvowJ8LmWVn5UoYLwtwSwZE3vSmQdavPKaiPFDQXknVrajehMOe-D1wmSPZVkBZDhozhuIBuUO2rI5JPLkoWKqJdHxaOlz8/s36/31.gif", "(c)");
    emo(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiboecLqaR2rBICR0HOuBdnPBELkzrI_8-pTIT0pYqhrWRpIqGxS6HGvMI4S7jvmtr5lkZz11naGn2AH4xjfzmj9fauoA7fqr4XgSu5L0Gssp2D6r5L9y_zxZDfXoLK8_HEG9Y6CesxdxU/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. Kemudian sobat cari code ]]></b:skin> dan letakkan code berikut ini di atasnya

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


7. Klik Simpan Template
8. Selesei >> Reload blog sobat untuk memastikan upaya tadi sudah berhasil apa belum..

Selamat Mencoba..
Jangan Lupa Komentar Yah...


1 Komentar

Posting Komentar

loading...