Cara Pasang Emoticon Di Komentar Blog

Kumpulan Emoticon Buat Blog - Trik kali ini akan membahas cara memasang emoticon di komentar blog. Emoticon digunakan untuk menunjukan reaksi atau perasaan pengunjung ketika membaca sebuah artikel. Memasang emotikon ini juga bertujuan agar pengunjung tertarik untuk mengomentari artikel sobat.

Bagi yang ingin pasang emotikon, silahkan ikuti langkah-langkah berikut. Dijamin blog kalian akan lebih menarik dan tentunya semakin keren.

1. Login akun blogger sobat

2. Pada dashboard pilih Template » Edit HTML

3. Cari kode </body> lalu letakan kode berikut ini 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/AVvXsEg3WCvt54bKoX4HQ7a0UnKawH65lfdhlVQK4nw3TUhIT5OyXNU4y4MpNNuTT6Jt-ISTfeKWmF3johvD8DFspFQ3ye74zimb3AVxHvQupsRZtG83-5esOQwrW6ar2oACPAfUx1YHMaFFNsg/s36/03.gif", ":))");
    emo(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhelpbGyZ4ShtLZE8fPXHX0bPdWFNQaXFpKFzPN5WQbZjFPNORpiPLiuTiASNEgLiFKQnkl7HyhreIFuwhuoDmq7zCjPvB_rZoCAS7HcFIU6xWlnfrVitEMQONqomMz-OwKlFNaocHvilU/s47/06.gif", ";((");
    emo(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuLt6jD5tuv9gA-2WSUafUv41mOcWJS5heB8TYG1HuJ9x8S4dsvad08fqQKzN-yhIotlCM8J9Jnkhp6Qgw5cR5Drff-RlqUjRWWC3HTCuZLNSrePX9aD2wnklISHWYFM_wg98L_bg23Lg/s36/01.gif", ":)");
    emo(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTgeXnXxdX_khraSfDEoVBfwzhZS8J2u76VMx9pTkCXVPp-0KtTjYdR10TlEiEd4nPQZlSdOhrnABrCyEhH9uP3kiyDqXxcNQsJF24Ij6cJQvh2DW0vgMYaSpZ0uqx7GYvebITLAVQyEs/s36/02.gif", ":-)");
    emo(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNMlHByjR-5cPdzg9Y8GHS4JyAxPJ2YFBNM2YemevmdCBxBt-w0BS6d-Sgb_2JCthkY1yFEFfboraIW-rme2TNFc9vk1nzpEN_OBsef4xMSDWoVBnC4kGnZ0daTP4ZgHkeqCp12hhKLwo/s36/03a.gif", "=))");
    emo(/\s;\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiah-364d1drsdWo-4to-xKalk_WOdEnc9j1T622uegil8olI5YNCviKsNJf7oEzGr02PnKbVQpz_idI4AF3GmPUOrhds3nvSTaNBy8AxZB70jI-Rtc-JcNryqHk6kH7JxyPIsMkUZOQO8/s36/04.gif", ";(");
    emo(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0ePz2Fo96MgPzNzzaPJKpy2EfLyJFA6JRhLIMFNAAtyuJKrsQKQbLC7EHI1-F52ToUmjAw_XSxLwzl2m-pyo4Memc85AW507J4AIiBdOxn14-cIZCuVzWSQvLQgaLFhNKc8DtQIs7iF0/s36/05.gif", ";-(");
    emo(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0iQpgi5XgdRzGosawd5NGLqijmI_Hlm1JnCgLy3Sqc8tyoAXX18sgZhikbGCVshA4hyphenhyphenGBeI8QiF_mjbq4Iid3YQIrtqwO1iwBQN7Dbzk2irjXVHaV8PGxnpMo-VIowROZPzuLZBPhk6M/s36/7.gif", ":d");
    emo(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0rqysCYe-S1nOzyeUcdCYcj4AZ1FezQkILibQyKFNdRe1Vr0_sIhGGMFvuBZMZUwIEe27q6SFYZka_tBKsxzvjVGl1foAbZ0Kqaxhwy20UEnqJRYoQeb8QXDfvXZQ8MJ0nviNRxj-FWA/s36/8.gif", ":-d");
    emo(/\s@-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu4XYfsu-0fEwYrPQzX5cK_5JVZz_8y_S7EGtOvPbp755WGialBU3YC51x4lWxR_ukSpcIXrj6cW_9dbKwyTAWY5ng8NaFp4-G7N3j639X8rlxvQavkmghep64ylUGOm17tpEy8ofOA_M/s36/09.gif", "@-)");
    emo(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT5CLFhZZau0Hc3RnIsdX7yI7EvU_JJ-jawcg9G3TZzIln9NQIrBNP5qA23CRhEdvZVgjSc_GJ6m3L9xKajvMLwDhXPQLq5eLF4ekEfCoEZwVSHyzbpuXxWkprANkIHsV-_wnS_7hymfw/s36/10.gif", ":p");
    emo(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0hZH0RJ0KGXrzDBHtoeDvae_MaEf1wmfj1uoXRE8W65hIMC4pK4WUZBR1XbJOIWnfOgTxkpxpycVuRWjYXA9z1FGdK3gER8xeLQOFM4hkswqa57EFt-g448VIo6JwEUUVIRZC21P_Z6U/s36/11.gif", ":o");
    emo(/\s:&gt;\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKeIwkxyd7wCuf1LHgdpZSKWNdqpPhU1d31-BhG5pA6DNhL6e4o5iLpMDmWgQg3ZfieHB0rGOkYtJxXYdJeOmRbU15VMIa8DQIhupJXTIxulkPB0IJmIpCXHVbOTOqlbUUa17Bu-SEBOM/s36/12.gif", ":&gt;)");
    emo(/\s\(o\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiklU9C0TyzJKICjjN2-HQ3BdfZUcW3k1hNmyw4YTIn7SqGFBhMXambdIjYQajy8yUEkjn-Kq_AT9Wm2-8jGS5ufIjDuZx8dizg1-TQbHqGDU0vl3JyILkYvyjXJeRliFSmGx_vLTPZSjI/s36/13.gif", "(o)");
    emo(/\s\[-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1TnCtquQg8bF-6XtCwDydRoMX3ANo1XepA72UBrjw0aXFDB6zP9nqb2uD3lPg3I7JJqp4Wo0HT7vLnPARhGnuR7tAv-PoiX62Vnvhdzn_wdB4CqmqiKsh4csxB9fMYmBlfyWIfzfssdU/s36/14.gif", "[-(");
    emo(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheTSjpVW4PF_ZtoLwrGBl2UEdYjmf22__h4p4kOIHg0v0zmc3AG7wTJ3MQ8oSmxTuE9o0h0GAJR8i2qZAq6Zm6wzDXuLpnzKwmt2FPbGYBYyE34jH6DFy-WW-_EXPG_3Typx0ZaICZwks/s36/15.gif", ":-?");
    emo(/\s\(p\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTEHJ35C5DnZQ7s0OnZrYgAhZP7lI7dqB2gW0kL7T3TVhDlzHLtC4g9-LgGHdVRPUoENhKS8ewQUT-9_wbGE7qlZ7PBuOIYvAZdWZNvcQx1WISl6On7oQgQyfvFlw3-8gLI8L8qCmEwf8/s36/16.gif", "(p)");
    emo(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkL7Y3ukz74OAuHG1EiiiGYKlREP_ibvxcdA9BYzVLDc2jdzuWvJmAchMw40ijoG8lGAANXYoMt0cITfNT66hUQjPSH5zmVamSzP6Br5-ucmZ5S0blOZSvxB3hp3i1wIp32tvarcxehVw/s36/17.gif", ":-s");
    emo(/\s\(m\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuCBu10AJsKK6BmNN6pEkIC6QsLqX__DuBn7vKh-sDaSe-W8IlfKWhUQ8iU1Fb6Fk_XU1MBvqj_Q5ijDD3Rv4C-Rt5LSq-U1oiqytFJff2lDm5YDB-Z2J1VoUgem_5LReoWOwWlGuIqKc/s36/18.gif", "(m)");
    emo(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPPYV07tTrQjIz1blwSFGsArtbpEkJu4YUpE0NxfyLq5uMMpf7w_uGc3j58M98XkPJSYGgksz4ekVpkuUbP7ZskoRyfNRIv2Srqc8n6t6cN6OVUBUXbBBNzVFbW7Twy26Wz6LtCFrZVJs/s36/19.gif", "8-)");
    emo(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJCSOvyd1piMgoi9NaAdEwugy9pi4RY4j9DIdh_ZOs8qpId-zphSKdI-CPNIuFdTDIPs-4nIi8c8-UP0XK4hswD4ZvbS1I8uXGbX5woeb3IzV7OR1Kx-tPEm5NENg4p4cjINzccgIRh5k/s36/20.gif", ":-t");
    emo(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQyFWe0zBlyFoExpZ7M8UfT9XUZrCfD2rE9ulTeI2KuX2xKbbrJVHgzwGbcT9FK21RuvSivZFoXwDN_dzKuczs9b0cTBeB6L9rLmpW0qfPhsWUanFhFQOMbsM-h0O2OzJpLSwVK3CqHrM/s36/21.gif", ":-b");
    emo(/\sb-\(+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZyGibxPOV9f2_Mq5ihEgVZbAM8Fd55nViKsxSXFJ-hWDlvJPdQCn4vwPWE-H6KblUuRm25-SrPgshz2BqMoWuiCCmxA1YZJhyphenhyphenrxcYf1ltflFq_3bFN7gbIJ-nITCaDz8fq7GLLCxDXXE/s35/22.gif", "b-(");
    emo(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIgCv8rubSRQQrfeOrj9PaL5X0cReyaxxwSdeyOjdl3Zrv8gxBip6NUpmXvsB9V1vOlpq8luE6jTdqhtjZrCjui_nYtfDoOAFQNqQ5KY-PKdB4C6Fgpm3zIrgERBrEZnaIJKAsUI_oW5w/s36/23.gif", ":-#");
    emo(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8JV2lWW6YHjt8BMvc5NkUklBIC6jmrYmv31df1MKtLlK6WO3TbjC6MNKGCsGufM90Nmwxh1eY6y4d3glf3CPpCVLAGAGVqJEgB7nQAQCQRi-kYEWnuiR0MOKG4JX95FGAaNKkGofEgHU/s36/24.gif", "=p~");
    emo(/\s\$-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvu8Xq9cbh07VMUUibHS9P6V3BMXgWAZm9SXxI_13ms-TA5jUA3a-YVs06_GF-dfpiT1BRK37SjGxnVpUjMb6UaRfGm_EupzqE21ZFaSIoeKPsh2vBvhWqsIpN6n5EMEMvzH4ubs3-Mhc/s36/25.gif", "$-)");
    emo(/\s\(b\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7D5D_l_KuR3ftWBmMg7S4VG60VWS7aUddePjFreQ7Dl-I6b5ncR6UTercjmZDyfHpFKepXFqVKHveKT-Y2cJR20Ur7CYtOGAez3sGSZf3LvVuutBIGRp9kdNGapa5cu4tssOYSZlnEaI/s36/26.gif", "(b)");
    emo(/\s\(f\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-8db1NG0LSzC6rDmLTUcsl84ohcdDt_rsmDpMltf2cyCA3skeIxZIEFFtmMs9L09FCKk7QHuJOMU1zk7QkAzeUvpafa7YuNQmhjWZHeLSJ_AoTaA4Ox0PTEkmCqHvKsgVDQA6rlpkL74/s36/27.gif'", "(f)");
    emo(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZYFdKLGHxft-AWQoZ6Sy8YhQdWg87ugYFQGjM_CSaRoDzrORiAc1mD9pFraWn3VAE17hsDnnLMQhLEcxu_-wJeY2eQja8ATyhgMlWg81Rt7k50GfPwN7zSFhtwOfyjObCMBew3EsbMaE/s36/28.gif", "x-)");
    emo(/\s\(k\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqmPfC2PGPYwmrXclanOvmw_dPG8urthyphenhyphenXKtR674reRoY5pAhU2WCvihf0LUlpwt5ssFfb1q3MaMj2N2IewHfppAdGZLK8Cb_uutpjgYn6xv1ybWbR-iIb4ac2llAsBiY-ulInrWJVJ30/s36/29.gif", "(k)");
    emo(/\s\(h\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDFyB_1l5x_jVJ1a7fwmgvgfZAbM96zAh9eLqShFntnv4_2uJf44nEA1Jnwn3bovqJcIItWp-aeERAlwa6CnG7XvZudGy8TlEZEuM_hxfotsdjSmBc90oMbuOzk_TsgnpOCVdbj-WQjhA/s36/30.gif", "(h)");
    emo(/\s\(c\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaesKW8jgtZoLGxwJ9F6HrvmAK2Ft0norVrDz6LmNZiPO0Yx_0EPpnQvfRclcsw96ql48CHjbFUEKL7EM8PT1AFUvKgZ7y-vBZvnQVJ-VchE5KpWnKJQLaivBvJRS7y8voEvm9bQdFPLw/s36/31.gif", "(c)");
    emo(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX7HFNMcQW2D1UtUtHKzSHZ7BhwxQhttPZ0GCx4Ar-qsHGCQBRDFG1o4Fo3gpYMX61LZNZqwrDBucDBIUUCCtUjei3SmCfus7qrDaD8JOqt6eh74vpL0MIkYL0tOiXfGa7rY9wmfKzlss/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, tambah background dengan mencari kode ]]></b:skin>

5. Letakan kode berikut diatasnya

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

Mudah banget kan? sekian trik kali ini, semoga bermanfaat. terimakasih.