Untuk memasang emoticon didalam sebuah komentar blog sebenarnya cukup mudah. dan cara memasangnyapun berbeda – beda. akan tetapi kali ini saya akan membagikan sebuah tutorial/ cara memasang emoticon didalam blog dengan menggunakan type java script rewrite. cara ini merupakan salah satu cara yang paling mudah dan juga merupakan cara yang juga saya terapka pada blog ini.
Untuk tutorialnya bisa anda lihat dibawah ini :
1. Langkah pertama, silahkan masuk kedalam Edit Html/ Template Editor.
2. Selanjutnya silahkan anda Copas Script berikut diantara <body> </body>. Tapi biasanya lebih banyak diletakkan diatas kode </body>
<b:if cond=’data:blog.pageType == "item"’>
<script type=’text/javascript’>
//<![CDATA[
ki = document.getElementById(‘comment-holder’);
if (ki) {
zx = ki.getElementsByTagName(“p”);
for (i = 0; i < zx.length; i++) {
if (zx.item(i).getAttribute(‘CLASS’) == ‘comment-content’) {
ki_emo = zx.item(i).innerHTML.replace(/:)/gi, “<img src=’data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAS1BMVEX/////vz//zEz/ykv/y0z/ykz/y0xmRQBwTQV5Vgp5XCCDaDCfeB2pgCKplnCziSfPojXZqjrZ0b/isz/i3M/su0P1xEj/zE3////e1ahNAAAAB3RSTlMAEFBwj7/fmsamGwAAAAFiS0dEGJtphR4AAAB4SURBVBjTdZDJEsIgFAQHExjcjUua//9SDxgwsewLRRfMqzfSHwYASKEZGuOPgbgYG2DyBHxyqsrOwKAdTbkeimxeUbO/s1iNqwjgsdxmAI0wuwNICfwslWOGJAWwD/dSysV+QZAE1/U/SXBuJva9T/b+1pvY9PUGl5cRjRsJMjkAAAAASUVORK5CYII=’ alt=” class=’comment_emo’/>”);
ki_emo = ki_emo.replace(/:-bd/gi, “<img src=’data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAP1BMVEX////Pj3/Rmn/anYHXm3/YnYHXnYHXnIDYnYHYnYHBaU/DbFLEcFXGc1nHdlzJel/NhGnQim/TkXXWl3zZnoLq8AM7AAAACnRSTlMAEBw/QHCAj5/PpufiFwAAAAFiS0dEAIgFHUgAAABgSURBVBjTrcxJEoAgDETR4IAalCH2/c8qBSgUbM0ii1f5ISKaZkXdAPiLjpGiQC+qJwROc4b9I04bcqOSkYyVwFdObUPlaG1IaleodExj2JCJn52XlthDgrc60ZbI8ds9D4kMMw7sAAAAAAAASUVORK5CYII=’ alt=” class=’comment_emo’/>”);
ki_emo = ki_emo.replace(/:(/gi, “<img src=’data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAP1BMVEX/////vz//zEz/ykv/y0z/ykz/y0xmRQBwTQV5VgqDXg6WbxifeB2pgCKziSfGmTDPojXisz/su0P1xEj/zE0AAK4zAAAAB3RSTlMAEFBwj7/fmsamGwAAAAFiS0dEAIgFHUgAAABvSURBVBgZdcEJEoIwEADB4VwFBSPz/7eaCApSZTf81apdza53U7Pq3HUUrUctUJkNV7NY1Ap6l0dcLFLctAeN4enmHgqegdmspllNKpiNEeEYEWZgkSY1TRbgGTT+agCLITILCo9YtX7xUfW+NWQvKKMQqt4+Z/oAAAAASUVORK5CYII=’ alt=” class=’comment_emo’/>”);
ki_emo = ki_emo.replace(/;)/gi, “<img src=’data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAATlBMVEX/////vz//zEz/ykv/y0z/ykz/y0xmRQBwTQV5Vgp5XCCDXg6DaDCMZxOfeB2plnCziSfPojXZqjrZ0b/isz/i3M/su0P1xEj/zE3///8Va21rAAAAB3RSTlMAEFBwj7/fmsamGwAAAAFiS0dEGexutYgAAACBSURBVBgZdcHbAkJAAEXRgzGHRJHY/v9Hm1wqD60l/VGwipkOfARt+FHqjZNcUsGZlENT3VmNrUEqgdFuYbZ7QCLpbENjVxNIgFt2gxskkpHdDEgBZn+BpAh+LptrBZIysC+PZVlu9kRUEsC7DrQqofbbAJk2QGfXPQQdClYxU/ICykMRfK62iqgAAAAASUVORK5CYII=’ alt=” class=’comment_emo’/>”);
ki_emo = ki_emo.replace(/:D/gi, “<img src=’data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAM1BMVEX/////vz//zEz/ykv/y0z/ykz/y0xmRQB5VgqMZxOun328kSvGmTDPojXisz/1+Pr/zE1eacjlAAAAB3RSTlMAEFBwj7/fmsamGwAAAAFiS0dEAIgFHUgAAABoSURBVBjTdZCLCsAgCABtPWyPlv//tUtrWUFHiRwqKMAWR0T+GESgxi8NKb73KG6pYUybg0niU0IA4PxGFCWxqhejqFPVxEYlHKgKc66vfFGW4jUqC1wWtS+RbOTn4euW/TimXYfnwAcBLQyy2bNdUQAAAABJRU5ErkJggg==” class=’comment_emo’/>”);
ki_emo = ki_emo.replace(/=D/gi, “<img src=’https://lh3.googleusercontent.com/-alqPV9KdSes/VyESeclsCvI/AAAAAAAACi8/bMhwcvkalnIi1YW_U-J7qqmmmz8IMMIwQCCo/s128/ahihihi.png’ alt=” class=’comment_emo’/>”);
ki_emo = ki_emo.replace(/:p/gi, “<img src=’data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASBAMAAACk4JNkAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAMFBMVEX/////vz/vhV//zEz/y0z/ykz/y0wpLzNmRQB2SA6ziSfisz/nWnD1+Pr+z1j/zE2pbVfYAAAAB3RSTlMAEFBQj7/fOvQJJQAAAAFiS0dEAIgFHUgAAAB7SURBVAjXY2BABiz/vxqAGcz/gQDMjAexvoLlwMCBgUEeSL29e+8jA0M+kHX37t1vDAz//6//f7f87n8g60cHjLX//36gLIgF0QFlgQBQ74+Ojo4Z/UC98j96zpw50f8RZAeIBbKDIf7PmTPnv4LdAmJBnMVz5owCAwMAy8FdqRio11IAAAAASUVORK5CYII=’ alt=” class=’comment_emo’/>”);
zx.item(i).innerHTML = ki_emo;
}
}
}
//]]>
</script>
</b:if>
Anda juga bisa mengkostumisasinya kembali dengan memperhatikan kode seperti dibawah ini :
ki_emo = ki_emo.replace(/😀/gi, “<img src=’data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAM1BMVEX/////vz//zEz/ykv/y0z/ykz/y0xmRQB5VgqMZxOun328kSvGmTDPojXisz/1+Pr/zE1eacjlAAAAB3RSTlMAEFBwj7/fmsamGwAAAAFiS0dEAIgFHUgAAABoSURBVBjTdZCLCsAgCABtPWyPlv//tUtrWUFHiRwqKMAWR0T+GESgxi8NKb73KG6pYUybg0niU0IA4PxGFCWxqhejqFPVxEYlHKgKc66vfFGW4jUqC1wWtS+RbOTn4euW/TimXYfnwAcBLQyy2bNdUQAAAABJRU5ErkJggg==” class=’comment_emo’/>”);
- 😀 atau yang saya bold dengan warna hijau merupakan kode dari emoticon tersebut.
- Sedangkan yang saya beri tanda kuning tua merupakan Url dari gambar emoticon/ icon dari emoticon tersebut. Url tersebut merupakan url gambar yang sudah saya convert menjadi Base64.
