Blog Keren Wajib Memasang Emoticon!

Halo masih bersama bersama saya kan? Harus dong! Sebelumnya saya mau tanya, apakah kalian tahu mahluk apa yang paling minim ekspresi di muka bumi ini? Percaya atau tidak tersangkanya adalah buaya! Buaya adalah mahluk yang cuma punya 2 ekspresi sepanjang hidupnya, membosankan dan saya sampai saat ini masih tidak ngerti kenapa orang suka melihat mahluk seperti itu. Ekspresinya akan tetap seperti itu sekalipun ada tsunami atau bahkan saat ada maling mengambil pakaian dalamnya, HEHE. Oke cukup bercandanya kembali serius. Sama seperti buaya, blog juga akan membosankan tanpa adanya ekspresi -- artikel bagus komen datar-datar aja, artikel kurang menarik mau marah paling mentok pake tanda seru doang. Ketersediaan emoticon saat bercakap-cakap tanpa tatap langsung sangat penting saat ini, Nokia dan BlackBerry sangat mengerti hal itu makanya mereka menyediakan fasilitas emoticon pada gadget mereka.

Akh kebanyakan basa-basi lu Mbo! Apa sih yang mau lu bahas kali ini?! Ya jelas tentang cara menggunkan emoticon di blog lahh, tepatnya pemasangan emoticon di kolom komentar.

Berikut step by step masang emot buat yang pada udah ga sabar

Step 1. Login ke Blogger, lalu pilih Template » Edit HTML!

Step 2. Simpan kode berikut di atas 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 <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/AVvXsEiunOfy5S67zYDEpCo2HhaoqwdFROQhYBurnQHHOOJcKt53tAlv8LKDtE3uFfO_uBFrMx4dcaG5xRv5Pi_Ja-hS_oeIw_QYxWSdAKhLrNK36Kyv-M1V6JegJVOOe4ErreQKRh2MlNamSP8/s36/03.gif", ":))");
emo(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYRj20Vrv5lfVf-6sartaLC_7B_Tt3WD39lUsCAmWPC1R5ZnwdLs-4WW42b4Pf-H8HdMYXAxr1S4PPMZmlrM-XXaYcWuNHqsKfXKRDL0Dr5JTTuZrOldO3qRxXotyQFk5kotVMens1QH4/s47/06.gif", ";((");
emo(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmNFKMOQBnmnmjeTTOK2gZfIipZ0n4MvLidClkpjFG0fw7-GM2Cvpq2T3yqPtQEUAiSn5ijFKOp6lMQMuAkiSnAcz-nilDZjivJK2qv5OkaKYGfnVMIWMyQ6HSevni2iMKOxNIGC1zv_Y/s36/01.gif", ":)");
emo(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOXVUQXYvxCBhxovzuODyeDr38eBd3XfThI1sVrJiXbCM0dIPrvckbw5qfvsxGe1Bnfvv73Xk6l_82QIrL8HyLt5LDvmeBJe16WY0tc9EdOmemtU9YDhr_AaPxvFoxcyvCJkTLixg26rk/s36/02.gif", ":-)");
emo(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj72QdZdt5ktNqlsJbBbMw8yF8kiIJV66pSMTW4oRnMw9IX4HK7J8XZ5QLWoiZfhSbDZkKfmeBHt66jJXre6sdBEQ03TSfvUecMfulhc46Ylm-Ry2vqLk0x8LQztOfxcvEV92I_ZHw6Ry4/s36/03a.gif", "=))");
emo(/\s;\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBO0gvSnXZjCvMoIA1XKzyoDB2Mz-kWCuJsUn1hkmXHWMrtTdPbnUGLXf1YKBKacY7BqQP0lxxm7VNIa4EgeeTMqIV6SYMBtfoFsYWagfwQrKE4wIygEfH2V2zIW9T1pha4ID1251-j4c/s36/04.gif", ";(");
emo(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFHjmX1lCYP7G1gNsD8L87vEhKKCZbGItoo3YFBm_h1xxo7xza3jlv84SG3Ptzep7jFMseohNDLaaukdTDXlFyLywBhr3DnQrKRkivx-gfnkOhBwzfZS0jDdr3AT9zlY3M4N30DK3t79w/s36/05.gif", ";-(");
emo(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixXHSy12hLLffn_IGGrUF_hzGsdX-PxXfSyVWemb2FXV5DW-c4I4fSY30HcpYosYqZjxbzu1Tbfk8FxWalbK_QaDDimAb0IOjvLJrbEr52kJmVLxi_MiWCaRj8jDoWVODr1YOY2yCxZuM/s36/7.gif", ":d");
emo(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihXhH3nh5qXtwoONvSR-yrdyRUEkpzJlrjeM26aFoXpundZAa56ichvzEePkasK62q_XWFVRPXlHI8eUcHvtt62K7_jkt5p-97Cc5mGVZsJ3p7vC1Ot_W6kFbvHQiwk8Z8rmxMge4mR2M/s36/8.gif", ":-d");
emo(/\s@-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9vDU1gkoPlC2nfhwcjp1CTyPKw-nHUCTrLywWwlz_QfZXknTgjlBAf-FR4sNbmBkX4BekmI-R1rn2E84D_hOK8s_svmedyvOv06QT359gPXjhnimCDQVXCvFZvaQeV0F5bfMbiOPXvyI/s36/09.gif", "@-)");
emo(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xBhj6UHeEpJIftH4-L1nzESFeLQRNtXklADlzX6Pfcon2KVU3sqGjAZgToPQyu-iu7gHUPwzASorRolryRRTPYdRqrx4DvoGOPIflpSZzekg3nvWp2UNlrxkr3Bpe05JuYua-dkGPaI/s36/10.gif", ":p");
emo(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5PJ8Vz7CxFN53j87f1s5orKWHHOypZ4Got_6pa0PXncVF7LxCllHN6VUF31kppZXCjepA4yXEoDWBztQ5VyHrctdlvplKkWLnG0X2_X4xTNOKnQEDEMPXDG_S-F84jHhcqMCeFNic_R0/s36/11.gif", ":o");
emo(/\s:>\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy8LQyc1KTsOV5_sj4RaToPUlqiGtM4WUMy7cp2oEiG9yu5N9ypvTHJOk4nxwj0US0aym-Laz2i7NKXun02G4Oifl0yRq9_Kxxp0EB82o2hZbcJzIdY44D3Uo_QfhiahzpE1EP5ovWj7Y/s36/12.gif", ":>)");
emo(/\s\(o\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvS1GUuLZDoyFGZAxt1ozNnQ-gIHjOZpKWAGj2XsCg4Gn9D8tKh_PaxmFsupfQzg0IRk7RHyx-99pDpSXey7deIAz5eIC8Tat9y4jDbi-KzoAkH-vf26ClMrIIUVEn3PrSdM8VwTsdEHI/s36/13.gif", "(o)");
emo(/\s\[-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVnL8C4bBP8_Gq-KEdnalX0VlCGIBK6oEaXFt322XpEyluATuhbwUxbtV_Y7jU2xN6ZpZDIDmMFMfBBrWx_2W6XJtm_hnyAUBTjNeC5NUUsXTVL1UU7E9U16HXKmWvfXxB1MrXcyhPHOU/s36/14.gif", "[-(");
emo(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Uzm1qNxcHaIKTisKjBqZPYKls4UqrAqSqhIMPhoNI4r3Vu3SRybV3bsJJkyHALbgW7M7_AsoXzN8UqPT6koSh6xVuPWR921_71jWl5nyq3Jo3TYIOjuDPlBv9-vDxam3lCBU6VdQeBY/s36/15.gif", ":-?");
emo(/\s\(p\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSjq2xdj3n95C8w0w3NCwpAxdz6e3D_sbSSc1h3eBJ7o6JDNwia1_vBmV1LZuPII1LmNegSdsTZYzNWn_kSngN1LOHN6Mae8m_6oaUdCcV8q-7oeU3hbkXPHZk8pXdV7unS2hu4nnekkk/s36/16.gif", "(p)");
emo(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhivN2Fkj-92TJBI4omfT944o33gw5cncTvBmJhBFidlW6i9EqbY48MXyMJlxvXwlvWjO_Q35QcfnbplcOP_4so4zn6LWfqKoZEO9QcqkoMgfoKaGSe-7L_51IMtvh62CtQn81lJG3DXrA/s36/17.gif", ":-s");
emo(/\s\(m\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiW8BFBU_wxUsnYWFIet4QpoPqtthJKi1EH0AwqpzXoIMbCXjKjOdYaNKGlO2b8Nnr5PLajb3wj_hragHm3ZaZfwtKgx1CB7CK9zOn7gbS-lTi5O7Wl_cHOnDw_dOsbp6Qv9wnIpXu3BU/s36/18.gif", "(m)");
emo(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1nSf4KDNsMfFSfuzQuesZ2o-2gt2PPqwC4kGAfhH2lZllpOLfO24fPehtLZ3mxjj7Rdcm6d-oTQhdOQG_rKlbJOWPEXM5yDkK5lcI0Av5-cxRccXKElQBNNcPaOgPrXKGOxAEiiVjM20/s36/19.gif", "8-)");
emo(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGe93SDg7-FPu02B2UxYNDSpWPL4cinRZRp_PsSGT8-baWso3RmCRNDSWD9Y-6wL9Xwc-vfzSRe4ybZgSWDwpS34CLleUpsCm2t3LyRiG9YHQ4gzV2xBghRPjDr0fIQvfm1DCTiIFIjn4/s36/20.gif", ":-t");
emo(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju3qkma_d6hcNYb_2DNpIzZCmxQUapwCnT4yof4jERHl8KII99cWYUtsDiYen5PtKNfEnG_OX8922plD-2xEeR8rdofwTHkiOLRWZf4qLgh2bnULL3Oz4ZdO3l18rpK-fBbgMIEzb-9WY/s36/21.gif", ":-b");
emo(/\sb-\(+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi61Czef2rJ8aO3hP3uTRR1BqgyzCVVGhtk2T6ocUKrXdkCHJ6Aagmo6LUkN-wwNpKLJ4tXCixhNfUngPU2WZyrkvQSFAXrRDTeMc6fx5BhmrhMaiFIYsJLLPzh3vZWkqwwekIiGw1GcCI/s35/22.gif", "b-(");
emo(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLZOyW-yq4KS_2kPuqw4lgTXs5uiXeDxZtmBycWrpm117xCCLTCIp-J9Pq46reRxD8pi-7cfIrtp32C6Dgan9z9pA5stQeso8B6InlQe93Fdhh-A-PTRRV77CgP1JmhrhreM0AuT1khFM/s36/23.gif", ":-#");
emo(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCtThvCBtJPexDmoff8vE4V5LkwddA-WNrGsEHE7rTGG9RA3TnScnYQF9WLBtNVrI-lmhk29IyZW0tNuLCcqQGZ8E0WI8iD7ojhBrYJApyajXzVgwxagDYBgXfOBo0GD048lBIYvOpqLo/s36/24.gif", "=p~");
emo(/\s\$-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTA7U6ZlArC6N5vJ4F0zIZHdOk98BGEcDTmdGDkSd_FtO2Qq4_sEgPxyZhnA1L7UZt_FFvIhRUMIP7ECcddEFOG8ycLgKbKL2PShyphenhyphenf6JsE4V8A89Cn5ZwUm_CLU06Aeagio4opc4-gx_Y/s36/25.gif", "$-)");
emo(/\s\(b\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7y28p2BPkLYrxADTaKp7gyv-iWkX8osVo2qevTlfc6fB8AysFa0teC4Ayp38fWaU_9eceFZDe5FcUzPw3oH3vbgAs3rNum2f-tmC7RBj570lChiZfNQntNzge2arQLu-aCfPTh8sAugc/s36/26.gif", "(b)");
emo(/\s\(f\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglWyZXbk8xqsfp20GgF0Gyh4HSjvtaTRbrEKGg3752nEGDkbpHx4B0fqyIe6xB2DGo93tlbfDOPF_dpGffIpzjykZ5NiM-thow1i4PM-YjcDvPg5B8HDWgT4xdCrBL-hpmUZhRl8eUSI4/s36/27.gif'", "(f)");
emo(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZlOLLl1XCwuQ8lJ6Jj_-2o-ju3tdGWLLCjoWRsgGobcXzqOAXwZuJuiWVxEOBUwVqi7IdY-3wxIfcGMHKaPJK9Oogdq8XJvT54bNAG2bWwzlz_WPPiWP_WaOXARSNOvkgov_FUhrF0R4/s36/28.gif", "x-)");
emo(/\s\(k\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4rfr20niWZB65v1qT9lUYmUn5vA02TIS_XlXzomAuJ7oURi6eBBhk0MhAFZdDTGWpqPK4144xjamopT5WirHwvAiBYCn2DH7JJTDmBVL-BU40gc3Jrd_RGsmvWn6-1_MJYih8onVwCuA/s36/29.gif", "(k)");
emo(/\s\(h\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikcJI3NJtZRddmvm2cZ4IhiVV5qC1g3bz3bGMafg5zu_1JJ04u-p1_RgroujuAmpTUlvwBKfpwAwHR3NZlgtRH__w1qlxeN06ZQ-5MCIv6RERLvMiMXnnj5g7z9YjjCfMYaF3DNIeCyio/s36/30.gif", "(h)");
emo(/\s\(c\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp2jJgoAY3dfohjO-htB_uihcXDwEhWDLrNKQbijxMOQowiOvv6Bcup7dNT7qYY0Vfvbf_UGdUyjA2bJYPKWZedWJImFUSV9B0RxEvOvtzyTnpNma0MSX89-_cNJg6ZQZYd1qQrqt_E8s/s36/31.gif", "(c)");
emo(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMFRfIkpRywQNdnk527a-sgImqJmPulxlL6YMpy3X7dzzPyWjPZUYHYqiL5HrxApgGkmKk03YaHfh1ZBi_TOayGU0uOy45eH01ecdR4rONJhnRrIngil4N6xTAARJYur1lape_a_Ifa9M/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>

Step 3. Agar tampilan makin keren bin greget maka kita perindah dengan CSS. Simpan kode berikut di atas kode ]]></b:skin> !

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

Step 4. Simpan perubahan!

Gimana, mudah kan? Kalau ada kesulitan silahkan komeng.Semoga Bermanfaat :)