Cara Menambahkan Emoticon Pada Dialog Komentar di Blog

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/AVvXsEg82FpWqYS8GSlyRM7wKEex0aIMgG_Xl1uOPlQHbHvmVG-vktV-yLvdnX8wUMoK3g9RyAN4Z_ozI3V7KN4Ny0yCQSKYNT5fWpIa2A7ysCaQc2PxHCZXLszCC1TKGXZJnW7fmTYn3qWVpUc/s36/03.gif", ":))");
    emo(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiunsOrOJzhKm5VKF2mUmynOHXMMSyau2k0UjLvNGOc9Ufof5GaBC4YW6XIcBXtAuzG-TP1-tXgTrJXK6jy7gC_QlU0yy04W_mNq_bCILzzpFss6neLX1ZlR3yEI4MzVfUslbIzlr__4fA/s47/06.gif", ";((");
    emo(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw57nidrDjcMvRf-Egx-GyvxC-A0Wgom_gf7Q4zdP_6ShtIv5vWiWy8xe2n8fq_zCKkP3lzz-9-QA2plVP5cCirV6C4srissd73-ojMpZb4zv7i7_9mS_g22-3SMaMl3OQPM5vknU_atE/s36/01.gif", ":)");
    emo(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFl3EMqdnU_taDL3eHWDk1hEtt6ekJKKCJHjrRj7ulqD1RCyk6Tspc47yZ6XkLErgYPFJFJdpZMZQFGtJqu3jKQQngv_oPmtbhyLoCq-etX0-3bNXKCJSeHMR8QVKW6wybVFQjZGhdzHY/s36/02.gif", ":-)");
    emo(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYgiu4XHI8IPSQ7iz32EI0Y3IypZR7mjSVtdYcLbvKZkfQuYSrXIOomZVQRX6sFCGHcVWJ2ZO42bAKk-6RtegW7Aq5g6K20F7utsF3fNqmB_gkSmuTgudWb4uOz30my2zBdYat2e6R80g/s36/03a.gif", "=))");
    emo(/\s;\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBP5p9PVxWDugr0Yk4r4WQ1h5BpM25QWeDAq4Ojkzu6ncrXbmtVYPbGXYYZFl39xdjR-Geq1malupOlI-ubDJzOJexpnIfMqpkk5UUchHU-XwCAUKO6f_iYD8q5p6xov6tOWjBgWiJWS0/s36/04.gif", ";(");
    emo(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7HZQY0-D0lZI0RBZpwHmg776UKRRysSjnDCID3IWkcVULcSLiGN6J-vj0PbRXhQX0cbwaKOH3_fgEu963u661-mOrJ4v0s_Wbb30xAb-BKYEIaNjv4xEud4ATDnR0htgfaBlOYfuJ13E/s36/05.gif", ";-(");
    emo(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitwYRcgZ0SFkKDLJ31sYy2OA6uhFvwQnhIyxmvr0N4Te41FIQo7pWGVvU8CvIt_k_Dv4zHxmpeRLiK9YqSdyzbygKBA-DkcCV6FOm9Ms12Q-CXdZnMWqUYdhsgLxtaDZzLyAX_8LrpxQc/s36/7.gif", ":d");
    emo(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZuz_3H_2KA18D9PRSaJ7LPZ8gXiGuxlQqGutBksaVhmAX-YFveXembz1wVwJlFI3T1bEbPPir7qX1lQmHsbnaH9dnnxKvvDxnegCcLPQoqQKbp95f6WNbAytSLE3jnfl2SkQVHsSc9Qc/s36/8.gif", ":-d");
    emo(/\s@-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmcZdpFcYY8RIP0i5hIChUxa7mD5-Qkyr-dMtCYx2hRO3uUuUvbdZ4q87UU2rFOWIQnKh6lNo8aYyY90ynGy5DIQdJDnX8Rxh7-W4eAo0mtH4AHo-gRacmLr1frCVe5eGLUkHRVltWoAY/s36/09.gif", "@-)");
    emo(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimlDwlfkeF2Y54sWeYjf_704CxdVRuCk75HHWTMxTKWPkPeDV1ONV9tTv0uiwG7HY-mdaMH3JV8h6Lc8jbQENCCkjSGPx7pA3HJgP9UQvS5ucopFMF4FnvOE9aX1ofPPLcOiwpjoYNiX4/s36/10.gif", ":p");
    emo(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFQcRe_zm_T73wm4W6Ne-Qm2T1QPNxkye2NP5UOWwHjsoSCpbI02QFfJEsx8RkkJ4E_x0NKiGdp2TSETrUTXWNiTHmUyuZIm5IgRRhyphenhyphenvPhytoT0wp-rsv6ydRcOxTdCDqh79_aT0a9MT4/s36/11.gif", ":o");
    emo(/\s:&gt;\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4OShNBsC_bbklEkEo7M-Blpx5cO1qYGxiZuOowEmTRf1jhRUUYCtgCSGKAhR3dF8eo5M8yXrz2eoHujwPDd3tsJywqbMwUW6w4_4qzT_qxHQSwYnve501Ehr1OrxNjFAmwcb5AuHv0ws/s36/12.gif", ":&gt;)");
    emo(/\s\(o\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqwYZpvzLSyY-na8evwdaoLtpEAH0EzShIF5_4IeEaF15L6AgYL4uhV6GdCCeAj76uzMSb6CAblWlans5Yq7pjTLhbiHFGdy1xZymnXcd3BR2Hbivy6O__0QzCJo5oSziTFnwNyHuB3kY/s36/13.gif", "(o)");
    emo(/\s\[-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWenpPvuuhy3cD467h5I7I8pfZk_xojGZXFL9wI-Gku3BjqRzZYcAIZrmBZWYof2Xoc-m9OxitI2oRKPkv1wSkg9FMZgl7bIRv7kH12qpSd6yW_teDrSqVGfkRxPN2pPq9pj2pnkyQRA0/s36/14.gif", "[-(");
    emo(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpo7oPeljVF2JTJ7KrVY6-uXpWiTpGi5WX5b_WBfPvbzMnzf-OVuLyqMTXK6RdxZRyZ_lrJQNxpd5pOUOvdflHdASe5LIoKvqt9wvbzLGXrkRpO7tBEfzSdkmnS38AhCfFJrYunp1LXDk/s36/15.gif", ":-?");
    emo(/\s\(p\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsT0N-cSz7cTWus7p-64oyh_wRqnZNODkmm8lN9SKWBiSU6nt2Qub5EIGvJJ5vvgNChv3aElRBeE69a38xCo6txoo7sv_CynOo25uFhrHD36aQ5FNLpijEF4IJme1um5YOG41mdqtrqUc/s36/16.gif", "(p)");
    emo(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0sEvCD0YHCGc7e_kUW9CWnk8CAql0r0uXs19nzs9l7EgRpTSRvtbtyhXldRhoMzmp4xX1hFKQ7f7wgqetMqn1EcFrv67VCjsuiLG8dp3nJL1n9Y6XWNU8KZLGeDdAw5qcPLu4ldcGuCs/s36/17.gif", ":-s");
    emo(/\s\(m\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ-QTwp9RoGhIPkYO30VTdfdMtTGG-QB3pHtZrX05L9Y8Fs8kvmJ02imZMkS6dYpEiXa_3zpNbUWzUf1OduN8VrlDN1oL5CVx_Mwd-BFZUoPnPdeUjKJ0xbnJ-80ZxzWmjiYibYaXebZs/s36/18.gif", "(m)");
    emo(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpo_pjB65HIGVGLfj_1UislKOhbUmVCgCaAnZ4epYfkqIwDsTbJlsSx73X5nA7ScmtDOmQeTxBsYWOPbDiFusPsri6eD8qEY2CDrZMCFo7oLN6i9rGx5AnurkTrnCNx5YJ49N_ZMxme-0/s36/19.gif", "8-)");
    emo(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7UEaZRFoCLT1aytYD5Ag5BXKQtKv2LqZHQLTEuMjgehzUIlU2hgkFsurCIORi_zEFoNcl262Pp6ECZdgKvga0cvIjrgSHl3gQjae1mMz4W2Ioh6xk12MQuZ24eu8ukYexeNrGRINuYgU/s36/20.gif", ":-t");
    emo(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkhJ7WPWBExuwRQMVWQQBuP9IASZifQcwF_8T5JuYTdZdwZv3_13kB4G8ReV5fMsbXRldkCD-DXUyWkXWsN-0pZzYXgS4BRlzGWB5Zh4kP0CfrHKuk3H7XJ5PaqP2p1PNEWMdRQ_VLezc/s36/21.gif", ":-b");
    emo(/\sb-\(+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZqEa01cCEBg86u3NKj-sboAeSDscw74u1SL19Pkib3YRd6XFmAYaafMKO7mGp3v2mbdQ9hKeLDCwOUwe5ejauMBfQEQiuDHs8jbZVHefrVuEBqmCuGzfwR12uPiYN0gBLEUTghOhEX8Y/s35/22.gif", "b-(");
    emo(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3AltUTx3DZoNbrpLQFLqniBlshBCBG6XBOmnRGc28VDAXm3W17llnQMiiTpIp4R1ix-ZeaXgAh845-ym_o2vVNqh4KdMUQKUHYDmRB0ExOs8VyXBxj6KeIJ8Pgvd8jLV2003mxMmRS9o/s36/23.gif", ":-#");
    emo(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifSXr7Axf4WyyOVTspMPs63gal3FPJHMYmsvSp-HlyOl96_sp1nFFncUF3_P0k3EL5EcsFod2t1672EcTwIpIcroDRT7T5LKQ9JrS1wLl6PG387aRrEiYPXHTbEUjSDcdCrzrvAZRLwlw/s36/24.gif", "=p~");
    emo(/\s\$-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlehaj6iKp4iH4gMMRLd-sUm2QI7pAQIaVrDk06QiFphBJEuw68eF0bQAxMF-Enb0hm6o_EsWMksQGlES4Jw40JqaKzWcaCKULJfyFaMT6XYZy9D8icmuhK22fASvtzxkImGQhl3mCxPY/s36/25.gif", "$-)");
    emo(/\s\(b\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZGhoalAsdOtRdTx21wCYU-q2wUys_Vz9F9mg2ythctO9mrggw2N3Zv34R70nVISKtXZT5Yfi-rXoCFs55aZNQd8PyRF63TBBV-yZtjfJ1vfpJYzmkLVPc9PNzSkL9lafPLQr8_9UGoY8/s36/26.gif", "(b)");
    emo(/\s\(f\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0IMle0Y_G5asrzwdpU97tbtTvQFWPBkw8uha2Le5EUdZ78aY4v8D6TzxO0kxiZo11qI01HIMo4g7dD2wa3i5hom1Bq7-Tw0ZaquCe_nudz7oKJfPzFzbD4rXm2OOPvMpYx5xWMCCn5wE/s36/27.gif'", "(f)");
    emo(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKhGssrb0hBZve7xkb-IPmOTyF7YYuihjYr_V3ZlB_szm1ptQfaprryxaWeiIImLdPOhNNl_6i2O9l5Gvn5ZVv2x7OD7h2uTPshYnm9Gu-WgLoJo7-JYgkZmkH6GtY6Eepo8Cs8JooOA8/s36/28.gif", "x-)");
    emo(/\s\(k\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2lH4yjd1BfkU9vJeBE_XlWLTv6UTxAkUWaWLukbte5dwi7fugDE01sXpogxXxriTm9tjrmuMisdb-2qAihO-r9AzKmfjtRArdTjTiqQwxgpnGJw7SEOLGeje3e-Y3SWy2kLsLY0J35J4/s36/29.gif", "(k)");
    emo(/\s\(h\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0us3GzczV3zpsq5n1xug9nFrygnn_V_1Z-2anBVwoAaRUqGK9K70c0tcnD1Yo6aoAqF2Ji0WlUwO2WOhfGKryxFvY6iSDMUSP6uJoxv1nv7FrpTePTLL7v3aKUluc4dDF16-Ojffe2LA/s36/30.gif", "(h)");
    emo(/\s\(c\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZRfHCAgXaqiUI78N5G7OfLArI9ZUIDibl5jWLR9ev-cySoenjzWmR0CegP20nlJjdWShwrjx_24J-WbahqC1hQSlUgo2d_smL2jfcjoVjzlQnsglidtQ5EJ2o8kHHcHyg3qKNTEe8Kws/s36/31.gif", "(c)");
    emo(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-fZsXVqQdAKzoLlvqu607p3WqiUuS2S0ZoMnJJL6P-eGbOtlpaooPItIcfSVxg_cR5cafVFvKMy1Vi5nb8SvSZ4D4L_JfZ8qQ-prdriIgcLuMF5T-Vst2_BKQnJDuCMzeLh9bgo04UYc/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...

Tweet