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/AVvXsEh5rx28eGKwgNi87tmFkr1SOGGdqaN7HOi2z1-AAPaUuWaHaCQuLBGo_fmk6cn3litx5A0G_lc5Nsc6ozDhSXrLOCFckBwOm4wrddtmsYjk2XtDYPn1dcHX5oIElS0HeH97iP-CuQwxhYw/s36/03.gif", ":))");
    emo(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimLRPxTxCGAHaUs1d4cgcIwqNL69Uya4cZEttv0r8uYmfEOEIliUaqQa84eiiMpOku6tQhjGUjhxMncRUK6C38THzx9EvtnDx7YOHmCoVlVn-Youxm1ppDZNzg0btnQBDeND-EmGUNQNI/s47/06.gif", ";((");
    emo(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiS-hKFBX_GWW_QIU1isq-dFtDa5HpVensOpYDsG_PliNkkbEF_wsPGlO6JeW7NIsu4sg4Klr0sTy96k1D-iPInDVZsrZrqdbI6z7hGLzSHzJDGa1wUtva2I9sIzQGXWaQBZuf1WkFFaw/s36/01.gif", ":)");
    emo(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie9nOJ5kGX2_WbrnvBnmSdhgB3S_3qRJb4IOAj6-YfLxClXOvmxqWedDMXIynmz9lCcrac6LT0CfroryVbgq_avYlLrvloz2EqWYU-5CSwS4u0gqGddfhj00HJAMD8_hk-9sXfA8WL_qs/s36/02.gif", ":-)");
    emo(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZhHPyZsNjGyBOYiI4Ho0oGY5-Iy_QTqZSMusUgD-rnaJleW-0AbQLYDXDEzEVBsAq-KN7rddFg_PLB8wglspK_np36DUw7-e7Iy_ZPeJG0CriBVbKBAV7KbEbhmz-OR0wfM7Qvyd8nd8/s36/03a.gif", "=))");
    emo(/\s;\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTCbfli_KS_Nil4uJw6-sVJihf2Fe_AePLUQk0kIIIGxkRsVu7TzTggbpP6t4SGrH16xdYPHFh6YYncxRVR7VUiYj6yvTBytCF0xL4BpvNYViKWl2RVY5Vutllryv1MDObMCSUAS7NgY8/s36/04.gif", ";(");
    emo(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvGoodlRn2Ppom3R626ehQl2FES5MC3pxKp57t5OUo4YwdTPFXX3Wmc2yqKiYDw5ECZZPe2EPxZSQ5b7s8_ssdRdDpiAbqwaOIbmh6X8qtJvJrtctGOG68KIa3U4nxh96JrlySnr4bE0s/s36/05.gif", ";-(");
    emo(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBxv60rAxjGeNjuwG4Nw1RQ0ByqrGlOG-h_1KF-q9BokhaxKDAZhtumKaIwIvNDIjbAnOh6m900X9shjfgq5eLL0tV5Ar10LnD1WP7b5eOdM9f8HL8WYgCI2b6BqQEPABdHy-AjTKeKxA/s36/7.gif", ":d");
    emo(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHV0JeZYS3t99ydeN5d8KFyTF9jLBVKLtMLmYCX2kW2kv5kj-M3-Tv5M7fGBW4DSopU9qa9VJAw_Os0DXRbNRDmBHHOotZA0fU0vh_cSokd0HIK2crzqoxKdHIRckpsTlR6kYYThuFyqY/s36/8.gif", ":-d");
    emo(/\s@-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPPt3WpsQEVf6GIAXAXW6FSgGsTz2kT8d2jEsJgoc5M38CPVnLKMAGgklXwmjmsa7yy8o2_jMzCp7pgl0Biu2JNfYBzED8Zx_fxVowWrVHPSWzNJCXoFJ47oeyKF_BlyiI63xN-bHqojc/s36/09.gif", "@-)");
    emo(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxsRs_HwMVf61eljGXvdM-YbLTU0OrK6cfbXVFTHioTg1Sl5WqbsqVS_7zuRK-nfJ6tpu0wzYeKpTu41gW7SanGrcKJRXPMVfDZiaSo860JKVTXJhIwx3G140AyBNJxtCF3qltoYt0xRw/s36/10.gif", ":p");
    emo(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeOwCIzuQOih-JrkfHsgycfbzSU65olJ9Q52jlePCqZ6x-lIpkRRNzhcNoWEFpgRUQxjk-nRC6dq331Z1DoRfLDCIFp6ZaPK0GKAjBzXKZSpV2We6jsSleiobSIz0eLWWtsEnM5p7GGE8/s36/11.gif", ":o");
    emo(/\s:&gt;\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnh0p2mtuJAopDhsE-VBBraRzKBUIzbMbLq3-r1NwDMqGCYmFIxX6NVmUvWcI1gThnC1Q-xGYSbyjcAInMjl-3SxyeVMwCB8RUs_tgq9DCaeZ8ERSpkQ4B9YWWs9KwTA0tKlmeeY9Ibw8/s36/12.gif", ":&gt;)");
    emo(/\s\(o\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxX3jIAduaK-rqtZasMkuWpuvuG8pcjt2ZjQfcmhLT7qH6ZaqTtv9i4jb6IfITO8MTWLtl4cLih0fAG0xeGWrV-opE2gKNBkwWVpCTE5oa0nGsprfc83HYuR5ON3q5ak8FvnEJhGGmEeo/s36/13.gif", "(o)");
    emo(/\s\[-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxDdBeVDj-Vx11Ka3N4Ri2Iwifl-FL5GZZfZ-uE2Rlr6iYyuOh3G2KczbzNEW7Kdg85s_fcahWoTsgEqT4_FdAsVKrl7mErVmsS16-zKPNahXLkLXlWM4FfyoYUURD4WCJUoctco58kIk/s36/14.gif", "[-(");
    emo(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHwELAAbGDw3XjRS-H-KSRzQb15exBzbhx8YLM0H_-RddXKU76rGqHI8v3c-512eW5h4HGuy5-enqrUD3GRuBuWtIBkmQugBY9Id3pZN62tXvdENA3dtGxA34XH2dk593L_iXLNsq8d0Q/s36/15.gif", ":-?");
    emo(/\s\(p\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuxjf-wsKdOIgLAoRkAwb5s7veXfrngAIlWFn2c6FI-xncsBr7jN3JS31G08I6eHkNuKCS4au2PgGpbnChB_lMIHyV_qrhe8onInCnrCqtw5wRhOtNzVJ83IUI4Ubvaa9T8OAHKqKcnKM/s36/16.gif", "(p)");
    emo(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuQ9FMafF2wHfI4mPToLYWt40Z09BsyJy90NVeG4jMJMGV2_JojONqwfaMnryN1H4nC_nG8F5WAitHJ4QlhevLKIezPrLJbs743GaggnPig9Uc3RpIVcHiCnX_j53mrWuBSvUW_05FaIQ/s36/17.gif", ":-s");
    emo(/\s\(m\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU4wros145N9YQGqNf8DKXeSiYU8l1CZ-lKALwhg7sgMO8D_mf_zEzfJch0As_Xsz6OxtHnyZ_k_sBu5HC9sesJboqHpe09UWmii7_pcwILM4OsJ7oaL6Zz-X573se6lJvHLyQz9DUkkU/s36/18.gif", "(m)");
    emo(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4cVOXYOCgGR_7E7RH2nyBKg-2pMS8EKtvER8IBbGmf5wlupz8wIMUUiVBAWFJCS68MvXO_zuniDL5N7NHGx_wxoXa1gief6C4YtGVfI8O98kOJ4LqmhnRQosGk2U5EEHp3mBcsDtEioY/s36/19.gif", "8-)");
    emo(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSkZP-8kmM4_b1A0cc5sjvFYdMol0sRnZGnL-Zi87bIqJuMcZ8Sf9OoNBwbn4gRSy3qRjB6XkST3-YnBwpCVKyq_eqqHbhmcfllmZIpT366AC6T2PExNovBPX0EaBe6HkQjvAihiMC2RI/s36/20.gif", ":-t");
    emo(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyi0Re-BVGTwYUsWZf6Fg5zl0w5sIi-Tz3x7LF4LAifoAP6UGsw__GUb4kA5UOFwNLwWf726U1KxDAdgjEUXQ5kmj_0RbapUAv4otGXE7TapMS9gnZ_lg4C9URseqTEcxsqGUZ4mbCSxs/s36/21.gif", ":-b");
    emo(/\sb-\(+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifeUCYDwhyphenhyphennN_B8co89yR2QF7_dGNQnOHGLZahi6yvcFjvG2ZJ5UtsOams5RbxuhyHTGN_5gYmezoH_vBvuIrEdjkJ4aOiZi6p2bCp9q8N3gvb9VyooarV0zEpIGb87K1MuQ72bdohmQU/s35/22.gif", "b-(");
    emo(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkb2a74GtXCmbs6D-vXtTdJxcNIUs57sLIJleIla1bZEkiycPhUJ1EhR8O0iJS5esXgADroWI8vJxRu6RdWLgeSTTz6LvPJ2rBzjdvdxWuQIjZVZmQwyAVseaNw-IwK22bB3aTyYJOj5E/s36/23.gif", ":-#");
    emo(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAFP1pwSo3QCJzWQWikRbB5WUEB4kkS7RX4sgnFZf9ecPOGbcF0qU88JhMWYE4wpqjbp5KAooUK-BXfRvI4OpzMTNZAXt-i82iH2_9c5J-pEqAsplfBs6rbRXRzhri0Zhr4cFEFKgTIQ0/s36/24.gif", "=p~");
    emo(/\s\$-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4ikc5ucu9tNTx3MdfLl7YvPoC7-qI8RBYt1jtVEpMRDOBphIMITI1e-MV85UVGQB3IXchaQaV3f0QRUDd4DLXo0uFA5l0CFR2heFINWqhWJ4acoPNlgLzvZ0h6pyKdJA8Fpwl0cCXJ8s/s36/25.gif", "$-)");
    emo(/\s\(b\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtzjsMCoOHyFoXSu_wrn5yFt4PslEA0puMcIy5M550dIuAyHwZFNQYO6KeUvSkIidiPHZMhDRMg8_z9s8xsuYcQNcA0KMqjHUTetnFrnZI9ONuY1oSzaC8UyJ7M8FTptID7_HBnwVN9Dw/s36/26.gif", "(b)");
    emo(/\s\(f\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhUz0QyIF2qpzpZltR-dmcQ2NJ8Ej2Ai3wuTB-_25SRszsDt4ww8viDbhz4T8CL_K9KBWp6qfr3r9rQ4D4TGzGXV9YIDQJGhmH-0QidgopEBeBJA-yyhrftppHijyHtunBcmUHeEzZKXk/s36/27.gif'", "(f)");
    emo(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih_6-lcvNW_S6g-94JwALZUrSkg-W5KKBzcEOrE-LPnty6LC4s756co9ATEjvNVPElgVb5petZ9-RiUHJb3zFrRyRZ4PjZidHDZ94HX-3KKLywt-EgClgEPB57qrgRBeExgxlu9FnFEPI/s36/28.gif", "x-)");
    emo(/\s\(k\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiczfGwBe8CG1ccgE2nXfYInL91ewgV_gLFbq_5M6IJGXKOW12b5-F_W8Zw0GIB8kX7C4kBvEHReezdfAR7C7di27EMsI3tCYCvXIgqtGuoG4RpKRU-wnQqx2TAwUJVyfbTDNEfwDDisEk/s36/29.gif", "(k)");
    emo(/\s\(h\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheA6LLQTstj538kpKn_vlVxlSHcaaaytwA-gi0Oog4OrsBvRjxnwrH3QEcgEZYDcVkNV_LT7BIbumd5L_I04IhKpNUzB-iHhbMnuajaNohJCaBbh0R18F39071oG1bFDS5-bFWSJSuWNc/s36/30.gif", "(h)");
    emo(/\s\(c\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc4kh4Az0xmOEzRy7N0rRiO_zl1pNuo7fdJ5TAOzan1yRQ7zPzFFRqexffh3qrxeukX3i4VAXqSwUUed8chtBmhIjpwP56GoVzQpNfQc8Sihra7MlVWIx6AtLcXC0SJyRexy9XnAyywcE/s36/31.gif", "(c)");
    emo(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha_MFHQT48jrSvyReMKgDbggFYk3cQAxn2TO6yQnIkWnvx1d1WgC120FCPVja6Pdy0K3Dw3ZHyf32WUsWgQ0l14yCser3-5cNQi24RaDIOOmf4jaCBHrHtq9l-Bz0Nj_yDhtfRqSaQF34/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...

Post a Comment