Cara Memasang Emoticons keren pada Blogs

Agar tampilan komentar pada bagian bawah posting blog Anda jadi lebih menarik, mungkin Anda perlu mencoba menambahkan emoticons dalam komentar. Diharapkan dengan penambahan fitur emoticons dalam komentar blog Anda pengunjung akan lebih semangat lagi berkomentar pada posting blog Anda.

                                                                

Gambar diatas merupakan contoh  emoticons pada komentar blog,atau anda bisa lihat di kotak komentar blog saya!

Bagi sobat yang tertarik untuk memasang maupun mengganti emotion di blognya maka saya jamin deh blog sobat akan tambah lebih keren tentunya semakin seo.

Cara Memasang Emoticons pada Komentar Blog

1. Login ke akun blogger sobat
2. Pada Dashboard pilih Template » Edit HTML
3. Cari kode </body> kemudian letakkan code berikut tepat di atasnya

<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/AVvXsEiCp20hMey0_uW2KbXV-Iw6h8Bbo1pqP017bK9OQZ6_JqPqjWCI_ZtctFNglfhi-jOQL1_6wSIso8ycsKDgsnG1OR4IhE8HGo49PJv7TRrzKprItqgB_pBZlxS3K_WqzsVPKR7hTOUd_zE/s36/03.gif", ":))");
    emo(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFj-560mel8jqYqPbnu2xsenK3TLsNEmeHxnUCvyijJFpw7CKySANRzDDugWSvyQaXfRYYbI-9v-WAv6mx3gaKZRnz0KV_OFOb6SFE2LHcjRCFO6rmHkaMtMOT0rEBV1_V_ou1KLUd9yw/s47/06.gif", ";((");
    emo(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidAKXKUkpKCipKlEhO_jD1q9QKnSQG_OvCd2GQVZxuzAmJtU-n14kH9Xu88yhxSSTXuRIqeIzZwMx4M7cUJGv3aML6H-3uK6aQpjM7Anzcz1FkGzhuQtZc_3nnd9ns1sLPunmVRMYrdgo/s36/01.gif", ":)");
    emo(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0sCBRHXrOwXS0Jw0HEfxMVIl-NBrYQIbGawiEYqzASEMJwIGss_whil2TQCkFyCu_HvCq1cLrwQRFc9RrRYhak3OkEhUQotKYP6MWh6K8zNJ0cpPAb1HpEkTt4aXQ8XR-DnjC5GtdGnI/s36/02.gif", ":-)");
    emo(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMwVygy8-E9jZ-Bu8RckFUw1H9Xh1Jd6dc_Ot7ns25FUwra8B_UZvvOoux13WMpn82MZhTajXodUWv3mbucjX9LE86zhd351bHaHSib2MhR08TihI7zcMT7y7ec-FIcuLD8RZgejXZvRU/s36/03a.gif", "=))");
    emo(/\s;\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGoT1TzBxP88PaTbzYzMSUOuT26sErgoqzO34-NNESu64NXkPZifl2TZmMbWhLlEG3d12lmJpAL_sEli5RHrygLqmaUXnwTelJHm35pJaa60LK5q4JTi2UwOY5EuL-yncYbVQ30JbIcsI/s36/04.gif", ";(");
    emo(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLRvoyJU22N4fc6BZllBD0oFz2FgvO3M0MQe5HTBH7dIwrHJpLbpiZ_3O7QHNMT1-Dq__3Ijkj2vW_NLiv_4hNWXnQmJDlvSYiYZ6yk9JUna94BpXCnnXrl49NjThnJS4xSmrPSayEOOI/s36/05.gif", ";-(");
    emo(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8cWfmS977usjvHHuqxrpKFrat5PCy5S9NURfVVsg0GdQ0unK81ov28KLgUhDOEncU0MynWnDUtTq7GUuVbQ75FVphKGDGQAZjk89cJlleObjI9NdhgwwIAyGP_qVdf20bDJ7Jk2LYMik/s36/7.gif", ":d");
    emo(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTNii1zromGZl_BJBJq5ReSll62AZsukFDxx_xgxNn7n3DWwAoQBt18vNqCC66K95SUCZzJbwcrKmT3E0xoqLZPXCDtv_lV_W9L1C2IkFRerRF_NOAnQfJbPH_eoBE5hyphenhyphentbb0AAIDU5TE/s36/8.gif", ":-d");
    emo(/\s@-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOWlWWvJGmoLGOKx7AprOjXzBb9IP2l06GRynlrTk9Y9tUmuJRc8EOxfFEzwFakZ8xF8IA5XA77BfOsZxu86-3w_JbR2hw_pQP-ISFdOGyxHPniRxTQh5t8vZYknb6u6CGilZaWuVGX_4/s36/09.gif", "@-)");
    emo(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtG27thr9VA0VqgKGIR1Q2BHwCBd7brap99nXp79G3XtrfEh0BHqf33G1oFibxlTed5bUxxKeFYaFdf8Sw_cWZ-PGU3mrjuRnJPCqEdVLGEpz2Zy2D_axztLRkfE5b_2kyBYPXJRBvkjo/s36/10.gif", ":p");
    emo(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqpDEIzaNDanhtwDxtJWHhpi_KEpSAw8RWKOCossh-A2xBRemfYQYVLwf4ShVw4hjKMSh4lDdZthuMYcvno0kGREXjl1ZMoqwreojjPSIj1wfv73wSt0QS9czTPUH6M0b2BSkB_i9DQcA/s36/11.gif", ":o");
    emo(/\s:&gt;\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwAgDviWmT3fIOkKni2PAFeDAhmeVo4SXG3OW5wU7VRgor67Pz1O29eDIuaX5A6KBDmZgImY7KpWUrz40E8esXW_H-vCN_zMpFfnV7n3ShiE8e99BqQDq-nP6YbRe_RYrHUJ13vy2sHp4/s36/12.gif", ":&gt;)");
    emo(/\s\(o\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT-aqll1i6dSdS-y9V5pRHn_Wadc0EsPfU8ekccTvIhCQ1abUsLKmE8aKyPZ6CQvY4WESAFcq-LLfqv3OVsnt3-5kJmqjeIKycUyaowKzVz15TrrXboA0gEZaSdKnDz_Egp1TuXp_CO4A/s36/13.gif", "(o)");
    emo(/\s\[-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdDcVkQ-H-s3MHT5QpgYpJIJIZvGXGWDhnK4Y_W5NjLLWW0A8LbaUwMGaJOLA0-0DEWxJwTUSCZFMEXJwT_pGsfFPvwtuxNxh8-HGcDF3RI6Jry_TLDOTmk1qgOWSFNrx6Ekh2FANg838/s36/14.gif", "[-(");
    emo(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKS22fcjWJ37ionf9Tp5r5yTxSVbiKVbZRRCxhfUFFF9VY1evf9Exewnn2EwMeb3kcpCYEEs59qt7L9j5aUrKRH_1B346LI00XNi2TZL6kaSlG-9V0o7z4T1KcGBdRGkKbToT827RWh40/s36/15.gif", ":-?");
    emo(/\s\(p\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGCyWPhDGBhyphenhyphenpKZXxqtPBGTj8dQUcblFHhlhKNDUgJ1MzvUYCtG3WzHANfyQlhyMEI-zQKbYH-C4h4TC0XrjVS5FGmczBIS5u1EO8_Tt4txGohtHdVmtzOStKpjYjs0X8Q1uircxJ8_D8/s36/16.gif", "(p)");
    emo(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwnSt7LiVAIqZuOZ7V6CjJhDJXwY7Z6O3oruC0a-bGwHUNnxnGDQ6WUkKvQVgU7L72-6dDmtBFLosMD8rnofZperwt1dLcLTThNhhu1YDyf-KRwVGPqj9D4FNohtx50wlDyVh1iv0Yp68/s36/17.gif", ":-s");
    emo(/\s\(m\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9k2Eexsrqq2g-Apf0EA8zctrBFtgKz19cNFvGH00J7ompROKyey706uUws7BgPMIGKOfiZtAX0q4gjP4tEO34HOoHElVkEZHl_unpLBa2u1bWvMdfga4ejCDwN0it8y5Zfr5OAwdNh1Y/s36/18.gif", "(m)");
    emo(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCMvMLmfp05MBzX9m18dtQxn7SIcgRxG8BDpIQ5uiVzwA-43tRsiTKKumbNuNFhkDvSYwiiCDI26Wj86Y05hFxYZPo6afSwIfCefYAbm9KMu3Hg7MTo9mVG68JGm93aD9Ujm-dPwbo1JI/s36/19.gif", "8-)");
    emo(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdTrptJh-M7D-L1DhCKq3QEo0a7RY9d86DDRG66aWtGCbIZXoxTzckTd19IaJneLs78FzxhvLa1ecNquQkvjr_VtF-wNzAyDosNAV8JRtTM7Bs5GnYsYwjC1KR1iEMWSllfVN4UXHTkBs/s36/20.gif", ":-t");
    emo(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Z59dmtzynCxGxpSaGV76CpKI9bhLZdNmISVl_2NXw8MHlKfUthj1eGoXDDUhMGiuVf1-JT9ujfTXfI_h_Qy5oNYtVSYD6xfbKt0W3aDiPeDPyFW7QGzGhh3bfU73xtdtuxjR2xyJx4k/s36/21.gif", ":-b");
    emo(/\sb-\(+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxtkIvsKHSVsRp4hDSLJJum8NANxnYgsawcQtZV6XwmHPe8YWZAevSJTfmvMtgOfqhQTEHpzL2h4q4arQd8mUEJBh2m79Nbjx8rMehWQoJVjsXNzEulD1TsQw7QPtdhIAWc8tD5pbrtDM/s35/22.gif", "b-(");
    emo(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgb8nhpLGDAkMNw7CD75LEMZ3onhVnJqMu3l036Cha7tgVdBeaVs0C6U-Y2ueoaBeTDKm11My1Zxm2cavNqm_qURKitk8v3eeMBhYjagAz8hALPyZi6CDGIoNRgVH_lts8aubYtpX3uHw/s36/23.gif", ":-#");
    emo(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxtzE1JzOb-tQFYV8-DFjrFHdqoeb4Tf1d0RjEqeyIgRxGtNu00UxzZlHvqgsmwjjRDaM995se-R0pti1WQR0QQgPAN7vHhPvVJZJEOQ-RPs8zXZEo84SY3vYDBTDIdTEd_dmU_KUxU6s/s36/24.gif", "=p~");
    emo(/\s\$-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH1qsxXEeupS3LQyfFB1CisQmY3FxLXFJZiA4L07fX0wBF8NtVkiF6EiH3SQkpN5h0wWEWz43JCnra0vKKD74u0MP5b-ltEAtf1rXoQa2KyM81aXDw_ENYXiVW0NFPHYZ0ARPSblRgo8s/s36/25.gif", "$-)");
    emo(/\s\(b\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGMFQX16E-r1td4Bx-M9RaRjmase6h8i2wOckuM60QJ37l6aDfF_fP4vy7qJJck0GPRmHx0dOJuHxkW_Qj71qSLQgExkNVQq1ei6r1DqGoz7Jh6HfE0H-HceUL8ltV31l3R0pVAOTpSDA/s36/26.gif", "(b)");
    emo(/\s\(f\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO2inXKPnwcqbecMVnwMsICNY1lcghpgrzLsCdPgLUnfj0RzNixOFmxXI1yoQsIOUENaLb4Km67ZqkE__-Y0ArHh6AmyOBMa-8KBedmPfIlRkj9Jhwbmu-xQg9IccI4oqxK5YNUiRUehc/s36/27.gif'", "(f)");
    emo(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXLotx-NQayNgVgshhcPn4Qo7T5lqQSbFUNy1HlG1OnCqyDXNHIyZ1iFihzHyln5LavNQyBJAkRhQ8C1udhov2nH0k6sXGHDg4botk7zcPe5sCDdBkrDjIKtMwzRlUaOedbtxYOcU-z4k/s36/28.gif", "x-)");
    emo(/\s\(k\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtQXEnZ_BImL0qWt9A49X6-X4abqHHM_Kl6ux1HBF28LhK17hlW3M9ewqYgAxPc123Syf_KPf4GEehgoT1AYavIZMNQEXdDfBqgpoOuKG7I88ljXBV35d_ddB17Da1xLITGB3Gw7q8wR0/s36/29.gif", "(k)");
    emo(/\s\(h\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC0IAr-gTZ8gMr2FHSY0pUp5AFGM6wKEc4SrXb5jnvwi0Eio7HKtaLNKW1fzRSw32wZs43sEIjnGioUkcWiBkOGLjO_Pxxy8W__03tIFb5Y3odMdq80tHyOJVDcjXYn3u2g_-qM98qxdc/s36/30.gif", "(h)");
    emo(/\s\(c\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVrhJpZGSP7BDbx1IckX626OhpwqktZUHqAe4eqNljArRXwGy_-15ufnxees4wrEHd8SLLfZHuJM997KMcMvYVSDy3EqqlifXigtO06fNyTKqvwi2JScTuiu6nYg1PhVD5mV0ygSTg8nI/s36/31.gif", "(c)");
    emo(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8VCLhLOquiVgKAeCimOksnzFHMst2JPlrreyoJWhm37FSxSxBwfPAhHJNP-dCdmL4QXJBb37htWfYFmVzE2qeHSMXBRzFk3pd9HUjW3BL0d2QJnkPs3JQwOsyl2y_3B8UV4wDJ_SE7Wk/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>

  

4. Untuk memperindah tampilannya baik dengan mengubah background maupun memberikan border silahkah sobat cari code ]]></b:skin> dan letakkan code berikut ini di atasnya.

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

Gimana sobat mudahkan cara pemasangan emotion pada komentar di blog? Oleh karena itu saya berharap satu klik tombol g+1 buat admin agar untuk kedepannya blog ini semakin maju dan berkembang. Terimakasih :)

Kalo ada kesulitan silahkan berkomentar pada blog saya. :D

Author : Fajar Ramadhan

Sobat sedang membaca artikel tentang Cara Memasang Emoticons keren pada Blogs. Oleh Fajar Ramadhan , Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://noah-indonesia.blogspot.com/2014/04/cara-memasang-emoticons-keren-pada-blogs.html" target="_blank">Cara Memasang Emoticons keren pada Blogs</a>

Share this

Related Posts