» » » Menambahkan Emoticon Pada Komentar Blogspot

Menambahkan Emoticon Pada Komentar Blogspot

07.11
0 komentar
Menambahkan Emoticon pada komentar bertujuan agar komentator bisa mengekxpresikan diri dengan emoticon yang ada agar suasana pada saat berkomentar menjadi lebih hidup. Kode Emoticon dari MKR-Site dan saya beri sedikit tambahan CSS agar lebih menarik;
Berikut cara memasang Emoticon pada komentar Blogspot:
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 == &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 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 (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/AVvXsEhXwCeghz0Ehb3SC0tdKnthdJ2THHKlkCjunsKdg93K2JMKcH3svlmM0jJpGo3GArVAWTj9c_7GIWvtNYDpF0Q8_ETXiWc9MkV_wQBfrmMH3zBw23HW9Jp6bAqv3oyaiBuWzwiRwFa5Mq4/s36/03.gif", ":))");
        i(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs698u1qWa6C7TOqKDSFr47MXPXPWU7Q7Zr7dfwDAiFhCF_Bc0JT_yfy4ILlTn8WTfKK8t5-bQu5ClqXaBOrRdxNGJZ2fYq9MHqdhPoLObAuixpEKUS65-4ua2o6oNo68wwBbBo6uJGnI/s47/06.gif", ";((");
        i(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiukPjMd3O_a6FiN-v9v7sOJN4ElDRfPrEcgNlzLCrW7qp2scXebJayAbqevZMHgzybmQ2Xq13HaQ7c3bF7h_JqhLtuc97bupLxWtlXbbFvzWL5hGs05nhc3OkYDuypZUmSUiu28xMqYeI/s36/01.gif", ":)");
        i(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6i_zJCGnLAObJozdQ6ufnkeEhvCHI2K5M7x9yLa6-uSIdAj8OT1DwsE5W_gPhd_RG7HN3Fknb9Qru0p8qQ3G2OqppGwNiccsxnELfFvaEifus_6ON4fN_jaHzNv-1lgyuD-Cdi7rEc7U/s36/02.gif", ":-)");
        i(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0a9y1nznoT8f-CnsUK1SjdLPpF0LMiYPWIbTjwqMcoh2hrKK9-d0_r_8275bOTIGybhU8t00g8P1DH3Rya-Q7CBGjXAnx1kXY9NLLEqawo2aZubY7YjYw1u3K9tz8sPGX_SY4PsoiaI8/s36/03a.gif", "=))");
        i(/\s;\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5_CEvs7lbCqPtFnW3An7-AQbwbyQaYyHQl3ZHgwddlgfnAJyPn17WjqtZbfM3x279C34bn1RxU2WMjPlOUoyACS4en4-F0_PbvB6-HGnmaEiA2-5bbOy_zfoihKa5Xk6QHbr28lQqorc/s36/04.gif", ";(");
        i(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgREl17jIdg3pJflrdNIcRhH4hCDQ3nHXqz3cIGiODFAnZI6q9yH0vjrP7vysRW_jY-AWKoKszpC0lxs70N7gaU_apgsf_YInNquk4Td9gr1IoTsSGxwagbQ9mmEcjQUfA4T5sLZWDyMPk/s36/05.gif", ";-(");
        i(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtYaw4_pDVbPBdOg86plUj6Vsmes3MevnFL_jJT-Mt1MXMmwINK3Tu_PwNcNWbg_gthOflcxzQQNbjql9E2ww3eXz4n6LLBGoUD3YOvhyphenhyphenNLxNMGfqRyFlNQOGjiR4-Oc44uzvvRmfs2w0/s36/7.gif", ":d");
        i(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiW7xXVgF6VzBktedvWdepj9yhsIFVULyLQqz7vOIzKCgrOsBgvBMvgrc83jRzMe9lfUJhwDj4MpuVcqNW2HsO9bS0dXwuSrFLslmIXJdJVCxa3WH45m2MbotBCmtAGEib_a7TzfAxbsI/s36/8.gif", ":-d");
        i(/\s@-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizGjDUjh5NdY5yMyuQ4Ghu9GNiZTzJOdcEpmrItiaB_0S261RCjLz7yyqRWdD8LITSEcnBJX9CLAR4qloCSSgSyomkQzfMmg2ujxEjx9v4nSMs5FCeN1ooEs_G62mJSc5_Sf4nLCxQpNI/s36/09.gif", "@-)");
        i(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWWluVpmLIQUEqZ_vQrQK51w6RYux5pEd_1D81bUIlwdRtNJjyynA1DpTzGNBlFZXbxA9KyrSL_RujY4fzh05v8NYZxm9VEWHlBG2OfiqnzhmtBHNRQGvZ5SX-Breq9P7Uw4q7cM7vFQQ/s36/10.gif", ":p");
        i(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhljcEwohp-YCMPBVWpzBmSst3x42BK3M4bIbIbKfHXyjJsHYZUPFS-eSyksa0d-3Z87Lfm3hxWnSrjjwkPL9V9NLYI6wyWSTQx_NFOoN7y2y7b6cc_suQmiGTuTQ95mMI0qh8AQ-y6Nzk/s36/11.gif", ":o");
        i(/\s:&gt;\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhY5aanjqYkoZTEdVsr5OhpCNY7Nyz4uxwPwt5HHPhq8GwCEk7YVqi3_pZkkevAjcoiFbuanaV5BPlOyZ6UkfwJsg_kCJz_1qwzNqH6Jj4ub7xTnrblODxmNqb8TRfRatfQVgHgyvGbEQ/s36/12.gif", ":&gt;)");
        i(/\s\(o\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_aGgE0ZVdQ-gFNfeFzS2wUTpAjEyEMz7b6l3Kk3wDlAX35u8o5zbaZRQes1BQDEeBiECkcbCulMUllA4czd1q9-wZGBHFoY6EsBDiaHb0nn7Q5VMSBdtwIJ-Q3kC68sXpJpaHtFIEx2g/s36/13.gif", "(o)");
        i(/\s\[-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-jGbMLLzgm3imfbKciwCGbBXZkdCNZAaapLsq4Q4M4DCCuSbTnVgJadyXxIp1O03oMH3gaHyFsfrGH0TxLek7sKWbvJXcHQL1aIB76eu8iuYPNLyRu4yApapBeHzgu8YvqnRHn5p3NnU/s36/14.gif", "[-(");
        i(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib1P-o8Mf-MmQwIv0TwqPE3qU55QuZcB8zncF4awUUVzr3DgnvenEFEIvs_3e5WBKnc8fA3p735U65xCcFiB7eXHbf0xYGewOQUhCkA6Un0csf83upuE3lYSlyDG4oT8MgK5UYijLap7g/s36/15.gif", ":-?");
        i(/\s\(p\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjndlu_G-SzZWkqCEtDItxMWkjtZ3JaKB5BTbrpb6PZk-DBhqs25C083LaV31fr-I-PvTN3CZjbPVoMPu4Zw0lx1kcDaeRTidOBnsoT7o0jpaiz5jlZPnIe3O4Ot0pVdxMX-gGAc-0UkmA/s36/16.gif", "(p)");
        i(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY_MZIaxkoqksY53kXeehvpbuznS7c10gmxILa5JM61rILFpQsrmAh8Pi_vuaY80UNH6XYbIjzcMEmmNXEHduMAnlqszUWBUdB4ZLRWLquaMclwCHxf3T-oxFWJEtFjfMktjETXlIgPCw/s36/17.gif", ":-s");
        i(/\s\(m\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT73A_YQ9yCNVUgyowiT6Mw4sY7UNKq6VYjgmCQeYKT3stJdmVBPyBEYSJxiX9vEdkHKrQ3FvIQLgQW9DNFtshXR1sjpnzp1JXgOGYQQg84LA4btfxoh9wcX68jw55tgYqDz9KHyJTgRs/s36/18.gif", "(m)");
        i(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoyYgp1FZ4fqlPVEVyqybv2M_DxvrPtuNU759relKAtON_diC-XhzJwV3My4ElBai-PW0Ys3Lc_AK7czWpQNV0BQkYE5564dbGFLxhe7qBOeYTn-baYev8WEBg-GKzuBzVyDeu8em6DZQ/s36/19.gif", "8-)");
        i(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyDibGGL5WArM_LKIBW-_gC6lr8_hdE68NIMo9l1QI1XPmOSaZ1N1xSUGU4QikcL5m56OuVGfnMTgvxavgqUlKofuVVnIcFKv3uLAI_oG1WQvOESN7mAjPYcLHUiZnbr7xPEpj1-d8Bjw/s36/20.gif", ":-t");
        i(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi95rifuW207G9XH5a2pkfHzcpCsl2G75-ERHejvZv2Ck-gA8ueHuvScMKzedv1WA9vE3fIk7fenJOrjLdvJpBroetFFZooEaXpnkZs1zMFya5jis4uL59GonBoWnVvY2g4s_3-bXAuhh4/s36/21.gif", ":-b");
        i(/\sb-\(+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIWgEBne1xGgoLR6nkOdk8xGgbPBfa2RuwrV72owOf95bVs_DC7vy0t6f8j_AoqD_WetEUDdSdA76IupwrIJu5XlVwSlAWbuIMwhFOE6gg9zS2hybk8X_kTn6MzjzLAHJ78tsuxsG4dA/s35/22.gif", "b-(");
        i(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8rWkHZN53XaAmL9wzXjwTNnsL9eG4dMjgOPoHBo1iaXgCyoCbQR0xvh8VI8P9msol_pe5A-mdd-Z5rsGQF4c6wp_fWn62JjU9LjDkAtWZ2mrLjAF6yWGhde_x9H9q4XW23fvMF3Epqq8/s36/23.gif", ":-#");
        i(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo2laUvnNxHJjv083hn-Ge9KbVMjsUxgEyk9btOlCQsAbh6-yhnl3p4C6iZqFtrC015Ku9q-8G4ha-ximqRtGsdrkiSrbeg6lzPth5WPQs1VTdxz-LHtyOfm63Bnt6ypT7ibW5nKVBU7U/s36/24.gif", "=p~");
        i(/\s\$-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZn7mGJ3F9YH2XJGBTaHBxVAmu-elhZl5e1EL6qJhc8LTRyDxp4lwOxkk6A94oRN8tfXJ4PJ6IkQhxljv37pU7O4_7S9tjNIs6tn9f9ufIrmsGdMHNS41F3h_gHIIxX1U0dAFTohvivEQ/s36/25.gif", "$-)");
        i(/\s\(b\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7ML984UcG8CqT-Ksn-EfJzG2Op8YTKnPv7tXVVp3CK9Phx1IHnsZIBw_tAyVTWr2XsXdZ38uBWzBQ1ihEFtPmmnWsjnNOmV-XsEHEenpFa_PRn2H1gFmN6tl2nRuWYPwAGcXz-7W1Qhk/s36/26.gif", "(b)");
        i(/\s\(f\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcPMq9vI4gQHE-usmTuW_3jiXGotsRbYCoVAX7wVp1XiiA23fw17Zgz3Wagc_4pRWyDxCx3Lv0jKAcU6v-I59JkCp1B3tjV31yzKMzPr4n2ndThSX2V9pGsTo2qNrTy9xWxrcJUjAdYxw/s36/27.gif'", "(f)");
        i(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCfGErFX2FHLpEVUF8LJAHjnE7eF_nvF74nXw-wJZnLP6sKR0DRG07vkGevieuAdcW21H4UFRpHOxsboTNZr7LIMo2BeUJEbLpJXM_ERijxFan6akjOGrF6UHRS1wldEYfYM7TzWIcFfg/s36/28.gif", "x-)");
        i(/\s\(k\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKymcaS5_uWobIqEmAZVuOQc0gLXGL-mRAKVv7pkwUiKMOfeAzVcSDC_dimEsMIE-EbtXgjO8Fiw5yryPkudK4uQb-wGIFzCW19Hib4M1pAOulXaeRxelZyED5En7LgaL91rWhpgR3ZVA/s36/29.gif", "(k)");
        i(/\s\(h\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLS6insaASbWUAwaS599IDKGmMBHqpod6dpSLPX90ZP5C9YNvrIVuTV0KJeKNOzr30WYqux0IpIO0KDm5-Lhkm2SHW6VYoOIcst9V9nLoI91dLs-OBrlusvUGYrg6_RVztzWtGGFLaUaA/s36/30.gif", "(h)");
        i(/\s\(c\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTwinN0zaj_Zq4doHl_JVW_IlO3oPgQNdkmOUCqYJ0nckZA-yF7YZ6gYe7SkHb-xLbvF0_jZiELtrCagBsbuPTUSVgLIKd1MXeSwLueH0qK6XChmmvYP-73hVSFEjcTzBMWJSQk_z_f9U/s36/31.gif", "(c)");
        i(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrWde6vr_QBlz7fx46EfpCVBK5NbH5ekEy7yyxr2EUoMhwX_oIMv0iCMHtfGAMnvgCO2H4Xf8mVfhL5y_7v8pYns9hK0DaxDtKR2QFMvdAQncKCTzh-BCa-M-W2G-FoamCxrhKMyXjdGU/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>
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 
:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :&gt;) (o) [-( :-? (p) :-s (m) 8-) :-t :-b  b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer (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/AVvXsEgrWde6vr_QBlz7fx46EfpCVBK5NbH5ekEy7yyxr2EUoMhwX_oIMv0iCMHtfGAMnvgCO2H4Xf8mVfhL5y_7v8pYns9hK0DaxDtKR2QFMvdAQncKCTzh-BCa-M-W2G-FoamCxrhKMyXjdGU/s36/32.gif", "cheer");
        i(/\s\(12\)+/ig, "URL EMOTICON ANDA", "(12)");
        i(/\s\(13\)+/ig, "URL EMOTICON ANDA", "(13)");
(12) dan (13) itu merupakan simbol untuk memunculkan emoticonya dan ganti URL EMOTICON ANDA dengan  URL gambar emoticon anda.

Silahkan anda sesuaikan sendiri, Semoga Bermanfaat..
Share:

Posting Komentar

Catatan: (memasukan item pada komentar)
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

Link aktif akan dimatikan secara otomatis.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.
Back to Top