Cara Mengaktifkan Emoji di Postingan Blog ala Blog X Komo

Cara Mengaktifkan Emoji di Postingan Blog ala Blog X Komo

Tutorial Membuat Shortcut Emoticon Emoji di Postingan Blog - Cara Mudah Menggunakan Emoticon / Emoji di blog. Hai sahabat Blogger Indonesia :D lama ya saya tidak posting seputar blogging :p nah kali ini saya mau posting tutorial bagaimana sih caranya pakai Emoji di postingan Blog seperti Blog X Komo? kamu bisa lihat postingan Blog X Komo pasti ada emoji di tiap postingannya. Saya lebih suka posting blog itu menggunakan emoji biar bisa menyampaikan ekspresi, sekaligus juga mempercantik blog saya :D :) :hehe
       Sebenarnya banyak Blog yang menyajikan tutorial memasang emoticon di blog, namun kebanyakan tutorial itu emoji nya tidak bisa kita panggil atau gunakan secara singkat contohnya saja artikel yang pernah di bikin sama mas Adhy dari KompiAjaib. Beliau membuat tutorial Emoji untuk postingan blog tapi sayang nya kita harus menggunakan kode pemanggilnya itu berupa huruf dan angka-angka, jelas akan sulit menggunakan tutorial tersebut dan di aplikasikan ke blog kita. Karena akan ribet kalau kita harus ngetik banyak huruf dan angka hanya untuk menggunakan emoji/emoticon di dalam postingan.
       Karena itu saya berpikir untuk membuat nya jadi lebih simpel dan sederhana seperti kita menggunakan emotikon di facebook, Contoh nya mau bikin emoticon ini :D kita hanya perlu mengetik tanda : (titik dua) dan huruf D. Tapi keduanya tanpa spasi, dan jadilah :D mudah bukan? pada Script Emoji untuk postingan blog ini sangat sederhana dan kita bisa custom shortcut / key emoticon nya sesuka hati kita :)
Syarat dalam Code ini adalah:
  • Ketika kita sudah membuat kode 2 digit, Contoh :ma maka kita tidak bisa menggunakan kode/shortcut yang menggunakan :ma di awal seperti :mau :main :mas . emoticon yang muncul akan menjadi :mau (emotikonu) :main (emotikonin) :mas (emotikonas)
  • Contoh jelas nya ini, saya sudah membuat shortcut : dan D kalau saya tulis : Di maka menjadi :Di, : Duh menjadi :Duh dst
  • Penggunaan kode pemanggil saat mau kustomisasi: jika menggunakan huruf penulisan yang benar /\s:-*a/g dan jika menggunakan tanda penulisan nya seperti ini /\s:-*\)/g harus di awali tanda \ setelah * :) ;)
  • untuk mengganti gambar emoji nya kamu bisa ganti URL Gambar di dalam src="..." dan mengubah keterangan gambar pada tulisan di dalam alt="..."
itu lah beberapa ketentuan yang harus di ikuti jika ingin menggunakan Code Emoji ini untuk Blog kamu. Sekarang kita bahas Cara Instal Emoji di Postingan Blog yah :D :) :hihi

Langkah Pertama, Simpan terlebih dahulu coding CSS berikut tepat di atas tag </style> :
.post-body img#new{width:18px;vertical-align:middle}
Ubah value width="18px" untuk mengatur besar kecil nya gambar emoji.

Langkah Ke Dua, Copy Code di bawah ini dan kemudian Paste-kan :ke di atas Akhiran Tag </body>  atau tepat di bawah <body>:
[
<script type='text/javascript'>
//<![CDATA[
// Creadted by Blog X KOMO (www.xkomo.com)
document.getElementsByClassName = function(clsName){
    var retVal = new Array();
    var elements = document.getElementsByTagName("*");
    for(var i = 0;i < elements.length;i++){
        if(elements[i].className.indexOf(" ") >= 0){
            var classes = elements[i].className.split(" ");
            for(var j = 0;j < classes.length;j++){
                if(classes[j] == clsName)
                    retVal.push(elements[i]);
            }
        }
        else if(elements[i].className == clsName)
            retVal.push(elements[i]);
    }
    return retVal;
}

function addSmiley(){
  var postBodyClass = (postBodyClass) ? postBodyClass : 'post-body';
  var d = document.getElementsByClassName(postBodyClass);
  for(var i=0;i<d.length;i++){
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\)/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f600.png" alt="emoticon smile" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*'\)/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f601.png" alt="emoticon more smile" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s;-*\)/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f609.png" alt="emoticon blink" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s;-*'\)/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f604.png" alt="emoticon keep smile" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*hm/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f615.png" alt="emoticon hm" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*hem/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f611.png" alt="emoticon hem" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*em/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f612.png" alt="emoticon curiga" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*mm/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f610.png" alt="emoticon mmm..." style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\$/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f633.png" alt="emoticon oops" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\(/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f625.png" alt="emoticon sad" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*'\(/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f62d.png" alt="emoticon saddes" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s;-*\(/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f630.png" alt="emoticon sedih" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s;-*'\(/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f622.png" alt="emoticon mewek" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*sedih/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f623.png" alt="emoticon lagi sedih" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*mewek/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f62b.png" alt="emoticon mau mewek" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*hua/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f62d.png" alt="emoticon mau mewek" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*D/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f601.png" alt="emoticon nyengir" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*'D/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f603.png" alt="emoticon nyengir parah" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s;-*D/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f604.png" alt="emoticon ketawa" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s;-*'D/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f605.png" alt="emoticon ketawa bener" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*haha/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f602.png" alt="emoticon hahaha" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*hihi/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f601.png" alt="emoticon hihihi" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*wkwk/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f638.png" alt="emoticon kwkwkw" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*ckck/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f63a.png" alt="emoticon kckckck" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*ngakak/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f639.png" alt="emoticon ngakak" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*ketawa/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f63a.png" alt="emoticon ketawa" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*lol/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f602.png" alt="emoticon lol" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*lucu/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f63b.png" alt="emoticon lucu" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*hehe/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f605.png" alt="emoticon hehe" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*p/g, '<img src="http://twemoji.maxcdn.com/36x36/1f60b.png" alt="emoticon tongue" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*'p/g, '<img src="http://twemoji.maxcdn.com/36x36/1f61b.png" alt="emoticon melet" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s;-*p/g, '<img src="http://twemoji.maxcdn.com/36x36/1f61c.png" alt="emoticon ok meler" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s;-*'p/g, '<img src="http://twemoji.maxcdn.com/36x36/1f61d.png" alt="emoticon huee" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*wee/g, '<img src="http://twemoji.maxcdn.com/36x36/1f61b.png" alt="emoticon wee" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*hwe/g, '<img src="http://twemoji.maxcdn.com/36x36/1f61c.png" alt="emoticon hwee" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*wuek/g, '<img src="http://twemoji.maxcdn.com/36x36/1f61d.png" alt="emoticon wueek" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*ke/g, ' <img src="http://twemoji.maxcdn.com/36x36/27a1.png" alt="emoticon right" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\@/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f621.png" alt="emoticon angry" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*\#/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f616.png" alt="emoticon sealed" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*x/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f632.png" alt="emoticon oh" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*oh/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f62e.png" alt="emoticon oeye" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*no/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f44e.png" alt="emoticon no" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*yes/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f44d.png" alt="emoticon yes" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*ok/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f44c.png" alt="emoticon ok" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*uh/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f624.png" alt="emoticon uh" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*hebat/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f44f.png" alt="emoticon hebat" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*cool/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f60e.png" alt="emoticon cool" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*wah/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f649.png" alt="emoticon wah" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*ups/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f64a.png" alt="emoticon ups" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*hai/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f44b.png" alt="emoticon hai" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*comment/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f4ac.png" alt="emoticon comment" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*dollar/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f4b0.png" alt="emoticon dollar" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*email/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f4ec.png" alt="emoticon E-mail" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*foto/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f4f7.png" alt="emoticon photo" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*video/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f4f9.png" alt="emoticon video" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*lock/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f512.png" alt="emoticon lock" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*love/g, ' <img src="http://twemoji.maxcdn.com/36x36/2764.png" alt="emoticon love" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*warning/g, ' <img src="http://twemoji.maxcdn.com/36x36/26d4.png" alt="emoticon warning" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*salah/g, ' <img src="http://twemoji.maxcdn.com/36x36/2716.png" alt="emoticon salah" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*benar/g, ' <img src="http://twemoji.maxcdn.com/36x36/2714.png" alt="emoticon E-mail" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*copyright/g, ' <img src="http://twemoji.maxcdn.com/36x36/a9.png" alt="emoticon Copyright" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*search/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f50e.png" alt="emoticon search" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*peri/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f607.png" alt="emoticon peri" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*maaf/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f647.png" alt="emoticon Maaf" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*mulai/g, ' <img src="http://twemoji.maxcdn.com/36x36/25b6.png" alt="emoticon mulai" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*ngopi/g, ' <img src="http://twemoji.maxcdn.com/36x36/2615.png" alt="emoticon ngopi" style="border:0; margin:0; padding:0;" id="new" /> ');
        d[i].innerHTML = d[i].innerHTML.replace(/\s:-*hp/g, ' <img src="http://twemoji.maxcdn.com/36x36/1f4f1.png" alt="emoticon hp" style="border:0; margin:0; padding:0;" id="new" /> ');
    }

}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

addLoadEvent(addSmiley);
//]]>
</script>
]
Maka Hasilnya akan seperti ini:
[.....
.....
addLoadEvent(addSmiley);
//]]>
</script>
</body>
]
Untuk Theme emoji nya sendiri bisa kamu ganti dengan emoji yang lain atau bisa gunakan theme emoji berikut:
- twemoji
- All github Emoji (Smiles)
Note:Penting nih, Ketika kamu Copy - Paste coding diatas pastikan tulisan document berada di line baru.
contoh:
// Created by Blog X KOMO (www.xkomo.com)
document.getElementsByClassName
Jangan sampai sejajar / 1 line ya antara documment dengan //created ;) :ok

Script diatas bisa kamu download di bawah ini via google drive
Coding Javascript Emoji for Post Blog

Download File

       Begitulah Tutorial Cara Mengaktifkan Emoji di Postingan Blog ala Blog X Komo :) Emoji di atas merupakan modifikasi dari saya, kamu bebas mau menggunakan emoji tersebut untuk apa saja, tapi di sarankan jangan di hapus ya credit nya :p lumayan capek loh bikin nya satu persatu :(
      Semoga bermanfaat yah, jangan lupa untuk share artikel ini ke teman - teman blogger, siapa tahu artikel ini yang di butuhkan oleh teman kamu :) ;) :ok

Jika ada yang ingin di tanyakanan / di diskusikan bersama saya, silahkan gabung ke forum saya

Join Now