Cara Membuat Emoticon Keren Di Kotak Komentar

Unknown

Bloging Info

Monday, August 12, 2013

3 Komentar

Prima Share - Kali ini kita akan membahas tentang "Cara Membuat Emoticon Keren Di Kotak Komentar". Kebetulan nih bagi yang ingin mempercantik tampilan blog-nya bisa menggunakan cara ini, selain itu, memasang emoticon di kotak komentar juga bisa membuat pengunjung lebih tertarik untuk berkomentar hehehe ... xD Ok, langsung aja simak tutorial cara memasangnya ya ...

1. Log-in Blogger
2. Dari Dashboard, masuk ke Template >> Edit HTML
3. Cari kode ]]></b:skin>
4. Dan letakan kode berikut diatas kode ]]></b:skin>

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

5. Lalu cari kode </body>
6. Dan letakan kode berikut diatas kode </body>


<b:if cond="data:blog.pageType == " item="">  
<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 :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b  b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer 
<b>Click to see the code!</b>
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(/
:/g, "
:")
                .replace(/
;/g, "
;")
                .replace(/
=/g, "
=")
                .replace(/
\^/g, "
^")
                .replace(emo, " <img style='max-height:24px' src='" + imgRep + "' class='emo delayLoad' alt='" + emoKey + "' />"));
        });
    };
    emo(/\s:\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiggxsDo9MLLiWyiHARqwWq00C7V12UeverjJifTAm51NFzKVI8WMILYIUn_BCqH61mbgkfrGOnA83qdMCQr2u94laTtUp2uPZ_4Zx1dssuehk1sHGKcqvmmveNlCdHebfZcMEetWaFK8U/s36/03.gif", ":))");
    emo(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkc2J2XfQ3aZPdeOhYS31kK3ZGvDixkEiJyXkRvXBoAqn_H6sT7oL8uJqqegs6R7BTRzFhjTBqfDvQ4y7cUKLC3w0v_la8pQYOR2T_iI4RNRNxTOG9s1yihw6Nph3knqCmW-9NCgpBwgE/s47/06.gif", ";((");
    emo(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh9ix-mjDzUnn70sjPe8lyvLU9og7Am-kebSR4oE3yKEg73IZ8gggaHgE1aHmEKIUMY3lFhPQH1OAOkLBM0akww-3YARINUYSnzAU5vFzxiStI3T14hk2qL8AB6bn70RiLbRk50TQXWRA/s36/01.gif", ":)");
    emo(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgml5g5L-UFBLjIy3XghGQtHLVbA02A2rnhpWlklY20u6JXtMI6lphLWCVDI0yoQ0TQ4cGuv0WuyM8GPz0d6RBXe8AaWi6aziUN3WhXCd0BeiTaD3VDS2PZPiDobEJYst-72xCOWofj0II/s36/02.gif", ":-)");
    emo(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC4mOSmEJZYvfipbuUEcNFjIRd33ebIhBZ3i19l8y4Y9qSkWUhqJ3AjREHFOXetVzuu2vhwwPi59k1f8jW7q0j6mZPXRWwlJcmFDu5PIGeaJECDHU1KGkZoVAhLfM9HwkygVWg5wgpaOI/s36/03a.gif", "=))");
    emo(/\s;\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxDonMD5zKdbJ_yH_BYH1L4nXd6L1uTyUKEQb9JWljk-o2EP2R19AbVkHPzhxMdC7Mxq7SVGXBIMa-o7ZGU6KGkY_5IZbJ1C5Xcl2OENSMu5nMcUvyTPNX574SLWnBXBrN4JNlQ7Mp7M8/s36/04.gif", ";(");
    emo(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTBPXk2czKt_bNbobjoM1XUnsM7ytOsBXcTZS7F7ckYz8oXK-Es_e7WI_i6oUROjqR5oA4FDrzsNSn_kLaQUdzS9mG_a1JSD0oj_VFV3EE9TGSwVPx08tMk8jGPC1GItC9sbftVKQ_JU8/s36/05.gif", ";-(");
    emo(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEithdY85Nu5lx8qvE2E_t32gCTPfLkJYK-odSuxcI9d69aiaqCve5TNT8QZKyQRDdOBNPPR1VapvarKxo-KqFU65PHjlgm_605p9oJbRbG3NQHJG7qHAlfIy8mdxdpOiQgBSz3Uhraltnk/s36/7.gif", ":d");
    emo(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGdCnyY2jcwq9-8qeah4GCRV2xN6TbXycsANQNSeLibJXt05w_-gM-7z9jYFJ8P-69t_R2FzrqCgZ5oWKvnLWgb54oo-925QyUi3eXXh02x6ie1lVsopZfL__j-eh3SdkqNCl6581gvuk/s36/8.gif", ":-d");
    emo(/\s@-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtWbUo_AuePnZJ0-_BycZf2OBM_4iIQIDHZQ_Hh_xbpFlY_uk5cbnV81ONV0Xye06ICqOw_-PtA8T0RPmikVYvPsYss1Synu_X-8EeMhLY1trQ3-pXwsDvCE1C7LX0Ej1sfK_rRkhQvgg/s36/09.gif", "@-)");
    emo(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhivXq-bhF8Y73KuCTE1_8YpQacklFBj1UYNW27_zuUqtyJNB2YADhXXlSPPpPWtkODGa-KGBJoAp32N-feAdI4-DwIDsuVdNRGcuzODb1X0lHZWU4WdskbhiS2c8Zjp3NYyBtG2oc-CPk/s36/10.gif", ":p");
    emo(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVcF1dGSg2lnHp_UxNE3GyB6Me1734xw9jsegmgorw5IETNRORch0sM6-ngD4gPiYypyJ8fFNIPl_VW6QFBrnG_was5m-vLBNZnIJ5EdPFUIAZtHCYqWhRXJU6QuEYwu4DqjHB9eBDx-M/s36/11.gif", ":o");
    emo(/\s:>\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRh4m4v2QQkuc9GKAfYf-rt8Klex9OMcPIbRpx73c148nKv8XljGVJZ-XycfPw-TqSoThpgMg1UnJcVOx-o1-COdojb96vG1dZS-rnw1Hyozk_ObYk4etWWApp84fnEszk333UNlWoB3c/s36/12.gif", ":>)");
    emo(/\s\(o\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ0cOGoiE_gPoFr-8w0Q71Z5tAx9gvL6NX7thAKv308_ly-LQ0G3a3KJrYN3vgEKCwyJkxGtv5R6NBcbCoohzJHqN4KSU1PqDxl768EFLh5qZLBlAUYu_EeqKmBfgtT9aDX2voGTT1ZBQ/s36/13.gif", "(o)");
    emo(/\s\[-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR9CXj3h-x_yRImXDADQKtQ-SdmSjz8k-bjaP4NBW5fA3hEY7KsUgile6fmohABpYo2R8yIAI75ceJvNsxROiV3gY3ixSCXvDcN7hioaozMd-CcMOcepOcBbOU9djz7ClDph7bhGWwwYY/s36/14.gif", "[-(");
    emo(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijA3_4ggVePDbWA41X_Wc4S2GlpaRvsgWQCUHVRS1WeqR-HojUWky_vj6XalAydNiPwC4avw8OIOyRIJyYkFEJB8tUOETp_cPPEWc33T-bvDBCtfyY89WPHUGLyRVQwFBos45z51A8lqg/s36/15.gif", ":-?");
    emo(/\s\(p\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_IMWvfa7asSM8TloZ6PlnAIGKLSRJc5k0VskKO3K4eLuNpeYxv6A_rkTLP4LD9hSqPuPNyCGnzBEGhhqkOqiTOFObMzYl9iJ96sAFKUSJLaQ97-Xlqa6VfyxpZ00e42zAcfVcww5Q7ik/s36/16.gif", "(p)");
    emo(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXZpJ0yKUs5KeZnV6g9rXAtrGhsc0e71MCAS-khFDvQrA5zngMM-v65N9kO7BHAgBjdOgnDwnejYzl7EAsYwFFNNH0c-Y74w3dOG2LFK3qIs_94BCE2SMtweLeKEm0-EPlaZRLbO422iQ/s36/17.gif", ":-s");
    emo(/\s\(m\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvZj2nIqOkxL0t2bHc-7k0BRAgEN7EJjYGmEzly2BHz-1jDAJ_bQg2SoBiAhKGDwiY2VQ_Lnek3Ht9c9niMwEFoQJU4x5RDlLj1qnnlq5kj5jTzcZPndGu6g3c4_TL0cV_1nq9cDP7eE4/s36/18.gif", "(m)");
    emo(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr14AzcASQZLW-qV5gqeP-ODgE0eu7-zqS9VE_-sL6XOKWDZhGDSiV8IIVOjWREDCJlKfIH_t22Beq7uUmcJ0vfTps-Qp4QuZQO-oGKpX8CYz5-VgYLlGtqSZxpcqX3o2X10VyfQuGCmQ/s36/19.gif", "8-)");
    emo(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ5b5TT48TOxAEL-NJPY_WRTJhVqN-FOZv1xmHOZsrmwlzL2fM2dyYvIpo86yNq2aq6RrVDaDqqxiEMIuaCehkytdGXF0y8RZQSk5c7AjTSCg7cfmn9RJQmMrsHPIYK8186TJwDpBludk/s36/20.gif", ":-t");
    emo(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLGfCP8Sp_uL4DbxCcmL2dZ5ijmE0TmnyH4MBHABTf2Z-U-s1bdSd_L37ExjFH84zLj0laujiA8ZSO6WEsAT8_SnzAGaLlJyGZUbVbM4P49R43P2J0rpve4YnKBiHccGlOXcmpjtCl-c8/s36/21.gif", ":-b");
    emo(/\sb-\(+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfRSUkAlIkvUzKHjjQcI3oeAzAGtHChJfhTiXM1ptCi1e5LrVdhMmnnLXKIgB1oj_VFXybPiTX4abLGOsOcSRI3cVMy8eEA5GtLIM6-zsYINbshD2qt6etGk4_LZ7e7KQ3zYNoS44z0-0/s35/22.gif", "b-(");
    emo(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie3W9x1F80m5TUm_KRMHcvF3cTAh0SBYeCdcFOHFFG9WYPqdX07EFfWug42G4E4dV0h1cs83TQkEc-qK8DmGpelB-BKQApRUu800crD3VBmyTcaUZQa8AvdjJC6FPq9uNiqXHuS0O1CPI/s36/23.gif", ":-#");
    emo(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1pguUH03lE0X4lgsQaoWijJdakekRrKeqgPGfE7Jo0aw5gBofGMbSDc5CMZyKZVmAgnl9jC3uRGQ8e7_I9AcZBOz4vTwb6dkpexjHdTPp3QCcpZo7c9ICk1RI1xQpX9Aa55WWjLbNb-0/s36/24.gif", "=p~");
    emo(/\s\$-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1DS-pCoHMJ6QZ6Rzo5X4Fmj291T9ZHWeghahK-fJjYi4ZmQ1wk02jtC5dI5k7qXit-cyBqShWrb5YPwRXOCh-od3hU6OQZEWb6mQWdRVRporyPTlj5Y6w3A_8lVR50h5GgFkHNkMUSGE/s36/25.gif", "$-)");
    emo(/\s\(b\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBOUo3agcl_G4uLOJggbZIzUfAdPZmB3pLKiEGSBwQMMc_I-pnAwQIVJXoF-gq0tG4qClisFXToA4py874zg_qMJXzxZMxG1eL0Jq5ZCHqloPuarJjIhWhcsi36rzJGqp3DvU78OxA4_8/s36/26.gif", "(b)");
    emo(/\s\(f\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7uyCRPjmLxT5mdHvN3V-5FOh4SdybaxK8U8eerr_riV_jpv5DOpEUEHpM5zpuQtyZS3C0ejTb5QvkYigGKAdZoswTR60Yoi1Efv7Pt5A9hAT-f5ZHvkw5FOYA58rMDnpANWDSXE3oYZs/s36/27.gif'", "(f)");
    emo(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKiDgdC14Ya2mDLiDp89Vv3eo4ea726_zugJ3H5IrRZBHiTp6QnCrO2px9ggmZHP9nniGpSdBXPyw8Zi6Dl8IfYwXqmugENQlqorgXs7PaCcbfPgUttg5iHEctyHcp4yO5MmGsTWaZcDU/s36/28.gif", "x-)");
    emo(/\s\(k\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpxmmc6sKZm6NCDgdyRGJZ2Ywtl0BQmCgho326seCLwQTpveYjGBXDvx6hyphenhyphend7zBvCTUyRMDWbe4zj9ZmRw8neii2oI4NV8NsZrZVQLKhFyG73f_b85bJ8qBHVbz3Uivg43SRov-7WC8T0/s36/29.gif", "(k)");
    emo(/\s\(h\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEC4_BnueA-gzTlWO9LJAEUhZpAtUFZc6vnTyyzsQ54qPsDpP0BLXMtfyKGisEx7vsNMJE-jnaH__vk87NrVtQw8gnSkFDFG8_1ZbhkL07iEZdBcpdF-34J1tz7ApN5KpFYblq683Z0YE/s36/30.gif", "(h)");
    emo(/\s\(c\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfJvP3pSxXhw8tY-S4lr3LBN_yEPumZYGm15tCuVNATdfQyLEPd0_Qz93aWpUCLYLGwl80fg5krUqQPgdjNfbAg9HzGWI5g4fyildVdb3gxohtq0w6p07RRLJ21PaARBVwcuqtlLgm3tI/s36/31.gif", "(c)");
    emo(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj17Axjpjvz1lt2pJzy6omGDcKt4YsX35um1Rgf6kYfiRQC5pmwlInSlCK5NkA8g88DSSuJaZ5hYxUmY1lW8x6fZc_WPBL2ma_0dcDL8YCpnDstHAzOHVsM3l7WouI9rCe9TqUi8y0m_vY/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> 

7. Simpan template dan silahkan cek blog-mu  hehehe ....

Sekian artikel tentang Cara Membuat Emoticon Keren Di Kotak Komentar semoga bermanfaat ...