Membuat Shortcut Smiley/Emoticon Sederhana

  Berikut tips sederhana untuk membuat shortcut smiley di kotak reply hingga nantinya akan berubah menjadi bentuk gambar. Karena berbasis CSS, hanya berlaku di halaman reguler (halaman mail inbox dan mobile tidak kelihatan).
Berikut kodenya (upload CSS) :

/*--------START HERE--------*/
like:after {
background: url("http://images.multiply.com/common/smiles/thumbs_up.png") no-repeat scroll center center transparent;
color: transparent;
content: "suka";
font-size: 10px;
padding: 5px 0px 8px;
}
dislike:after {
background: url("http://images.multiply.com/common/smiles/thumbs_down.png") no-repeat scroll center center transparent;
color: transparent;
content: "unlike";
font-size: 10px;
padding: 5px 0px 8px;
}
/*---------END HERE---------*/

 

Jadi, saat ingin menampilkan tanda jempol (thumb up atau thumb down) di akhir komentar, cukup dengan mengetik <like> atau <dislike> di kotak komentar maka akan muncul gambarnya.

<like>
<dislike>

   
Ps. Kode ini bisa juga dikembangkan dengan smiley/emoticon yang lainnya. Silahkan Praktek Disini.