Membuat Emoticon Di Komentar Blog

Setiap blog biasanya menyediakan kolom komentar yang salah satunya bertujuan sebagai sarana komunikasi antara si pemilik blog tersebut dengan para pengunjung. Baik itu merupakan tanya jawab tentang artikel atau mungkin kritik atau pujian terhadap artikel tersebut.

Biasanya template sebuah blog (blogspot) jarang sekali memberikan script untuk meletakkan emoticon pada kolom komentar, padahal emoticon terkadang berguna untuk mengekspresikan perasaan si pengunjung terhadap artikel yang dibaca atau mungkin sebagai ajang seru-seruan di komentar.

Untuk itulah, artikel kali ini aku akan berbagi bagaimana membuat emoticon di kolom komentar sebuah blog agar para pengunjung yang ingin berkomentar dapat mengekspresikan perasaannya melalui sebuah emoticon.

Login ke blogger
Pada Dashboard pilih Template » Edit HTML
Cari kode ]]></b:skin>. Untuk lebih mudahnya dengan cara menekan Ctrl + F pada keyboard. Jika telah ketemu, masukkan kode berikut di atas kode ]]></b:skin>.

.emoWrap{ background:#FFF; border: 1px solid #588535; margin:5px; padding:5px;}

Langkah selanjutnya cari kode </body>. Pada umumnya kode tersebut terletak di bagian bawah. Setelah ketemu, masukkan kode berikut ini tepat 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></b><br/>- pilih salah satu emoticon untuk melihat kode dan berikan spasi antara emoticon dan kata -</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/AVvXsEg9_7D9rZ5UEo9LhpoxNEBxcvnN96nx5GeTy-SVGj9SUbjdemZbmUBkwOGiimUyTgX-8dac5VPPIEyZeihaEwBIee2TIpPfB3Jc7hgjIALUGX3IH3g9LMQNWWwU49SLZJkjHCWCAH0y_AQ/s36/03.gif", ":))");     emo(/\s;$\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHofCXQTDsOATZaZUZW_ktJGiClMiO2LkZX1G7ODPs1evq3De7E0JV6ChDgSOeaLLToiykKiXetOupSjYQyod4z0sBBq6H3-RAMviqQRTkPf0PTkY5T1aBlzM2MKPrj7forhBNd-yPZf0/s47/06.gif", ";((");     emo(/\s:$+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS_vrTI0obyEgSyk9hQXa3Hg_zjRdQjzXtf8LsnxZxSa8NmbSl_R8Osu_ZhAeuPteI6zIZC5XhAOGUcmncNhbV3PLBNAWNg6y74mvpMwneLtzdi8wyKoZtEYARUhygPGgo5dEw5yMNal4/s36/01.gif", ":)");     emo(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeFhYZ-8vOEGup6ntGvXd_Sm2GwQJIPrCbE9DjDsGHamENJLHVkKB4cZ_EbYNFE-hsDrRDIqYbYw1RV4bhWkKfRRyrPEC7s5huAjkEJN3ab_7KIOjEwy7q7I57VNQh3wDrY0I2r2qiSkM/s36/02.gif", ":-)");     emo(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy6du_UVmlhCnHX3yBrmkjrUX_pamCmnxw8A74No_X665WfuDmHXyUcbrQ5YkbDNR19-edlOom15_5u2s-_RXNohdCSx4YwG3IkWvS3fhQDQtpo0iKGZ-9elJ4cegpnsFKVf7Zdq02y8E/s36/03a.gif", "=))");     emo(/\s;$+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQkztV7JJv1oHoJwf80s-OsvTKgdRht5PofH3b18xcQxSo3QHUnv8diUJ36_3SkZHV5PGtK0DQseSqpOhqd1DWnX4UV6W0cJdytuL8NtF9vr3vKJy3MosGihls6NKrPh3b32jXFYe9F4g/s36/04.gif", ";(");     emo(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8zc10DEPeKYss-SZIGptO_xLr1jxgYzTmy7GH3x3IBWuB6zlK_TrJUBE-_Rrc0K1mGRhXnWqLCWZKpNLcBshjIFYokbc_iHvW4joeVMiBr5jyWVyO-k9jrrXOsqSl3spqZc2G_S4fyc4/s36/05.gif", ";-(");     emo(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYjWhVuz4yaCCcwK3B_m-5JzxTcDHprMpCKcgy75F9k4aUESMnb7LpYpEkMSDf4VW01ZoIhJ0pJQZ_-qAELai6Q8BNkew9m5yr6nIeIJbGtfGXpleGDAYYJVvtLklTghqCHE3Hwg2Xs7s/s36/7.gif", ":d");     emo(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7qWReVuzenDeyXZbCGDghAeLFwtOI7gUjw1FWzZFILb_T1AhQjJ3S6dpxtozWHo2rec_wcq2GyV72_Ub1Uig64xWb0cDuZDMsWb3YwDi3YN4nRQKUKyQBkEzn3xxKjNIz8XfsPV3i7sM/s36/8.gif", ":-d");     emo(/\s@-$+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuzVBbvKyF_k54uNRn9Jao7GG80rIydYS2YdjzHC6Z4RGy3RQiLSf885UWqIzOg0J93pXSs7oiiraeFba7QHZxB4kgwv3eQ3DFDory4KzfBrw7C2CBV3oZHZtaLQwyYE3qd4Z4jFsUiwo/s36/09.gif", "@-)");     emo(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidzo1o9X3iO0SzxkXjD2R-GSgvBhMP720jdHp0xRI-sLHKDBCT0-paAbl_UvL2vXMSmybWQP304B3UMauJSnZYDCtjC0F3ovh36kpxI24Bi_hvc72rQiliC5wqjClVhyphenhyphenK6_bb13vxQQ0M/s36/10.gif", ":p");     emo(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWkZxMOpiWlCkhLRtpi4t0qimcEte-sMtEgPCFPfajaiuTpdXe3ZWwIwmhjn9ZMscPPiNDwuHqhgy6rryE2FdNsg74asCEDRxsO3sLleWMQ7QCUfEeL9iYuTLJ3cl3-YMig_v80mpOgyI/s36/11.gif", ":o");     emo(/\s:>\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2rIY1SoNqx6v3BwDARI3i18biubx3nYVVdkPsA15Ji5tI9PanHPGMDfixpDKURD-me5blx6ZHcLcFgMMcvmRM3V1kHd9HXh-nTb2NZWCG-rPHaf9or5t-qQff9fSMhzv1kpRBp8aKbnI/s36/12.gif", ":>)");     emo(/\s$o$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrpBZcHafqtNZSm3Gq9j0O-Pmfeg7mPVcP4CSPnC6hxaNL3S_c5-SG00JTJfvFaxA0XxnI00YFjhdm0b0euydTNIgsZlLkXinZlEG9XdF-9T8aMWIRzf06pgx-J3R2y0SrEgoCUVRNksU/s36/13.gif", "(o)");     emo(/\s\[-$+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1uPuRCVXvMclDoHwJFcCZuTDZhosMd1nLfGrsyX2j_5ZDtxS6osF8c8xW_7ESF66bjXcd2wgTnXTIOIByBixhWWu1TxJJdUfpyEF7Uw3FRS0x0FjprGje92yxouL80eFpEMWer1WUs2c/s36/14.gif", "[-(");     emo(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir-eVmdSNgpA3EdAGpXSjxcqZTlblvqLFDFYUmDQpfJHaRMu2CP73cu44PUuIQUN1WyXn1APrUxLbpHy6X1xnd1xD2Jh3m-YAViD73n9VGgAt3iL00Ymim3vaVTVzLqicNxVvBu2KYyoE/s36/15.gif", ":-?");     emo(/\s\(p$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5mU-Sh4-TyNcVNgIVawb-8XipNw4VVgIPjYKBl792peF5Mi8Pxvy189zE4lyNcz5eg576-ZBMSgE1-c-_m8kM9H0q7yebqVngRfHCkyIfCMuwVWBiuz54-j8LnM7V1wRZ49WwuwkEmbw/s36/16.gif", "(p)");     emo(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHvyK99xnh7x53Kz_WWbymn-1Njq1ODETcYeKQe0VoZuLrD3uGWDyuE6luw6PBeipmlX9wE50sfp5xxKp8n0kHAmg-3eu2aoRGW7eiACwVdAVPEukZYWMTBpSRFg22LqYVQmbNgX8q1cE/s36/17.gif", ":-s");     emo(/\s$m$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5hjpsyG9R5F98eqEKxeM6sTY3YuqVirg9_OzMtY1ZezN1ZWxghAPfSj_iDmuBH8iN8gdksqHnSXE1xvtxAtPoT7gKso5ToBf8hRwnfAaI7niRGPGPPvsVukFCk9MueqgwZtV7ljXx_vc/s36/18.gif", "(m)");     emo(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6J213THG4FAObBKgd9cenRp7SPlQXxFjZtbVRnimKO_7YNZat5w9V5el18zLGM7HMIKVY6H7HOya8tIRtzqD7JCxeGm4g4Pq5CwiD1xu9yTRZYkwaRCVuoJreQzSvsDEIuvMHcB-fOhw/s36/19.gif", "8-)");     emo(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqoTLly7nL7Qdmm8a0P7bupYWEYDvmuKOnJTYi1XjapBfmsp5ihIxMeFuIdzBZTqtuEsEcqGlCJOYBlMl53g8iu4bwIPYM_jMQMgT5xM2AMXWR5SDTwmcv2oabh83RqtI8HgwluxKJ99Q/s36/20.gif", ":-t");     emo(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifm5J2UYZ0d-QsrmWF_ck0U-lE1pKAWMsOBu8Q6HU4336VSXysJ7mNpV9CFwIFbLKcgwbnnU6QiQD0I0JILOzT9KgVzulP8vtRrkZ9sUDFqVqF7C7RvLIZVa6AqSKoD32kLcXMG8QV5ng/s36/21.gif", ":-b");     emo(/\sb-$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRnzmWGEtqFcjhrq6gOZA3Bq5D9PfO1QCErkf35XR7V1WKv_Ymft7MgBuabTQiL6aztuIjVTS-XlSYFruEbH9CjgoLakepx-nGyoPfEuMhdlrUpvzgrDna5Z3sBR_Xg2C5F6POSbmzve4/s35/22.gif", "b-(");     emo(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit8Ppw4dycQJoyrLGhzkcSmlXfNvwfXooVXLDW8jnhnQp48jePfeLEVIMWT98EtPzOIlSpS6COX8v-j1OURuc3qKj8L6umtbzFU46IH_ely4v66IJExeUI-GS8xIDnVreK_0yMDTMCViw/s36/23.gif", ":-#");     emo(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeT6zyr00rc8yBaRDuy-ttfmWEOSoAH2dpxXmBy6uNgf6lfDf0E8_wm4mkzycfcX5L1VhS9xb5fDYuF9oY4AehPwlFNpdTYEBvIWjBlAsEUN-z4umo2uEcjPIF1CSFD1OFHDB_4k1d9XI/s36/24.gif", "=p~");     emo(/\s\$-$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAIo2ZAPRElH2gkUrAdQUpnJFPLRzGdfyEa8Jd-UAfvaeIrVcycBluAxAcElt7gn3C6aVfjSr2snhJx5OcLBmFN7VSUE8AO5FwQ-T3JYXVgOrI32_IJgtcsH9vyzkBVKMKXcS0ZF72L7o/s36/25.gif", "$-)");     emo(/\s$b$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnoDHO2_HR-Iu7W4if4X2pgZ2HR4glLD1C8HlC4UpGgVnQLRR2L6cm2tXYk431opbzcR04kxpj8eF9-61gouizyqDFrTN4_N9joc1osPdxhFsIJfqbPsQ9bzZhFS-k62JcBljoXN6DbPg/s36/26.gif", "(b)");     emo(/\s$f$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgi73iq23hIQKPfvLnAhdOwxKyzh9UO-vcJWea6Pf6QCRn9pdV_DzZf2dxOvy8ZPrHI5EFNhBzCNx-8DQlOBiTPuwsJwDZTCiT5PGH_xykM_TtEp9rdUxFjIjryU3l1WsaQDxD3UdN6ZA/s36/27.gif'", "(f)");     emo(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv0_DXAfhyAXQ0IQBtDvsbG-wkeIOtY1QTRxqX7ebBxUP3O55Ej0EP094v9NPa9ljikVRE-JDni4fwYMM0hKDX56OSgNnQNO0MSL37IlU6A2Ywbt3ZpSqzjVUZEUM5H8ozQATuLnkcl54/s36/28.gif", "x-)");     emo(/\s$k$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs0OYXslGZQ0-GxKOMiqI4YbfgANoNBNjuHUnoF85DlJS4cyxPs99yWKGpb0veQtOBNGxG9qKuoDULF38hJVF_DpiYPccHI05clpqhxCrY64-4Sx3OM7p_Snq1u8wRp3BV04G-oeQkY-0/s36/29.gif", "(k)");     emo(/\s$h$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpW56qRI5NqXtAmw57e4O8nZZdgRUYN4M6A2DS9QVCnnU6KGQIJPnwLoMefmb7xoJ55Vcm4U8vrpUI1tBqF3PN1KokXHYcK9K3dcAMyR81A-fLVicEkpaNuYUvbW5py96HN78jOfmS20s/s36/30.gif", "(h)");     emo(/\s$c$+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimFBPNY2AzwliB0no0GTk-PjTjrj5rxyhYBDFKv1Rq_JJh0Lhue6eNB8sZV9gy_21vxO3UnsvK3DK2ntQDN-mXeFF5GpGlwA8jJWVKRH17FlU0GHi2Egg-QiJlv5yAdIHDthCpeJ2qsYU/s36/31.gif", "(c)");     emo(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjammnTqOm5pOgBRCN05a0VywXZzOWl-B5IHPB0VZFKZulMFvybNVdCO80stNpGj3XgkuUsoelp1KjMrEJMZFm8iGvRaIiF6j7s8IKSg9-9zZVETXijltb8ppfbTaZsxjZnqYKnEsQ9dcA/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>

Dengan demikian kolom komentar blog tersebut telah memiliki emoticon yang tentu saja bisa membuat tampilannya semakin kelihatan menarik.

Membuat Emoticon Di Komentar Blog

CATEGORIES