Cara/Tutorial Menambahkan emoticon ke komentar Blog

Cara/Tutorial Menambahkan emoticon ke komentar Blog

Menambahkan emoticon dikomentar merupakan cara agar pemilik blog mengapresiasi orang-orang yang berkomentar pada blog kita .Tak hanya itu komentar - komentar pada blog kita bisa menjadi semakin ramai 
oke langsung saja

1. Login Akun Blogger anda
2. Pada Dashboard pilih Template » Edit HTML
3. Cari kode </body> kemudian letakkan kode berikut ini diatasnya!
4.Lalu masukan script berikut

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Klik untuk melihat code!",
emoMessage:"Untuk memasukkan emoticon setidaknya ada satu spasi sebelum kode emoticon."
})
});
//]]>
</script><script type='text/javascript'>
//<![CDATA[
window.emoticonx = (function () {
    var b = function (m) {
        var j = m || {}, l = j.emoRange || "#comments p, div.emoWrap",
            k = j.putEmoAbove || "iframe#comment-editor",
            h = j.topText || "Klik untuk melihat kode!",
            a = j.emoMessage || "Untuk memasukkan emoticon setidaknya ada satu spasi sebelum kode emoticon.";
        $(k).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>' + h + "</b><br/>" + a + "</div>");
        var i = function (c, d, e) {
            $(l).each(function () {
                $(this).html($(this).html().replace(/<br>:/g, "<br> :").replace(/<br>;/g, "<br> ;").replace(/<br>=/g, "<br> =").replace(/<br>\^/g, "<br> ^").replace(c, " <img style='max-height:24px' src='" + d + "' class='emo delayLoad' alt='" + e + "' />"))
            })
        };
        i(/\s:\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxfaJAmA0O-rP8iPOozN9vdBvog4cQgnLUaxkJwAkC_gnyNsoQMEL28GrUBqP1kQax0jhuPAAlf9TH_jsU3wPYHtx2ss2pd-MTqsrIpthBUwv46LNv1bdD8_YY8PD-sTT-HYDpoBTIgmQ/s36/03.gif", ":))");
        i(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI5tKzRpD_fBOHtd92AwNliP4PrV6A0OF3c6EjHjEy3zPw-rqN8e8KuMDTnHqSFEewqcr5sPTexC194uq61xjUNd7PHrywmNxVCokYeI654juT-HRn1Vr2e4zDDTAIqTsWcUq_VMX4JVE/s47/06.gif", ";((");
        i(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4JCAWF-pX49-0iCMPE_8xpK2zQBFyu8O7ie868fahAfBiQBuRQyIp58xFUc7uIDJnVg7MRNLBu7BK55s6xGm3nsz0N0iu4DSKowrKJkhK278kdi6YTPKu92dnYWREnY0nE5KT-KpMqpQ/s36/01.gif", ":)");
        i(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAhz0n06Z0_HvcGKtWDj2vYfj7HJhVAoLz071BmlpOn3xy7ePwz4aDznEwpDczb2-iiCULhdTKcJ6E0pmlEmKvNk5_C1SlFH75Dle9AZTrOJitX-K9lSB-dHci4W906jeEqwmJuhTmonA/s36/02.gif", ":-)");
        i(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij_yaX3sXAtjj2ndEXQUxaaeBYLQ7Hw7YuDdPotj1A6xvYvC-0qxr96h66ZzVRFEiizf2cWkb-osoUaItxyLx_HiPQcSlSiKOyd3duf4EH_3dLqp95UP4Jvo234vfvxLmcT4QEtdCkjaI/s36/03a.gif", "=))");
        i(/\s;\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXnPH2AHFPMZkwTJdFkp1wuJ6-3WDJHm3VMI-SF_MDDoZBoyBREtFX7cW-7Zb6wUiYao8vPwekuqsSg_DENdfIaL6nXxDIv_vYM0Kf1FRz-B_-8ZPYui5w6_7FC9WFgJfJnf2Wc3maHfw/s36/04.gif", ";(");
        i(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRtnG5u29rrDVXm_-2u0Ce8c72SSL-t-Zerj3mRNkSoZi_48kLP2pmjOb6V1bE3BnLfXh_Xd9MU7aufwIi97Bx1kFi7Kztz5w-kTqDF1axqsccBFTldqu8ZtyESaUIBmMVVo7WH05hAPw/s36/05.gif", ";-(");
        i(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGWIQjDo6qWvvnbkHn8NUG3SZmbX_8WW9MgyxZk5fzZmFA9yPyywLXwBLJSHFyi7SFKtSR66g9QoC-FvDeSOib1rMpWVCf4_bBGH5nxM7yXZ_nVpQVgrfVx4QnapwGRF5aZxlmrcUWipQ/s36/7.gif", ":d");
        i(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmL4tDMAl_1obhyjS1UHbbZuqPjceZ_55O6QP8yflVxDtHxpUraU13b9qJ4QJ8sNfOAIodnzru3Sk3ZtsXMTbq6O08agKu8xg7D5OVDu1hy91dvixwa8Q3_B3Y2OUukJIWh_-YhYJna9Y/s36/8.gif", ":-d");
        i(/\s@-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKx3kza55KPqje44kavDn6z4TmtMFGUwpPp8kSiWn8uF3JtYSE8MtV7S455Bwkz8ucxRETVk_AyxksmniuS3neNSLwqgqfVeRdM77H2ZmZ7A5UfkK83YKugYZv1gY78hmEzV9zvZ5WDt4/s36/09.gif", "@-)");
        i(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIWl_j14mkvEMOUMeiMudvJlUEsgiLUkAtCd3SS4eYtxxSPH0u7b3YPTzDu1aFcmTrAoPrkwrV9q7pKsQimsncp2Z3GgjTaVuEtwbWX9QhY6S4yOFxwm-PVJNvECqZ76iqFGxJt3ntaoE/s36/10.gif", ":p");
        i(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit6QmVMUexM8YiF2QRYJfSSVJFrroCAtrCKgNoKC0m6F3-7sGyOsMhSaGLQgYEtDqTg1AX0kTJ9v4NjfxIxycsWIoEIbXZPlFINGeYuXqiSAKt1ezyvYXNlnGK5SprNWZDY1aMZVls3co/s36/11.gif", ":o");
        i(/\s:&gt;\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQoi1i-MFWE6gY4qlpFyRhuEyLt0TLl09kDCJGR23pXNFKTpwVHilBGfkc6BSDQCl2EgV4fzUTCiBav9ZPeL7ddnS-x9yWejMMgRrq21iA2XDGspjemFfHQvgIS_K_7Gam9x29ZhNmHwk/s36/12.gif", ":&gt;)");
        i(/\s\(o\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn69k08ATIO07RPsE2ef2PlnPKWDS6EqPLmjwDTOptCluH41iVyohUhGmm41VH1HY_mhaBdF4c0Dc39mFI3ITq07qu1SSOFaLd2h0r-i9owE7XtnlcqdopotcHTqeUvj2fXOO3MKIRbB4/s36/13.gif", "(o)");
        i(/\s\[-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje0KHhLwJcy5MufmFxexABoY70TAHslvj7ohl-UzGCxYFJijeT3jvAS1MLThEDjl8m5xnENy0ssMvUOtLGTtdQXvPQmrTwBw6CF-GNaoniYO0oAhcG3kQZd7KosmRLUQK4jEY8g-OB2xE/s36/14.gif", "[-(");
        i(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjToGooQUvJsYBpKeTfSfiGO2vM9RZZOq1yl0eRLo60aQYkdi6lgXGUCfGQtiEq7dhM2xesR9Ex4Nu1bFuYd0_MeNwRXREaqq6LOs7U8Rsq82mWzX6CdaYhAxgmJAA59EKywZzI6iI2o8Q/s36/15.gif", ":-?");
        i(/\s\(p\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf1zvmN-ytdKGRGRhCvOB4WW6dgfKD92m9RUPhmrkyX0BTse7Zhx5gNF1WbyTnTmULAdENa5RoNUlhZDG1jn9zYG6Vd6HkNh6p2VVplMhdF-PUCNB2jEKnnwe1t5HbW4dMZUlceVa81WA/s36/16.gif", "(p)");
        i(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEuHHwuDu0uVPhozmy3UtT-VDPdEgXoFbCQhupH0n5N-54ghJEMf4grWM3dwN8ycdX3kTGZWvSSpDuwIJ2GSoNzI6iYA57ic4Mx3bKlFA4cHfYFmEgQ3wLfQ9rzMSURv9L5RGXA9y_aLQ/s36/17.gif", ":-s");
        i(/\s\(m\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGFBq-bM5r5J5jOYZKmGpZ4eugtTrFD2YZcXYSGAc4tc-i5kTiYZtc5OHa8ZO0Mf1SqTuVrOOlrjpNyevvXUFoLhy07wYxiVxuOHTugtx5gOHCyEo_i7wH8IIO6m93ej3lvf5hkMbXqTs/s36/18.gif", "(m)");
        i(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqhUqv_OlO8lhWegiyXqs7O0m9cR9uRyASkbdFfSfBVxIh3aD8hb9Te1HG9KEKBwLksNS1YYYk8PbcaolLkLrO8Lp4A6LLgSEkULB38vZATub_NUshkk7HbJroCgzhYASx-5XxKot6lTY/s36/19.gif", "8-)");
        i(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnUrbfkPjsRVLYbompa1S1RmiEfu6HYNHfu1IMwSSfncRTq2matN2cFavCB7Rl-g1nI9DypamrdZmKyNKZGHRC4vkeGJWqJA5pwK042l8rX6pg55m3hFDEXRy1JYJM-OMLQcSxWYO3rpw/s36/20.gif", ":-t");
        i(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDTe3rEG9-_RYlFzXupstxmvLe9tx45S_wNC9Mai8nWgsnNORihz1_BL7Y3sAPg8ytokgXN7wS_UCo0-vrAuCAYiqqIAo0cKkFGfGk2YIffEX-1-PvGQQfjfCGEUp4K6K7X9sr9QM7jpE/s36/21.gif", ":-b");
        i(/\sb-\(+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxkINvbEJMe2T4FGEfZrT-27DAIC6S3M81UVLVeTKto2GELVLesCM8sppgcAq-pYHintlijd-_0NZV2PTTYF4BaIu8iC5Lu5IUxr9Q3_2fGypVz4c2oiEQJfxR-IUbJAQFiJFrkZBqQPA/s35/22.gif", "b-(");
        i(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6F2MtlKAmGhYzWpD9iQEtQOgssDUNQkZDLm-QtY720-3hBJ9gLwbfyPt_sjhX8uA44NDK1DCXlUIViYsLzQNWhwuTUMw3JfdtHI62dLJKapFbfQphCXTgYE2nqnbN1PtsMyGxExvWbsc/s36/23.gif", ":-#");
        i(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEbTzECVPwfSo2oSynsFfaQoE6EUnfFC8zHv28YVosEj5Rh7B1K2FlhRK9cyROWtOPnd1-EJPMFWmYiDO1dNWQxBK52TKAg9syKrDJ-kYYfXa7rx_a48T41NykNqCfLKFY-YQIo3n3G64/s36/24.gif", "=p~");
        i(/\s\$-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4akF55vDrQ7PmaxE0VySl2dC6_PdvML1q9JMHqkqbcQdH0qAviGVOmf82x5LeNjRn0S2TX1vJniPjNIr1gUfk3rLTnjF1qHPXPE3drhw4uXx6e1ipCT_5NtqOOALTTS_ajyN1RFOKOog/s36/25.gif", "$-)");
        i(/\s\(b\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggDwfn6VypAG3G-TQZ2qFJAxfBwXK0q02jtjW1Ui3E784pqw4Zhv29iz9Ga-ow2SLkXz63tTFX5iCVIukTZ9w1fQsbUYOaw_n5tos2SIYmEfEyJc3tO3KhKBHahvugpfX_ofSlIQho09Q/s36/26.gif", "(b)");
        i(/\s\(f\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5u-dh-Mg9juRCsQDhvW-biD89-CYnSwmNo5ut2YCApsxRRprD9pZV2U6AnaL6lT9_wMV6Dh83ZRT9ClHARK_fRBLGqSCJ4XdsE6evi6PVnEoacDdjf1J9pAUd9y2iMi-NBWPTXACHxTw/s36/27.gif'", "(f)");
        i(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHGH6jtwM6Gtv_-F1Gx2SmmavkzzIzwimVF4gVKkaxc-tN5PnQaNxrw98c1IGmuvt5RWD4htzNAsvsep1loa3YCeHWcpp7aBPmqGt2diBwwXkpXWkv2tsDYF4ysKxcbrw2Z3Fmc-1yV7E/s36/28.gif", "x-)");
        i(/\s\(k\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbiC4IeW5wzDl0uP-bt-jgfG-zJ6bl_bb7vi-2ndkUULcxNQWxGOP3JJWU_aQrm3FJNPkBYuU8TK2btOA11kt_vv2ZNK0ia2iWnO7xU-Fjr9R6OTS5Fo0l9c-M_ibBnI0Cxo3M8uSCnPc/s36/29.gif", "(k)");
        i(/\s\(h\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWep7ytCstSJ5aW9a7Nd_xTi3gtJmCezAQYMV-PaLpfIlTl85t0DcZ3H3u8ZXMjvQLVfGAPGrONvV1N04-bHDQ-J8cex8CtLdqp__DECWS_vM9E9Au8-34F82QtVbqms4oCOITDkknmJ8/s36/30.gif", "(h)");
        i(/\s\(c\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZH5xAr2LqnI7vWWkeCosp_3daEO5gOXi7ovOEBIL-XuITP5hhFhAjKH-8goWO8c5c0necz4BXZOq3gpOhn6rqgoRDa4bp3heqfqgXpoUMJ44Irt2SfOSa6KkjYkjeGiIOQNmXFMKRDBc/s36/31.gif", "(c)");
        i(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUDoEIBXocz5DjJcuShyphenhyphen_HDapu1eO3Hp_keoHfWj3NFOXuQV7328tpRWsiIgyONSFm_efeCB3WixR7uSNqf7c1q0hZoGOEfBflyMg888KqNXoNncOtynaXbWBxCRBStgDAQj9NkltRHc0/s36/32.gif", "cheer");
        $("div.emoWrap").one("click", function () {
            if (a) {
                alert(a)
            }
        });
        $(".emo").css("cursor", "pointer").live("click", function (c) {
            $(".emoKey").remove();
            $(this).after('<input class="emoKey" type="text" size="' + this.alt.length + '" value=" ' + this.alt + '" />');
            $(".emoKey").trigger("select");
            c.stopPropagation()
        });
        $(".emoKey").live("click", function () {
            $(this).focus().select()
        })
    };
    return function (a) {
        b(a)
    }
})();
//]]>
</script>

4. Supaya lebih menarik tambahkan kode CSS berikut ini dan letakkan diatas kode ]]></b:skin>
.emoWrap {
  position:relative;
  padding:10px;
  margin-bottom:7px;
  background:#fff;
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* Opera */ 
background-image: -o-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #FFFFFF), color-stop(1, #FFF9F2));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to left, #FFFFFF 0%, #FFF9F2 100%);
  border:3px solid #860000;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  -moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  -webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
  font-weight:normal;
  color:#333;
}
.emoWrap:after {
  content:"";
  position:absolute;
  bottom:-10px;
  left:10px;
  border-top:10px solid #860000;
  border-right:20px solid transparent;
  width:0;
  height:0;
  line-height:0;
}





5.Setelah itu simpan Template!!
Finish deh