Wednesday 12 March 2014

Home » , » Memasang Emoticon di Komentar Blog

Memasang Emoticon di Komentar Blog

Memasang Emoticon di Komentar Blog ~ Pada artikel kali ini, saya akan mencoba membagi informasi tentang membuat emoticon di komentar blog. Nah manfaat emoticon ini adalah untuk mempercantik komentar-komentar dari pengunjung. Dan juga untuk menambah SEO blog.

Tanpa basa-basi silahkan ikuti tutornya .

1. Login ke blogger.com
2. Masuk ke Template
3. Pilih Edit HTML
4. cari kode </body> , lalu pastekan kode dibawah ini tepat 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/AVvXsEjzf8FZwRDIT4hzdJH_tZPHBbr1iA00VDc55RNe7gtkk_oH_VV-3un5Sc2JZYJ4Q9hs9BhkMVnv7I3KyVBnhd87jqLevyR-OXbrbsjHtLvLCl00J1V7EhveFVejsOUyIs_2lrbyzlwx8ig/s36/03.gif", ":))");
    emo(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhymgiwwEkpVasNoWcY1jC86XjvomL3WCdiCWAPSVKnjkW0nFl0kBnXw2er0b1F50SzWot3bUzh9_JvRHR83tXqi1lOhskdGwWo3Z7wegLI1PYmarP05S_9V-u9l5nPxZpwcCB3fskw2jo/s47/06.gif", ";((");
    emo(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYNO_aEkxPUDOPjylOcDnvRXcFxzNLHiDMDGU9-V5t0Mp9m9Kk7MnST4WkyqKGxI3yKCRXO58brTSvkRIH7w5PVSxg9S8cYSJY5ybXgLVl-uWZl2_gDqcoyHmYwb8RWIE91dY8oxzG5AA/s36/01.gif", ":)");
    emo(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw-jkrHBwkLoUrI_Ed-MXFFNmYnSxXqjtyP6k01FTUxlL911VK34-Wi_xoUBgg2TR675GzM2CmuaHecXkN0Fg2fVGxzkdhzZu30Jj_9UMuHWOdpV24c9msK72mnIqP1tPtdgOD796hLbw/s36/02.gif", ":-)");
    emo(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-JL9DFY-y5e1DjGEJPBsPjd65I00iBrt7fVSvuMGYkjcIG2CtEwJlptkqqpFi9W8ZxC1BNQvc_dGXobEbJsmxOse-iSMVAOa3L6z6uz3f4433pU6i65W-zUA-eLXgeSlA65dI4bb0ks8/s36/03a.gif", "=))");
    emo(/\s;\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhegpnYf023Fpfo7mp00GoGCFePihLhmuCjlvzvfUjAkx2M9ixfkv59obh-55ICYJHjEyFsECGMY9o04BrKB5CnnBZBTBrt3P889PDH6_s3dxNEcuuqAccfRdSbJkKZhiH0Ztq2fzf_y_s/s36/04.gif", ";(");
    emo(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid_offclnGcnRpuKTZ9x66nNmPJT6DcIQmyKEKWR86VVrtj7WoUqCHE7sIAAJQxyJG5fYgHyYPuIMo3g-4aJ8dqYY_5Nz_-KVQE94RZ_AgT9J_q7fvt5CdaCppvcOqG8tmh0DbQCBNmks/s36/05.gif", ";-(");
    emo(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFYgAo41t1b_9S4-t-D3POv7pkbBauIbYPzk21WaQizEO6amp__Acg647swuMnMK6wknmi9uaEy5A2fbdVo10wiYUIugFyCoSgCm4J9OTmseKjd1URaPPSuxcv6dvQNu2PsbRedKbH-kE/s36/7.gif", ":d");
    emo(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9ms5bskM-Bzd_h9W_jsJXRT4T5p6oV0w2pjVz8ydD1mY24qAfk_8y4cLapurspLEJsLf-n_mlpy6wRQa4CjmrD6750GHyu7Hf3t1xc6UxZ1kiFp1iECyjyGv-QhApNkz7ptFi-YPDSpk/s36/8.gif", ":-d");
    emo(/\s@-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh7yUYw1bwzs9B5itSYTfg-VE_R9dvgxyaVAvwSJJrHcnnx9aH1kMPL9gXJT6DyiGWzBAo3nGMIiLWopd_p-B-l5a1wSVsnZv53dUJFHk0rmZUGMMPj9UClQeACxkovAWXIU47vb-gmvA/s36/09.gif", "@-)");
    emo(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfmAkSD96S7dtdur8wmasgcx0kUqiLFRhK4WLTA0RKAEu5zUQ1OfIG6afZRL1ei_TbABrDdf4L0WI99q02zgiGKjIqpth-nOZWel0C8Xke2guWvBBvBkcERuGx49bBFZCOuQuI_u8xNzo/s36/10.gif", ":p");
    emo(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcE9RLB3oSlb1gsUHNG-zD3EdW6eUhSBxtbbRJhpnbW5Umf34zMnie-Vpy91HCvbe9X3gK0yz2h0jxwFRuMzKIvvB6K-TebXY-O45RBVCx5qEz6i7z1HWE1jVbpJT917H4ioQqoh-bOAY/s36/11.gif", ":o");
    emo(/\s:&gt;\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCVQV0vKS9u-txtOXzx8fKdTtvnBWaUjEvBEjyZhI4l4XyAIiyR77yiSIcHSu2Kt3qZacYRlabr4F_rRxfkRbxbfl0yzOmpdbp7QmQZvpUehJN7HrC1hlzXCTAPb8yX4bPYUOZbm1pi8o/s36/12.gif", ":&gt;)");
    emo(/\s\(o\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoR5vbZjSaJzN6k67Hl7jO1bXs8XJILF5NoVPBhGrBd2MsQsEDwCY3g3pLb9VHhseW_ckUpcEMPncOuwSJhkZ5l-t1btnDbnv2drLl3Y8NtOODZvmMCjI004Qwv-VOSLzY5dCh33cFyzU/s36/13.gif", "(o)");
    emo(/\s\[-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtypeJRLxborCLYFNACQenWXX86SowC7jMJinITcLfcev7jZy1w7BXK5JUnm1VT6Rv6QAIFztafTLG83_oeAJp_BpkkNbGS9rq9dCWOB522uYTm8GZk2C0iE2zQ8EF6Mq5GpiqxyaN8sw/s36/14.gif", "[-(");
    emo(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihgdYoEXvXjSY73UGF7k0eb5OURlZJLiI___fPmzviFp2PlnIYfX8-ccNJ02cLHELjydJSsZmqTDLduGUbauZ1M0MYm9hZl8SY5c2aQFlvvv0cbi5DxAk1fA26E_W1reMREqiKfNfK28w/s36/15.gif", ":-?");
    emo(/\s\(p\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Au559FqMQZHUtOrXMJ1uvkUNxHaMdaReHEUznq9ZrRb5cywC9pV7GZ7P9QwMooIW9sCVT9aljBfTPF0ZBmLumSgWH0pDjrYJ51nlVMFJheNAG6R7h7c69dkCu0ivQhiFuU0xJcoSFYM/s36/16.gif", "(p)");
    emo(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6LpQd0yKDh8XzJpSItHdOFfz_lkSaC0TsxV0UTNB5ux6OhuMnIbX_Yk0tyXS62JXOPzDd9u7JeZ1sFf4zXE4KDJgW4-duNfzin_drJsh1fyMX6ch4dADREn2UPWIV9_Ui1o1HVyWCPeM/s36/17.gif", ":-s");
    emo(/\s\(m\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBroQYVfMUNOFa1MKWlQdbacMTNmdnos9FjAqgtLq9K3DCQ38wkWhhDYufi9gOLnnDQfh6tOmZ4E96xPAbEewbWAov6czF_hPs9qlujzGhPV_IwpD5sugHSXY6MNk7hjcX2HT4NVu-qJQ/s36/18.gif", "(m)");
    emo(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi_pDvUWFMnIMgMKwmXF6M93UQ1ljjyqaY1gm93Kduuguc0AcR7wLf9CyRUOZ3N0Hu-3ccekz472G_SpyXOaZfelDyPC1QS1RNe9uP43vc3oJ_eVqcLPfd9hVx50X0ljHqngZMTrAE1lY/s36/19.gif", "8-)");
    emo(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhePnXsGL10Rv9XGN_0mNRMonzPuza36gdUUOsuigzs6Mg_9LThnSUnbUmSNepyuB2Z_h3ZZZsCfycxkRFOUkHoC8zLWxkqc0j3l4zvFI5BPeQiYn6wbWQ8Z6ytrCa55BesFRKun793h5s/s36/20.gif", ":-t");
    emo(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3agfLApNeJFmnUNLTfwf2_FUyVEh1VtXxwDg5dIvnOKPykB09KUdfFFWQubChvPx-u1epT3ynHQ2EvACZXqRexAa8SX48l7VhdCIMiWKKI3zchSKQEH9LgscleMRQamK1Vgvfm71tGqE/s36/21.gif", ":-b");
    emo(/\sb-\(+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPAbZpiRffnBDjEw_HLLUaL2lp35ybyJrRiYFCgxlMYp7qUUyUEMhBKePBRmf6QHKPfXUFtL9nvdGtc-FCz8QpdtiI8Yxomy0ZyMEgI8tCou3E9FdPoobYNoun_SMXnI4oyLVITqdZ1vQ/s35/22.gif", "b-(");
    emo(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPLujOCjkuD1jXU8cHG-gxNMrI3Oy-gdKmcs1LTC6-J3wV0rvxGV5oGt5QygpImOqkhu1qybT0eFfO06sLMjggnn-6c3qZE3mUUuf_OvM53DhNVVnGziSdE97hKDRLVAUbqPM8QEyad_Y/s36/23.gif", ":-#");
    emo(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTfHCQ6N9pVP4IWYDYprvh_EET4CnctVy3LJhjXJl0LJ8-rd4CbzCPSGoewXq8LbwOO4EFJ2tv_xCdGRvhUzjGHi6aISnfk6tEqSjQlQ_qO8fDoLdcK8zxvxxr7dxFJSU-ybxaPNAuK1E/s36/24.gif", "=p~");
    emo(/\s\$-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6BRkkoL2zErUwrQJdu0-hRbresIItNF6dGTi78azzczmQyiHTmt6272T8GSVDjTZvRiWTN6-xaWkh0i1AXAUmcyE-7SPcXYpBvHuC7RgmjU9-4Y9NhpzVHv3VratKOQ8yaZbQUUviX4Y/s36/25.gif", "$-)");
    emo(/\s\(b\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHNTBNA6JWhGfF5HvRIftMTPQREX2zs7s9RtRn4Dg4e90yWOhKujFUVDdcMiiIwkctN-uXlZ6AA477iQDsBB_i2Y-7g6T0Zo7JI9zBsgJ4ik49daTSKTLbLHfCUwBatIq-P4-MyJwXrSc/s36/26.gif", "(b)");
    emo(/\s\(f\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKyYo_Upt_Xi5H7mIZsve-xDAUtfIw2zuiNctSApt3xxSIFs0iqz3G4MOAAeFAW4YrvYPPtznpe_pJAfXz-D6yqnJSWLoBbIlmorxGoh2CKFNe-cXSpMnUaT__Q5IS5FedoyyKFxlYZPg/s36/27.gif'", "(f)");
    emo(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEireozNhhicPvNvBtURIygNH1s2eFIZrpzB0gMKdkF8OQntUgRyhK4HUVSl6Jc9CEaa8Czm0giQTFo9suYPqzoZS_BHc0YzuaG2IDjcZIQ2TQN2rXa9RYwDGNdZiIy1wEqSAwAbdcHZp68/s36/28.gif", "x-)");
    emo(/\s\(k\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1qZ7IrGyOQjNIF0PUfumLWTw9K2NCWJHF0KsKuWZPQs3avtB_x80go-kiNLa2JeETeT97LEEvYgbroNicv_7fPV7wmjd08sBjlgYDmKPg-g9bloyx9HfUoLaXXAc8rjxZ9Sf_103xRmk/s36/29.gif", "(k)");
    emo(/\s\(h\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzITJd6IZUXFI2hJd-EdPAxOyoBEyfnGDnhYygckJKG7aYz7w_BQagZj-sLJz4kBNy27oGmynZMQfwG65otQIo-gikCV2J4wNy2K6d_7aaPMqRz8KRqDerp4QFC_WcCuLELzc6QjYaX7Q/s36/30.gif", "(h)");
    emo(/\s\(c\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaeWhQ3_ckbP7dDui9KFPrJc8SxJKTpCyOkFCMIlnVsgsaOak76lmucLyTOt6bY_PKx7nZq2PD1gR5aKA4sEhTG_eapOdPY9UME04Saw_T7-a40wsSKlE52NdLe9i2rtRMmyY-QdTnL-Q/s36/31.gif", "(c)");
    emo(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMsOP3tViUhKTMtCdRgDOof1SLHqerUeL3vq_4RIohWmCzQlkCjydjaSgDkpFm0pRE0W7-Xq7epio13NoW5_8n0HZUXBA6fiOgBslLCfJxcE1a83v9sJT6LLSB5xby3-vwzH6T-7ljLR8/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>

5. Lalu cari lagi kode ]]></b:skin> . Pastekan kode dibawah ini tepat di atas kode ]]></b:skin> tadi.

.emoWrap{ background:#ccc; border: 1px solid #333; margin:5px; padding:10px;}

6. Save template
Terima kasih telah berkunjung, dan saya mengharapkan dukungan dari Anda untuk follow dan share artikel yang ada di blog ini. Semoga Berhasil. ~Salam Blogger~

Tag : SEO, Adsense, Emoticon, Blog, Emoticon Blog, Emoticon Komentar, Komentar Blog, Template, Template Emoticon.

No comments:

Post a Comment

Aturan Berkomentar :
1. Berkomentarlah sesuai Topik
2. Jika Out Of Topik, tambahkan hastag #OOT sebelum membuat komentar
3. Dilarang mencantumkan alamat URL blog
4. Dilarang berkata kasar
5. Setelah komentar harap FOllow Blog