Menambahkan Emoticon Pada Komentar Blog

Selamat siang, bagaimana dengan kondisi website anda? Apa masih dalam perkembangan atau masih sudah fix selesai di desain? Jika belum ada sedikit tips menambahkan emoticon pada bagian kolom komentar blogger. Mungkin anda pernah melihat atau menjumpai blog yang di bagian kolom komentar ada pop up untuk menyisipkan komentar dengan emoticon, Nah kali ini saya akan bagikan tips dan triknya untuk anda.

Sebuah emoticon atau emoji cukup berpengaruh juga dalam suatu percakapan atau chat kometar. Ya salah satunya saja adalah untuk megungkapkan perasaan kita atau bahkan sekedar variasi isi komentar saja, hehehe keterlaluan ini mah.

Tapi pada dasarnya sebuah emoticon biasanya terbentuk pada sebuah gabungan kode-kode simpel dan asyik jika kita amati, misalnya saja anda ingin membuat emoticon senyum mungkin yang sudah biasanya kita tahu kodenya hanya : dan ) jadi hasilnya begini J .

Langsung ke tutorialnya saja.

Pertama anda masuk dashboard blogger anda

Kemudian pilih option tema disamping bawah

Lalu cari kode

document.getElementById(domId).insertBefore(replybox, null);

kemudian ganti dan pastekan kode dibawah ini :

document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);

Selanjutnya anda masukan kode dibawah tepat diatas </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/&gt

Kemudian anda masukan lagi kode dibawah tepat diatas </body>

<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
    putEmoAbove = ".comment_emo_list",
    emoMessage = "Untuk menyisipkan emoticon setidaknya Anda harus menambahkan satu spasi di awal simbol.";
    (function($) {
    $(document).ready(function() {
        if (putEmoAbove) {
            $(putEmoAbove).before('<div class="emoWrap"> :) :( =( ^_^ :D =D |o| @@, ;) :-bd :-d :P :kak:</div>');
        }
        function emo(emo, imgRep, emoKey) {
            $(emoRange).html(function() {
                return $(this).html().replace(/<br ?\/?>(:|;|=|\^)/ig, "<br> $1").replace(emo, " <img src='" + imgRep + "' class='emo delayLoad' alt='" + emoKey + "' />");
            });
        }
        emo(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Qivf6IvuLaBzt7_1YTxaWOtLsquJVFVBCDeVttoUzq-o5zz9FI77FnldFzIcbpnHVehCh2eBS7F4vLOPRGHYvG8voDTfHenEPOXRWibM10AOJewmTFrTkIBKOnO7lCiA818SEB2wAA0/s1600/smile1.gif", ":)");
        emo(/\s:\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLwhOPEDcexYrOr3pCSKE_BmgGLTnjdQ0TRao83sRF6Bcidu94xPWDhM-N43TuC4Iju2RFNoFxQJteTALqvddScwrRhHeXzJMjHKehpUoLncBA7X7R22NjpB0sIW_cEP2Fa1Quf8qWJLQ/s1600/sad.gif", ":(");
        emo(/\s=\(/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUK_X-7ay6nPjXtyTh5VXJtGI4i9yeANqB-OqcO0Bk_MdUnzJDn3KpP2tmpYgO3o89LenYrJ1wWa7xMVES-oY0lJ1M0Zxl2Y4_-lO9r0swI_BcY6uzxmqNIiewqt6Mh-CjwGTQSW281IY/s1600/sadanimated.gif", "=(");
        emo(/\s\^(\_|)\^/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLWyGZeRe638liwW__0SuIvc0MWc-mmU_D_s9dXEYTuyr2nr1fIBlQ4fJOmt06Ala0ZgPCIukzSDbn2NAGakZJny4jzrtb9FB-ftl3zLiVPgfL-2m0Ri03gtUIEjWZE8K9I0bHu4F7ZUY/s1600/smile.gif", "^_^");
        emo(/\s:D/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy4CqTHB1pytiEpfdDgYFN2LP0wByVLaieUEfM5FKGB6nVDNTtCHkSz_LPCsC3JDQwFheWcJlEvZIKcGozVZ2Jcr68x896x7KrL_c2FE5ykmyixZf8VbAhiFuN7LJ2d25ZqUh8xCn8mKE/s1600/icon_smile.gif", ":D");
        emo(/\s=D/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYSyinEAm3GpXeTOULT7zW2Rj6isADAcOenR9g2aNVy-H_JElK5utdzQzAmbz-u9vHafLHbHlqRVAaWrA034WzozVQrj-M6lE4pNjN7m2o2Ibf5Kpw8NvP-ZnRjh_y8LxEx3GBNB9am1E/s1600/hihi.gif", "=D");
        emo(/\s\|(\o|)\|/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFMTmW7XqASeTxCnXeVzAriF1etit95TR8mxJ8F6uKC6unyxm7Pkzece8_8iRhqhgXP0A07lF0gICd3DOOEWetDsQNxszsoD9Iz_xQMbhmn4lB4EHFjKQ_gwgo7s7yjBqix3qceQlZopA/s1600/applause.gif", "|o|");
        emo(/\s@@,/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5eIxUWMA0oLzrbFMQqjptrNMapqZqj60xFqovJ-res5nTmWtoPzWJ1tIv3R-XknNHFyRyvztNLaKdkgUtv2pthcbzTHqFHbvGm9-Vf2uCn5b7waT4VEGoMkwPrUrV5w3_zipy56jOs60/s1600/rolleyes.gif", "@@,");
        emo(/\s;\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBG4zEXjn2hEvQ5FSldKM6NgCuGXCtvfEUuRGhAnMuUf4-F-NqiMxQRAj-Ql6TG-noD7c1CRcnxt9hIBNfFgKSIqtyJJSjDpmMhlFzdwgKCShbiOfRa0tgho4qtTT_CGnRF_d6YAVlVWU/s1600/wink.gif", ";)");
        emo(/\s:-bd/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghi8xrht8tFXySQ0dQ1BNx-DvkzHk4qinE0dpiP2RVJQqrK4A4VSKEkd0NegpPrADCA8itXSPN4jl0fkFW_F1AdMcsdko8ZMH0CzeTFBg2XiHVu8FvIEr45Oh2NcG_Mw_Q9ylZRPte5Es/s1600/thumb.gif", ":-bd");
        emo(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZJjbGXfEy9jtb7gbkbDNo184UZhvzQOAnsDPeRnC79ncaSbsns377BwbaOf3yho_ybkH4b70j1E5P1qxsxgPWHcw6ed6Txa3ci9kBwKMGz2rCGNHUwVX1WSag3mqxpaVfAPwbqXvHxYE/s1600/thumbsup.gif", ":-d");
        emo(/\s:P/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnXFcNIS3BeoQQv__qGOviR6KH9mbvUllP7Z643TyBRy8mwwL8shlipPSQ8JVwRTuRFiBn_Q6p2BKXcpEv9FkO1WcW9VfO08zzlhGENiwKIPuAJhFmWLn_RtTpKS6tvQjR_FP9GSDKkX0/s1600/wee.gif", ":P");
        emo(/\s:kak:/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeJ6VIS-BbyYuK5VEoQagWFMaO76ueJ8uv6OgPJl1hx-BZD5wf7AM9bd2RAt0SKIjKV9LkmMGWURkFONlRvku9-qVykdt8trirJItrhUZ7jh2GJTr2dVIVU5R-MyKolIJNp0eRTfJmOFM/s1600/smiley-laughing021.gif", ":kak:");
        var one = 0;
        $(document.body).on("click", function() {
            $('.emoKey').remove();
        });
        $('.emo').css('cursor', 'pointer').live("click", function (e) {
            $('.emoKey').remove();
            $(this).after('<input class="emoKey" type="text" size="6" value=" ' + this.alt + '" />');
            $('.emoKey').trigger("select");
            if(emoMessage && one === 0) {
                alert(emoMessage);
                one = 1;
            }
            e.stopPropagation();
        });

    });
})(jQuery);
//]]>
</script>

Selanjutnya anda masukan kembali kode dibawah tepat diatas ]]></b;skin atau </body>

.emoWrap{margin:0 auto;text-align:center}
.emo,.emoKey{display:inline-block;*display:inline;vertical-align:middle}
.emoKey{width:auto;border:1px solid #ccc;background-color:white;font:normal bold 11px/normal Arial,Sans-Serif;padding:2px;margin:0 0 0 2px;color:black}
 

Jika sudah anda tinggal masuk ke Setelan-Pos dan Komentar-Pesan Formulir Komentar kemudian masukan beberapa kode emoticonnya dikolom pesan formulir komentar tersebut.

 Emoticon :  :) :( =(  ^_^ :D =D |o| @@, ;) :-bd :-d :P :kak:

Jika sudah, anda tinggal klik Simpan. Lalu lihat hasilnya pada bagian kolom komentar apakah sudah muncul popupnya atau belum? Seharusnya sampai sini sudah selesai dan dinyatakan beres.
Untuk melihat contoh anda bisa lihat pada blog ini.

Terima kasih anda telah membaca artikel Menambahkan Emoticon Pada Komentar Blog. Jika anda kurang paham silahkan berkomentar dibawah & Ada baiknya jika artikel ini bermanfaat Share ke saudara atau teman anda.

Related Posts: