Cara Memasang Emoticon Didalam Komentar Blog Dengan Mudah

  Komentar adalah salah satu yang wajib ada didalam setiap blog. komentar ditujukan kepada para pengunjung untuk memberikan tanggapannya mengenai postingan ataupun artikel  yang ada didalam blog tersebut. Sedangkan emoticon merupakan salah satu fitur yang tersedia didalam komentar blog. Dengan menggunakan emoticon mereka bisa lebih berekspresi secara bebas.


Cara Memasang Emoticon Didalam Komentar Blog Dengan Mudah


  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 == &quot;item&quot;'>
    <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(/: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'/>");


  • :D 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.

3. Simpan -> Selesai.
Copyright 2017 Teleformatika. Diberdayakan oleh Blogger.