Cara membuat emoticon mirip DTE

pinjem foto mas taufik

Selamat malam :D kali ini saya mau update kecil-kecilan, nggak usah dihina :') saya cuma bisa seperti ini, saya juga nggak copas. Tutor sederhana, saya pelajari dari sebuah blog.
Langsung saja :D

Tambahkan CSS ini :
#emoWrap { padding:5px; color:black; font:bold 12px Tahoma,Arial,Sans-Serif; text-align:center; margin:0 8px; } .emo { display:inline-block; *display:inline; vertical-align:middle; } .emoKey { border:1px solid #ccc; background-color:white; font:bold 11px Arial,Sans-Serif; padding:1px 2px; margin:0px 0px 0px 2px; color:black; display:inline-block; width:25px; }
Dan letakkan kode ini di atas kode </body> :
<script type='text/javascript'> //<![CDATA[ // muncul di postingan tambahkan .post-body var emoRange = "#comments p, div#emoWrap", putEmoAbove = "#comment-editor"; //]]> </script> <script type='text/javascript'> //<![CDATA[ $(function () { // letak bar emotikon di atas comment-form if (putEmoAbove) { $(putEmoAbove).before('<div class="heads-up" id="emoWrap"> :yaya: =( ;) :p :) ^_^ @@, :-bd :-b =D :D :( :Q</div>'); } function emo(emo, imgRep, emoKey) { $(emoRange).each(function () { $(this).html($(this).html().replace(/<br ?\/?>(:|;|=|\^)/ig, "<br> $1").replace(emo, " <img src='" + imgRep + "' class='emo delayLoad' alt='" + emoKey + "' />")); }); } emo(/\s:-bd/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVnJ7cn-RfqLd5q9eGi8VY3mqDsKJC3H22P4FmIEdXs0rgVA7XK0Omn5h3PgzLx9G7F0YLRj_vcSg-sdtes5sZ5ufEiuD_IPV01tQGBfkDeIBQkFzpSu20XOT6LuMvnN9sq5R7zM_-oW8/s1600/thumbsup.gif", ":-bd"); emo(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdXFlJ1sV4msejjSF4ZL6TL-rAYnnS7exH-RwLlOKL6BH6jEUudZTAuW_MRWwIiHIU2-Hm71QlJLKiK67MqkmHNtzumP5AJ2fQ2BDUXQwHgm1b8vrCU6LPhyuDewAE2bUDgg8hd6D5oqt2/s1600/thumb.gif", ":-b"); emo(/\s=D/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonSY6B5Me6MlTTA1aF0JV9-WU-WzpqxRWfOm48aYbO-xXKuqcRN_t0iG-daJ6ptQxGencfOj37pYGcPEVbDpilBpCWxuxEO4C7ObLHcskAo4hplJjlLeyE8mvG53woehIf-b13up21j56/s1600/hihi.gif", "=D"); emo(/\s:D/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtTMnSCgtQlf7G-Wzf-l3vVCSoWKd6hVMVGJo8pB0B8JezreYhj1UKjWCp4QBy6y6itK19KTwKE5rySGLcZjpaiypZJBAfCZZQaNWLMlHpFCpbW-DZmFWCCxKNN5kn-ITaaX93BTz9WFtD/s1600/icon_smile.gif", ":D"); emo(/\s@@,/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbgEaTQR8MvKwBcQv_kywfSaca8u5-UVWzQ8hRj9pjr5wuQn_fWClaVplTPzf-98MNymJI6MJINo7xUVPBcWP5PdGYgEEZ4U0eaAZ2loTXByc-dX9qgZ3QQkQh3Noi7-DVhzduhP_W-80H/s1600/rolleyes.gif", "@@,"); emo(/\s\^(\_|)\^/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0C7Ar1Psn8HJHMb60ZVcc2gh5QrwQBN4tKBTRT1YqA_OKSdrbMJKEmDZnp73kY5ThZilfEtHLvLi7pqB8iDsz_xIl5FRRa2-RkMTD_EayxDhl94QFCFxi3FPMrQW1wAmfcZuORVWkugjm/s1600/smile.gif", " ^_^ "); emo(/\s:\)/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzRgbVZ0qnFWcKSEUpTdwFCqcGbyhBfhhRRji9mh3i3kueCxtD06qwtPD8ISmzLYplgZyWFKxhsCF2xsB6MZ8pOXBjoZAY9DFhRfGSM8om8h9B1dYW3xRBLd2j97IDwVGe1pm5alFhJqif/s1600/smile1.gif", ":)"); emo(/\s:\(/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCIr8oJd3fdH3fWYtXj7fd1UUqVyV3_W3OW6zU_m6sjxwa7HVauX1Jel8AlR8mn2EIlLME9zzI9gjZuCVD3gJ6iehnkZEDKnXh_MQ6QeyJ9r3YYfe6Vm-XX-HnbRD4PkFKjq_hhpWONHCe/s1600/sad.gif", ":("); emo(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcQzQzCNfuKJIGd62VhHVZa6W08nsoWoig9MjQRqSFVgugo6yasLQqth1PL0DmAYFFcKQdcWlexQxmchw1JOmEUxMP7YPev5Zl_zkFOYT3EWaIbtq-w78IVPViFOU3_xKuGlHircZqL9Am/s1600/wee.gif", ":p"); emo(/\s;\)/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzuC2cREV7KWT4ZzQdV57IMITDmisadou2ury9ZbLHgTwSW_PaabqJkjlyjkOs9lyY_WGC6Cj5WvULNTpLhpNmWVheL5UbGzWXEAS2XybgwE3DCqKlLh8VIZEm3JFlBKdwa_erLyDnTpRK/s1600/wink.gif", ";)"); emo(/\s=\(/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim51v5fEQ-fe7FWkMZf2cjiA1P0WHUfbg2zMyQh7i7pf9AsYvuWaUkFmf4uD8qBKflDvxoThRL57WVnOlsCdQiH5PLHCRWj7-93-kseqiugDbX5Q764oRhc4QNuSm7NxXdSiCrPIBrkUDD/s1600/sadanimated.gif", "=("); emo(/\s:yaya:/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHpmtpKn1Uobr7E0x1A-gnB5qH9KtAXZH684HrreK6DvEIF__VGAl94qSo48jGBhPmoQaHRa0HfEuqFkUj51m0w9A85R7bEVoueO981lYONhZbyBEX27xzRiSTsSgGFH9Y1IGx-vlvAFtf/s1600/yaya.gif", ":yaya:"); emo(/\s:Q/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDkc0XZmDRig7vGSeDZyVcla_jk48SVt6aNsrqMDzomi3WW7O4aK8JRVthwkKGh6cDYa6E1UqCbiBzpJTp7s5a0hnQKjXA1VnPfFn6lp9s_ywx1xmRHXERrfbrZQzUSyD1JtXm32BVDMXm/s1600/smoking.gif", ":Q"); // klick sembarang tempat untuk menyembunyikan code emot $(document.body).on("click", function () { $('.emoKey').remove(); }); // klik untuk memunculkan code emot! $('.emo').css('cursor', 'pointer').on("click", function (e) { $('.emoKey').remove(); $(this).after('<input class="emoKey" type="text" size="6" value=" ' + this.alt + '" />'); $('.emoKey').trigger("select"); e.stopPropagation(); }); })(jQuery); //]]> </script>
Jika ada yang kurang paham bisa di tanyakan di komentar :D

Cara membuat emoticon mirip DTE 2014-03-17T19:59:00+07:00 Rating: 4.5 Diposkan Oleh: fizzi