Cara Menambahkan Emoticon Pada Komentar Di Blog ~ SCH-XP

SCH XP - Menambahkan emoticon / smiles pada kotak komentar bertujuan agar komentator bisa mengekxpresikan diri dengan emoticon yang ada agar suasana pada saat berkomentar menjadi lebih hidup. smile/emoticon ini yang saya pakai di blog ini.. Berikut tutorial Cara Menambahkan Emoticon Pada Komentar Di Blog :

Cara Menambahkan Emoticon Pada Komentar Di Blog :
1. Login Akun Blogger anda
2. Pada Dashboard pilih Template » Edit HTML
3. Cari kode </body> kemudian letakkan kode berikut ini diatasnya!

<b:if cond='data:blog.pageType == "item"'>
<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 src='https://boyz.googlecode.com/svn/JS/emoticonnya.js' type='text/javascript'/>
</b:if>

4. Untuk 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. Simpan Template.

Pembaharuan tutorial 22 Maret 2013
» Jika di klik emoticonnya dan kodenya tidak muncul.. ganti jQuery pada template anda dengan jQuery dibawah ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Letakkan jQuery tersebut diatas kode </head>
NB: Tidak boleh lebih dari satu kode jQuery pada template.

Update Artikel, 11 April 2013
// Cara menambahkan/mengganti emoticon yang sudah ada..
Syarat: Harus pasang emoticon terlebih dahulu dengan mengikuti cara diatas.

1. Ganti kode <script src='https://boyz.googlecode.com/svn/JS/emoticonnya.js' type='text/javascript'/>
dengan kode yang sudah di uraikan seperti ini

<script type='text/javascript'>
//<![CDATA[
window.emoticonx = (function () {
    var b = function {
        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"> :) :>) <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/AVvXsEjslrdgPYwV51540fi2H64LHpIiQEoJQDXBs34bk6IYdsg_nqWEHEOa-7ANhiacJkSV7VzxDvrEhGTfUBobO0Ww7GTf6njvW7de6QSjdjfdltzJf_ppncMQzc8CgKHzG2BvsAl0bpnOprM/s36/03.gif", ":))");
        i(/\s;$\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWumAk03dlQB3_HlnBWlt7T7dmB26RNZTSgs7CtlwNdAIhVg_jKO0opcf94RirD7zqhaS6sVkd-b7oYxPZHOZxp4AakWQJ2030kllkfToXZNq6AJsHCPVXM-qD_33sZWeD2P9gYIAvA4M/s47/06.gif", ";((");
        i(/\s:$+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAdQR8S36FKbisXYRZkEEC7WXPD3syixqvkhsh7WGvLI8ygLnQCCqSLMNn9X5SjhMVmNPljhPviutTsj25EXzBiHrpec2-VPNfQJhQ6ffwNKzd_O-IS2ETcSYNQizlim83yLZ0RbkJGuA/s36/01.gif", ":)");
        i(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXeg9kvM8K_sfzpPBUEbN6ZySE74saJCQ8qK-MrYnG_GGwNDAOADm6bqIqka-Em0caK9ehoS9bs3k-pEJoRonTBKXWxyXn7HvVHn9-Q4jSvNbH5yBj7tBeP-1tAexWeZxFMCdsP40_aOE/s36/02.gif", ":-)");
        i(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFlgYpwP9ITArcOJDq3NsPaMMpT48hiQexxm6YpJDg1ttL_UoxXKhYNJZgKSBlcvhJHTKaDZytzb_dnwSTmYeFZGFUsVyWWwzeopAVfP6SJpRsaIa5O5AbvrM37RlmP1z2kDARlPtJlbs/s36/03a.gif", "=))");
        i(/\s;$+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm5kZnBpayMvldC-ypPM2lJw4QrmAeS4brzG3pcveIfbDpGHTqbSKquUugfUlEK2pt4A5b3A4N46o7YhvWDhESVm09znA25laaxamJgCwq1DMTewolcG2LVsvW4GYOq5i7Fiz15wQaoVA/s36/04.gif", ";(");
        i(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDhoeTUXqPoV9Nbp5-PW-8Ty9__YCoTLBXcIMQK01YxEKZhhoGHABCDGRno2suavC-KAqAYS6UndSmKN5KljFDrvC9dtkj6CsF7NrxgOD8r2FjkfSRRGiC2QbZdl5TjMTeXMTg6r-N3Uw/s36/05.gif", ";-(");
        i(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKDZsPzFb7kVzo8_eanut6dFOaM_hWwGoBfDzOsG_T17FIH_AnA6CjDBjoo05bC8HR7fRcWusjhXnxNAHrJtI6C7SDBcvfgN6xSWojANokVGtgPjk-UUCsbn-mmoNzWGTZLvQcOzb2BS0/s36/7.gif", ":d");
        i(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZszE2lm4Onm5YPH-BTNclgQUnzaaU7WLz4pvCNAuO_CxuDoqryvxkoLEDw_qnQTAC26isDGL48yqKywsWOYVQRw-LRy8urtMAz-BdmFztxUUkKR6PC79RDYJXsBtiZAPN4hEzCxGQS7M/s36/8.gif", ":-d");
        i(/\s@-$+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcuzBEwhSpAx7PP0qkPGyWn7e_EtI4QggkiioeyedELRNbI1Xky8LnJz9_1nQ33DdYk1yCAaQQBt0Eu19Xnaazf2TINcb8TZcSrf68XNicArXY-PcPxnHa5EPJyfUzhL_YVRlhCA0S1wo/s36/09.gif", "@-)");
        i(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYTn6x4G9cljtfPtRxByTSxq0yS6VaT0cNAKHdj_G1Pv2gfv_mSOB5kKkZdPXlEosJqpGGzaawC3fP48mQbs5N2YU06AT-0T7Yib6YerO8xBFHp7542bxmq1d_xwGpd7QLAl1M7KwpnFs/s36/10.gif", ":p");
        i(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHxiUZgAqeNfwPZUGY0402L6S_pmmdMMzD0Uzu72kPaYqFhH7-Z-A4wMhJtPzoqtxm_5IHVU56iIn-kyIFHks6AUUPbV5Z0nxCSvEtrVvVgoLpGEyLvejbj2afZpO6pAZ8GFccF3FJnbA/s36/11.gif", ":o");
        i(/\s:>\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4JcnMw8ijxQ3aH7vqKjpC-SESPu-O5z4mHzjKXbJtJw478q4_KnVFGm6seCbfAS5T8xM5oCkT-UgF7rZEQypOzCHUSJxccU1_RIpgQiOnKITvdhLIKZtfwYrFiejrfSe1RKCmEP_fk4c/s36/12.gif", ":>)");
        i(/\s$o$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgktzgje4_qTwxqpE7biwZhDoMMlED5tRkL9CCA4rw60LZOFi36hHiDy3cA_7bRpP65psomx_noBi3fSmJk-MPbwm-7dNHMQUGsOCpefFzT7GMJWR9bbJMZCEk1yFUfxS8qTRwsfQzku7A/s36/13.gif", "(o)");
        i(/\s\[-$+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMvdIHYPLEoKri67cDNmdsLbC6hiDxDpuUqX2SLIujsTKNdBuvI7xepHTYdJO3w9YV92ZhC5xYwZwzuNIBkZQSt1LLG3ycQevZmGsjeh5dWga7DixPGzil1hyOms8AemCh06djfOlMpHU/s36/14.gif", "[-(");
        i(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDyRUHx36zV-zsK-GfnCVbkHsvlIDELA8Ddtg_8ZvIJgONCEfH9ZSUl-af1FTGHx8nErTCjuvAABiyK3tLHHW2vQi0Z6UQggOynzHTbfw11ep1MxOEiGu6FWkh_COWNmA0i4kJpU012p8/s36/15.gif", ":-?");
        i(/\s\(p$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQyz9gRkqg664jIL8Ytsb_3jc2wSl3EH8UxmG7CSzgw2o56Ge4N5youxUjE_CVQacJXgRnXbr-Zu2R0DV6D3-Fk4oJl1-A7jF8dsjOzbMppV_ukayGHxXQVvvsw1KcV6puoNjehPcZYeY/s36/16.gif", "(p)");
        i(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQXssWZ4AmreXYw5gfuuUL71df4lg6NnFgUg-6ur3ge-9WJCnCFD_Wp_TDybRigmnL9FR6aV0FjjKxY-bSCfesr4a9-XoUFOaYRXS_obdzeprZUxR-VyMADutyNjj1S7sZTLFDzq1Novc/s36/17.gif", ":-s");
        i(/\s$m$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr_wGnQsaClJfNN9M1zT0EBO2QGzEZ4nXN-HKkMXuDDsCJWPzPboPgC5upxkmTV3Fv7x9pJqyEm8uPIyPV_wQFTmGYXNnKCLjo1CIkPw_6aXKhAsbtuQbBkUPyMyVNsnLfcsHimiXFCDo/s36/18.gif", "(m)");
        i(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVd5CayXPvI5nG9T04g7KylLxdz1avv2oxcY8fxd6PUa2rHVcADSyB9IZHVuTblp28F8zB5SN0F0NvWKC58pRUUSKWhSmm5KsJCY74Rhi5M3vdPv-ijWTN9okVdoG2l9iQg7M3iNgbfMA/s36/19.gif", "8-)");
        i(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO-cT5WFUvOxxN-3XobxwxS59Pxd29foXF_wvFlYLFw2A5k5iLbua-2MTdt6LTdvEVl0wRrO8aLfVBy3oP88w3XAN64G-JbPy6IS_GJBdxKGoTI0TnCfxAeWVCndNsblWC_NBBk_ShhxE/s36/20.gif", ":-t");
        i(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXM7Cc-RhYL_FKftVcr_daYNkcfRjBuMva7l8ulFG3mvvBCv7gxLOUuPTWfg72EKJgWezzom6M-0DBh3R4Zk0mw-i4IJv-yaikNxqJQtvC173ybwZMJGIte1yP8-fo9mqlSSG-Yx4HrEA/s36/21.gif", ":-b");
        i(/\sb-$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSFoj5pTNLcTf5KRyTKbRD76iof5jMD4y9aVqyva74USfiBEdQEe-6sT5GDWlsGeXJZSDgYUKbOVn0iN-u6CxOfU6u4W87qTAI_8uOfkaGgrr6SG3pL23T42aOG-hjpEVSptoxjsGuISs/s35/22.gif", "b-(");
        i(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPcARn7QRngZhVpGzZZiOoZ4rN7y36r4SJD4olo86-oTegqhEHE8BQ4o5JYbNga8uhfTBWzf02bCc_UibIl26ghHA01yRNFH6BDhbmmtfS5rpOBgy1USsKzkTKKOIVOyCAjZzepv1JdyY/s36/23.gif", ":-#");
        i(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLdZq56obPnlZd9bfbd1F6KZ0C6e9q246Vf1aFal3-BU7tcry95N2UQVQ9JhzwZM87rwI_lB7P5JRjczUKubHtStw2te93-Bt6szJ_HwHll9KKLrxWacArlWjd8F6sfI8AwszEHJ-Mp9g/s36/24.gif", "=p~");
        i(/\s\$-$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsFbcafE1Jk8UcpavAI2TUjgJ6bh10b0zi1FZ3CMuOBUekKPAUyfusb8PtyjlB46z-4v_5KZQQmrWf03aXIAOz-Y0ahhlB4yjdQxlZeJfF3YqGRwJ1uglCWI_m3Np3KaqbB0DCQ5NmuqI/s36/25.gif", "$-)");
        i(/\s$b$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTB5oMyCtgx4Tu188mq_3IadrjxNtEgF5qCg54-dBwfoDDf7fnNuhG_ZYZbbW8e1haUtieql0Or6W1MmWWoBpmtJymhfR7VBtVcHnsAUN2NDS_hDXwwWGcqvlTp2X4C8xTu4GtWi77LOM/s36/26.gif", "(b)");
        i(/\s$f$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPPf95iD6Oyslb5fyvNyFUgGgCBibqIxsraqDnqa2TFbOobOVj2TK23GYfikoZgEK2zsWTnA-ygNS-yt76msvXSCkb9JnT45WITMCV5cDphHKHK13CU0xbiduzrBYDHuErvaGLyowuCdA/s36/27.gif'", "(f)");
        i(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJrKZLRLeo6B0fapc1pDNUQsZUA5DDsdsMfbEXikjQUcLm-vr1tw3l2GzdlAtU94uW_6Z35cFDBBdWr-LqONNxLwbopEtp75rXNQYX8t_lDEbhrOvzOG7w1G8yEb2VZW8Ye9BGBaLdNQc/s36/28.gif", "x-)");
        i(/\s$k$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhihoz1dB37Kjo3K7_e_CO7238yEJHqFsRT7DOImKhqa0q3vHee0ntWO9KTGbWO4CYfQKQlt927ERdB336YwlmApBkGZesIOhWqfV-ynSuevtPjBX4-vuvHlaCPhE8gIPMFspQbJkajSLg/s36/29.gif", "(k)");
        i(/\s$h$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPONIiAdYf94mi6aoOnixem_HNJzxN0yNVmdv21c8dXhPrbK2DuOiyNrTT5KBp2K5Cuo4oba7gIyRXKqE5JwJYQM4WF3DoUQp6mO-q5tHNGAGFn40EyztvywRAv4ox82-xJLq2lXmC0SE/s36/30.gif", "(h)");
        i(/\s$c$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh54Q9q9XwzIIgqfirA6OBwLxZ8nIotWUmxTPvEEGScV60qxwIS0j-8_Z18RuU76DYIXj6ZfN1osBWslzq8x08qpRtc4ITHXfU7soBoGGU6JKxCRS4fVplRiUuNQC9R4ii31tduPgv8aOQ/s36/31.gif", "(c)");
        i(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU64wKzAJV5zU66O08jIyHaOXup-FeaWyu-mcQe7dj0MJIqE-M6H58yxOAOpV_8ZBOJ6t8vRH62HMpUWtaZ3_Lp4XogRUXmwU3LhIwUbO0j0rqSiYsswy2fbLVt3gWwS2780EZz31SyBs/s36/32.gif", "cheer");
        $("div.emoWrap").one("click", function () {
            if (a) {
                alert(a)
            }
        });
        $(".emo").css("cursor", "pointer").live("click", function {
            $(".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>

2. Kode yang berwarna MERAH itu merupakan simbol untuk emoticon. Jika ingin ditambahkan beri jarak atau satu spasi dibelakang simbol yang ada. Contoh seperti ini

:) :>) (12) (13)

angka (12) dan (13) merupakan simbol untuk emoticon baru.
3. Lihat kode yang berwarna BIRU, itu merupakan kode emoticon. jika ingin menambahkan emoticonya lihat contoh seperti ini
            i(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU64wKzAJV5zU66O08jIyHaOXup-FeaWyu-mcQe7dj0MJIqE-M6H58yxOAOpV_8ZBOJ6t8vRH62HMpUWtaZ3_Lp4XogRUXmwU3LhIwUbO0j0rqSiYsswy2fbLVt3gWwS2780EZz31SyBs/s36/32.gif", "cheer");
            i(/\s$12$+/ig, "URL EMOTICON ANDA", "(12)");
            i(/\s$13$+/ig, "URL EMOTICON ANDA", "(13)");

Silahkan anda sesuaikan sendiri

all script by : MDF