Cara membuat emoticon pada blog

Blog pemula | Baiklah sobat blogger, kali ini saya akan membagikan cara membuat emoticon pada blog. Langsung saja kita masuk tutorialnya

1. Login ke blogger
2. Klik template
3. Pilih Edit HTML
4. Copy Script di bawah ini, letakan di atas kode ]]></b:skin>
.emoWrap{ background:#ccc; border: 1px solid #333; margin:5px; padding:10px;}
5. Copy Script di bawah ini, letakan di atas kode </body>
<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/AVvXsEjTVEhhX78D2f08wRIkp9iG30FtryPPrcMcGDV9-_XKvDril7wB2-djOCE3AZu-9P8WGOus0SLaGIrHLvkLpvEmVX8_WtYR3a2jYLV08RW7AU4kqwu3G5NOh_8W_L-PBlAgTWSTaQQvig0/s36/03.gif", ":))");
    emo(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUFFkbeJsI836T2M2m4sOZCu_ti7hh5qIsrHJMYAZBHfT1lx9tHLdtRkGxe_RJSjiPyt2qLQJxbw4UcOMFj6v-cilZ18vRYe1d8iGFyRN_BANvOHg_aN5sgyDhGf0Tr3MociahtFt_anc/s47/06.gif", ";((");
    emo(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMpUBMSQix6VVkPFbSqoOsHS0hCiueiba9Wb2NMHaRslNoQvHsSgMtiJfI00yxphm3SW_26asamH5hvqd0TGRkrA7bijsT310RudYcrAo3j34UuNEv3GY_SmNBe4gx3fUgtW8GWGf10zE/s36/01.gif", ":)");
    emo(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU4u6rm2V-AqchY6VV-5eX5_Kp2ptIVMh_4y39oXVUa0sHF8tUqriiYtGsVXKR2-LUUuFJWUVPdiagv9uT5diwTv10RkC7gE_xctjnXgYZen0KviiWpIdjtt1LtIxekRvHgHUL4zVyDis/s36/02.gif", ":-)");
    emo(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3o5bdeBL2ibi1O1RqhULslYY-cH25U_7VfoTNxoOI2GYOw7I7WBgyKoDfzdmmQpiUCP1mfpYm-L3SwY9iiNV4irSS13JIrc8R2QopOzNY1hDjaePxmbAwurytF7qhHti3pA7DVGG8IKE/s36/03a.gif", "=))");
    emo(/\s;\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5m7VaoOY3pySy2Vt-y_t_lQ33HwicGYQ5GMfF-8DzJHbXDijaPJuiGpE7SuH5P1h7zLDLdLfSHfOm_hsGs1V3aYl1DB7W7RoRgF1of-wI6hSsVzi9eEHeSa-lPYcJmkIz0bb-4X-CZvQ/s36/04.gif", ";(");
    emo(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRvYPp0lhX1YX3pqOSf9ZKnZIrkMSUH07I9ciXZJRdnSianLjy_yhzkcCAZlnJi4TVTGn62hVdUAmDJnqjozO3oeKOr3SSv8lOaVIXK0paiDT2q7J0o7O9MNYHDXwiRCGYreve6ClQ8jE/s36/05.gif", ";-(");
    emo(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDMhpOyG663X2mtHRhyphenhyphenrruGCurunsas7UMp8wJLEZjcBW_m4R1VYyAEJ3hWelvx6przKqf04w-Fo3oa0U6aMYyNyw3f9hR7fEeN2cky2UhxbUJuCSf366b4_5WZIYerDN2_bvFPFAcItY/s36/7.gif", ":d");
    emo(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6LWTt9mg4_OYKHsue-hZ0o6DkGhpEqL3ZPJTTO3mcU_Oqb2rrK_cE9GBYQnKObsQJp-WJZW8_De3A01YARNMCfu8UhPLVzjT0bN91qBs_bZxadrnCdTbvTs1CTkz-3BsW2DH5sMadKCs/s36/8.gif", ":-d");
    emo(/\s@-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnr0o8qG2oMuwEF0jrshKHwEwRGyTUwnYAV07akLHLm78m8WyfVzT6h9xf6h9VkBAPxLygrubqhSuuxvxLQ_Qam5TbO-f2WFaeGi914pBO-4bX-jJCkxe4XMpJCLWRVVm1zP38bniKAB4/s36/09.gif", "@-)");
    emo(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaogWwOO_sgKzpatTWHFu99xb0kQIrmLfWORWiXatVpYJobi5HHVP1dupsZqSbTQG_evX6IUEG-xxRwR_DBNDDVIiZHc3LyRX-xytAwqcoNEg1A1sx9cJBJYJzo6zHir9H9oGgDPIhuAw/s36/10.gif", ":p");
    emo(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYftN0rSDNktE4ETs0E4jcaf4U6Ays13StloziiRrZnQCG6UbSG8WzYpsKC0msmEWwSG51Mt5o9Zh6C4qVVs3nzBmOh6HW9P_VUmUT5NJCjyaVTnYR6G9CsGMPc0SN8xUZbCNebylryK8/s36/11.gif", ":o");
    emo(/\s:&gt;\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9mvidDpgub4Sp_XUEAbPdzgpoANDP7tIhSxMMa4sPRXv9mWBsc3dnfF5gKDeDa_kx51se5FUmVaw354rzEtFPA11KDZwz7kyrOwKSfwxQA9gkHxqlHzfuR4yksB-1IvTwfjMgw-7dzj4/s36/12.gif", ":&gt;)");
    emo(/\s\(o\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJOmav6l0sATpaZ4p1rWnFJRSiAF9qxbl8ZFofKKUmwuY44JsBcLtLzf0iot86mPH6X6okEIa7vSMQSG7O-bEToZMZ8OVeGtmxrIqKDsH5xzRkqcccv_Jk86tqhfpHUyELjF0-P7_t7VA/s36/13.gif", "(o)");
    emo(/\s\[-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT_fM7_raFOI5Dq1IanCbWZTRG4CJ6WWbZVGV4aZVq63OtMQsZ2IEdqlN-pmid1COtYEjAl3xbbt0o5y8FnyOPge0yqoEBSlmeDhgdGylfM89tnDwFx_gZQKh2QPa0MrIF-XoqAzF4CT0/s36/14.gif", "[-(");
    emo(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6JuJGTfdCwB5eNGl-CfQZeDFotlTGvOkveHnV3RHCBAaqRAr4Ky5LuzfwxgCntSRQ54rbgh99a6B0QIbKinwNuJaC5KigcnzOotvZEL7EpIQ_2lY-JS_N_KK3Ek5uC5WB_CP9IFkl30/s36/15.gif", ":-?");
    emo(/\s\(p\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUERhiLsWbhyRM0G-ANIKjhcMcgMabb89qLX8tPBa2jLAk0sdFtNBXWCvQL0ApPUQYykalw9dAmO93kRKBf7sUsFJxO-Sqmh78wHd_Bz5ha2wRQJl6cCDfNKgSQFSH4cNEXmPKmTRNK8M/s36/16.gif", "(p)");
    emo(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwGWbgOpX6mAqDK8CiCEL0icitCOIQvNIjwCNbGWnQFivNn5p5bgf8IxHmh69mdDJAaYk3Ew9nd0jy39gSTiVHSIJBPh327xg6gQCh6TYLf86CxcFAD0NU1xvMUr7d0FwJ4tPlWa0S1f8/s36/17.gif", ":-s");
    emo(/\s\(m\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ_GW1Gsl2aZsQljr_gOLuIxyelIUbHEqDmDBHdgzB4FtQAan80yfK6dJEeBIOWzVTRJO2y-PS8RHwqy8sm0DNc7W9GPO91sIQBRZokYrnx8LP8mApBuS4qG1hQPJAIZGJcSypvfhZ0Rg/s36/18.gif", "(m)");
    emo(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXmHifVqnRcjr7sDgZ9oj_ZaNKpJKqJvWnz5L2H2uUl4goKLzTTIQaiNioh6azjnKC2dmQ1AfUK9SwrVDJfnNtQJ4S_FGaq1iY2E3ckg9UgN1yNmc4LzZ4tyNac76jOU1f5Z6R0z84_f4/s36/19.gif", "8-)");
    emo(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjN_VCyHQXqJxlBbxAd-0wPk6_qXoNtEbLKGRMaya1c0NynnNcEPFx1Mm2Tg6iB63ga4OZl7W-_SYciq_0AgsM-fZUzkv_5_c4M0so3YECb-pbqF4EHPSFfR5wXqZD0sEXNa0K7VsbDM4/s36/20.gif", ":-t");
    emo(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmoreFLsrN_ddbLI0XeI18dQQAxXrAFmBlfsbKZ4pRuR8yyuLRAuXs0m7ou0O4g_jTOnDSxKVWHP6C3dIU5EWV5kI5zzwZa7TjGUkNjNLWwiU7Ldylic5lDjFTX_86J1x1pw1zVnxZ3fo/s36/21.gif", ":-b");
    emo(/\sb-\(+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu1kOFNnXgPIvTaLNQ4nJU0dHKHs53n4IdDrVNYAVgEcZXJb1n4_G-LbxMITQqjLNpPvRpM9OI5ZO8H0NPDuPL60N-DTraM6eaO2veIaESWcSlfA67aaH3P9YluQH1MJpRn_Ue4D2TuGs/s35/22.gif", "b-(");
    emo(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZy70au7GMBoAKKXy48EOkL0VwSErT2ckRzlPhCE7FykL4u_-i21wczKlWw1zV7soT7gm38EZCjLbDXSG72iSGEPCp_6-PF0RYDQvJ6jpbiNKi4_SAY9EuvETV6XmIkz18gJ1rY0laJC4/s36/23.gif", ":-#");
    emo(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisE1bD8AS3reLa9I-aWmTG0aGPK8acx5TOhurtcAHwqqiztYwvO5coqhtgLTWwToQscoBU-m_-grSK02pxTCa52719yUvXHSdGXVlPRodoEvVwJeaw8g2PJoKrGRJKl3jymglxgJT3MXM/s36/24.gif", "=p~");
    emo(/\s\$-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIzRb8tU_g1B8UTbc2twrV5BL5aNG0BYfMu36bmSkNyiqnPlrogKJaF0S8I0L6yPVOqXQIiCPmKnQKo1gcX9VYVxZlakg3-AiIDT-BtuwhVz3gipUpWJ2VQ3Zqiet4m1TiG2tRDgN6M_U/s36/25.gif", "$-)");
    emo(/\s\(b\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheS7wwFtEMITzyR9ZkFJQn-ACXcAtvunhPOu5FVRIowH34uaaN8c4tfku_mNE019NWzMdc7thpxKKIt17rsnvVt-N6NKiwfN_hNKe5gru32qepRLJbeCmVjeofBCCIHf7Ph2QoF50UuwA/s36/26.gif", "(b)");
    emo(/\s\(f\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ4T_cs5zZbK1xvGFWU6IZPRQs_bLVLz1ggFwuF-twc4lXatT6kc4zzoXXeMM_U8jsSG0MW3xdLIXfHBCnP1e81h0WTUOR7E3IYZyi_iTrwMQAcSJRHkezddF3YpiB4k2dSntJzPiJA_M/s36/27.gif'", "(f)");
    emo(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjph_ac1YYFV_dO23FTcIJ68XvIINDMTEIFMfsE5YCTaVsGUvGcgeKZ6dR2jCykXk1RGSit32T-tk4nuT4azN8ktMwiBgVXvQ-vHQYeMoj3pzWerbTpkd85lJsQVlfV9wh0tROtfCT-jAI/s36/28.gif", "x-)");
    emo(/\s\(k\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhubEQCx_e3Y_SyDiOVbdEMIotA1632bhv8UfciwT-4O041YF0MggsJDvFxJ8_s80jetxe_IGY_6P-oJzC6SuicsrBGUPjZgxoRiEkiL5OfY8HagEKeya4GDkpNAlCuNuQIfp7OGxAcTNY/s36/29.gif", "(k)");
    emo(/\s\(h\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9wwWrOE_2mGBxCZi8_Ip2OTQEojp40cRlmVdCVRIzaDVe5lYwgc15T0Ofw7klQYHGzPYSon5iV3KZAno1kTFEIWJRZnunqDKVYVKfGISIUdE9McsWbAPIRWpZBqPT5iUEu9yHwwzVG4Q/s36/30.gif", "(h)");
    emo(/\s\(c\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJh7k9O0Csd8zr9-THb0sSWfkBZJcCGE1KNU_V40k17FejjkK31xj6g2zqf9zQUcqgYx18dLgJ17PnG6IobHw1krrCMBomjQcm9i0QPhCAjGzB0NfkEFuzvaEkSRj9mF4oScdsFCY02-0/s36/31.gif", "(c)");
    emo(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqP-L73Ij9BBR0JrnSm0M-RxCsj5ep4mRc_GqUi_kjsCQ4eoOYRVLeraYYLaZvc9E4NBOW2AdkPStSeQkhKCsw8oeU5Ym5o1gZpqtRbubvgaFmWsHHaPYehnMcX22rH5pV6106rmfMDPk/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>
6. Selesai

Hanya itu yang dapat saya sampaikan. TERIMAKASIH

---

Apabila sobat hendak mengcopy artikel ini, Harap masukan sumber nya!!!

---