Cara Memberi Emoticon/Smiley pada Komentar Blog

 

Halo sobat.....!!!

Kali Ini saya akan memberikan tutorial cara memberi emoticon/smiley pada komentar blog. Memberikan emoticon/smiley ini bertujuan agar orang yang memberikan komentar bisa mengekspresikan diri dengan emorikon yang ada saat memberikan komentar sehingga terkesan lebih hidup.

Ok sobat, tanpa banyak basa basi lagi, berikun cara memberi emoticon/smiley pada komentar blog :

1. Login ke Account Blog sobat.

2. Pada Dashboard pilih Template =>> Edit HTML

3. Tekan Ctrl + F pada keyboard, cari </body> kemudian masukkan kode ini di atasnya.

<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"> (a) (b) (c) (d) (e) (f) (g) (h) (i) (j) (k) (l) (m) (n) (o) (p) (q) (r) (s) (t) (u) (v) <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\(a\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgep9_suhUL28_hJHt2dSR1WJbwfEx7MzSNtjuNo2fnXk9efOHoeTOhF1pncKokgrfKfTCg0m97aQbijg_JiHQgfu1dnRvRjgRka-2yg5FOD6PIq6OwD_lpkhVW5_r8_1CUQnQoxSPOlK1x/h120/sundul.gif","(a)");
        i(/\s\(b\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRqbK7XzZLLLvHKU25SWQbZBQInyWc0X1GIX5G4_kmakBPSjHHbmo2TWcUCKoMKr2opkhIuADde97qFjkZ4WcWAkvT2paylKHirvVXyxgVhqeBuCRImXzy3SQKdqD_vxBZFhLcWs0Cv6SR/h120/I-Luv-Indonesia.gif","(b)");
        i(/\s\(c\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5S0PTUERHNQI1a6pYUeIAiILSogbe5vsUXtMh3fDjzBjYu7ACR3PMTuCS2zSQgB6wgmd7Ku_wCWcKcp1JDJS33sz9ykXytys-vAGvjjMDgustlhM_c5fb5YUHEbL3KGSjiij1MfaKYo7g/h120/bingung.gif","(c)");
        i(/\s\(d\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu_wcX_zRtMY0TJfVQwzAzWxjnv2XvN9WXpfKrjp5da82MBfrn6ZXkyukdjIw1ZsFZ3qhKbJ5B2d48hV8p4wpXXIxhVlQfTGnOt6IsecIloZAt4AXcGvMy6435NbHUFKnmgktl31NTxxjZ/h120/capede.gif","(d)");
        i(/\s\(e\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidI94SrEWYpkIdInKGVDpJmlTPC5S4MRDTay_RveuydKCPlocTo7MavmppicF5m6wS8flifTZw3DehsZHZTLAClY49W3-9GgxcrOauSz7daJgx310sbM6LrE3nBtAdqGNFXuU6THcJ-FNm/h120/cewek.gif","(e)");
        i(/\s\(f\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb34vaEaY22byXCp-Pm1kuY5MyKzkVV4wBCTrTF4M9kCAd1E5Gq1u7ZlxZIfF64xF1iRW4bgrsWFf9uOZtdlQQTJsIdd_Rq5O_1hQC3k64O1sJMXfA1yffxNPMtezIlHQd3jaG069YvK3O/h120/hammer.gif","(f)");
        i(/\s\(g\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAztsllu_iVuLLD11xI7VDsCF8AQ73pGAIMeUtbrHrEawukcntRkSHdWw08sN-494stA8iw035mJfBeb6WHM4NV0fYJeHO_RaTthPJoJa-yFExir5TwFc6bggCWL3OctmNIHgYF5BRzc2d/h120/jempol2.gif","(g)");
        i(/\s\(h\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEFLR__FJ37DeJb7pwvbEDsdcdqr6BEmggwoKtO0x-blS2vjB528eeerI0o436vQAg5M4h5fi-M3KSwtID582zokVftdmbe85KJQam9f6qGiB90a9U_roAu0zDwQihuMu40MumG-PFPJMI/h120/malu.gif","(h)");
        i(/\s\(i\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMJghJ_1UftzRorAusQY66jKObGrqgzj0di4P7NyccF6PHfiFnHuENmmSLPjLlQZYg0ezXDoir4399-Ra41DdMjcp-xgoWW692hfnl56_WMsevav6W8p0oqYh3Q68oknwCJDKpSsQkFqAC/h120/marah.gif","(i)");
        i(/\s\(j\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcH33ScZxet5OX1woSBTuQwJUBX0IDwQIx4jFEeFpmC8xRvgi8jUnlX4qtrjsSCinXMfGYdUVTD6PWuRSJROCGoXnkTHCXrWsMiOWeCjgxjUF5ym3Qepku5FY3wE2QPUdAjhu5_uuVAmh7/h120/najis.gif","(j)");
        i(/\s\(k\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibjbnQB0HY4WBdsQG4HTDBoqPiRxqObrSLLeHVwMD9rezcLNFrhL0xbkyVNsA-TzT71ifenLBcqPundYwT-m2B7fDaO6jY93VKuooTWxM8foJ26fCu7rnLXEzFNC_P4jTOm3NVok0G3Kyy/h120/ngacir2.gif","(k)");
        i(/\s\(l\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJWuqxqUtKNNvgMuc3CD4UPjQx2OcG2q2WvuRxAuOxbE-CD9-T_iRfYLB5GxaGC7909BOTyF47SsMYScwCx57M0S5bX7cmlcHb-wdeo1WALtQdZOeErxLUf_Kv8HWNunprjkoZDiDwnvAG/h120/ngakak.gif","(l)");
        i(/\s\(m\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglmeH26MkVIgUT5LS2F2-6Xr4-7W8nbIUIKB_SGrYpQkYsoNzV_tZFiodp5LqrcL8H_wplGjUmZcWZe2RMwN_0k9eRUZIFii0Im1oZmN2d7S6DmwayD88ie17BdGEpi5AMXmYalZNmXvrU/h120/s_sm_maho.gif","(m)");
        i(/\s\(n\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz0Z0-cpyaxRHA7dKdk2zTbNpcr_jYhTsmHfQidfuQ_YDVml5p41LljJKny9YMJPJcz_DWE-l3_WP6Ryuv2T_BhfdUkja-nUULcseefo_ubWj6gRIYu8XW0fXXSlTAbUBguhSxM1JnGBPm/h120/shakehand2.gif","(n)");
        i(/\s\(o\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivmeaAJZS9SE-bLKqe0DljxUBYCOS1hUZHjowevKTEAGP0YLY1H8Hy6QXepdEiwCcdVuiXvtDJzKUkDORx6mnRrjNtLpILAbgLBRTtik1NUwOTZ3C0J0JSuGg0eE88-fZW7Uq5U5p-7abE/h120/sorry.gif","(o)");
        i(/\s\(p\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFtyGptteeVQbjZn5Y8oU8UMwIc6IvpI6QcwqFcJGxLWaiY8M9263WWe7G1wsh2tk0jv6izvwOPxV_qGcVvq0zmvaKnHrPBcHLZvj7QbhPk0T5wDgdV12wwg7qiMkWLVA2FQKrsy5WT2LQ/h120/takut.gif","(p)");
        i(/\s\(q\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyyuWdOPWsQiLB__p5uWXa7K9Gw17wlvzJXcsbYNfyGHX2RsnwiVBDcrnQF-SOvYCPkHtefkOIMU19jtLkWtxRjzoGp3i6pZmDqj2hRZeQZP4cHmF1K-nKFVpusa35C9Ib2GxNT8BBqsiM/h120/kiss.gif","(q)");
        i(/\s\(r\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2J1pBhlGij3UAjquu3Tz4up-TFVYAVWlvKOxQUkJNAXNMbBqIKaAiZerXtITURsVnKDnum0D_q84TyKkaD8cXXmJ7DnLPdjZU5VeDQq7kQB11Qn2Q2Pt-txVfcnvUGpZ99OkGsXkc9c5D/h120/30.gif","(r)");
        i(/\s\(s\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQtWl0O0Ct3pIYHlv4O5oV95TxROeRiwAFk58kcnr6OwCCzIX2XMPY0US0ZZYdaymNZ4fvPElpOqJnUizgza63R45cSOhNqG_VHH1WjrDcmmJZYcz_15EUgSelHJpaJ1sO_QeJCa2AXqwl/h120/05.gif","(s)");
        i(/\s\(t\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE5wFRsC-pdoQzk3-UNeAAQp2n4RBflwjEWNgqEIBokybiBTuDYR5xnUAdOEip0XV_HUQFcoq1YmGC6ih_-YleiVK2TFG5Ay2p1cGrSNdJURqE37xXu-r2dLUDgFn28A9izCsYrmHJnFca/h120/17.gif","(t)");
        i(/\s\(u\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_UN9QUXPJKE_oarVVyOryr6XeTYbOmwLhzziCqccixaN5WZn0t5LfpPyDB1CYSS5NJK6MUwzIZH_yfEAqdvCwkZeQ19rXzJBjm_qyoG6dD9QLFzPDNwPPpDNf0TLhMq3sHgSCZooNW57W/h120/03.gif","(u)");
        i(/\s\(v\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCdfgfAFi4Eit01jXfH0Op0WmkqTWgPIuDTzTO_GBKXblwkwAgQhRwLl7vmvRxMqhl5Nn_7PLyM-CTHahl0L_XShyphenhyphensFQrvEm6ltKESmzv7TvZr5okP6UXij9elSPFs-kTp3jjC44AskTW8/h120/09.gif","(v)");
        $("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>
</b:if>

4. Agar tampilan lebih menarik, masukkan kode ini di atas kode ]]></b:skin>

.emoWrap {
  position:relative;
  padding:10px;
  margin-bottom:7px;
  background:#fff;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(right, #FFFFFF 0%, #FEF6EF 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(right, #FFFFFF 0%, #FEF6EF 100%);
/* Opera */
background-image: -o-linear-gradient(right, #FFFFFF 0%, #FEF6EF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #FFFFFF), color-stop(1, #FEF6EF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(right, #FFFFFF 0%, #FEF6EF 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to left, #FFFFFF 0%, #FEF6EF 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 #6C2100;
  border-right:20px solid transparent;
  width:0;
  height:0;
  line-height:0;

5. Jika di klik emoticon dan kodenya tidak muncul, masukkan kode berikut di atas kode </head>

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

  NB: Tidak boleh lebih dari satu kode jQuery pada template. 

6. Simpan Template

7. Untuk mencoba Emoticonnya silakan klik link ini emoticon-comment