Emoticons merupakan sekumpulan icon-icon yang bisa digunakan untuk mengekspresikan kondisi dengan sebuah gambar. misal ketika kondisi lagi sedih, senang atau lagi tertawa.
 |
| Ekspresi Sedih |
|
|
|
 |
| Ekspresi senang |
 |
| Ekspresi tertawa |
Emoticons bisa anda buat sendiri tentunya dengan gambar pilihan anda atau juga anda bisa menggunakan emoticons punya bang yahoo, untuk tutorial kali ini saya akan menggunakan emoticon dari yahoo yang telah saya modifikasi.
Untuk menambahkan emoticon pada blog anda ikuti langkah-langkah berikut:
- login pada blog anda
- setelah itu masuk pada menu design/template, pilih tab edit html
- klik check pada menu Expand Widget Templates
- didalam script yang ada dalam textbox bawahnya cari baris script berikut
</body>
kalo pake mozilla bisa pake Ctrl+F untuk melakukan pencarian.
- kemudian diatasnya script itu tambahkan script dibawah ini:
<script type='text/javascript'>
function test(prm, prm2){
document.getElementById('txtsmile').value = prm;
document.getElementById('txtsmile').select();
document.getElementById('imgsmile').src = prm2;
}
</script>
<script src='https://www.sugarsync.com/pf/D6837761_654_69292876' type='text/javascript'/>
- selanjutnya cari baris berikut
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
- kemudian dibawah script tersebut tambahkan script dibawah ini:
<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #000000; padding: 5px; background: #cccccc; height:86'>
<div align='center'><h2>Smile Icon</h2></div>
<b>
<img onclick='test(";))",this.src);' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' style='cursor:pointer;'/>
<img onclick='test(";;)",this.src);' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' style='cursor:pointer;'/>
<img onclick='test(":D",this.src);' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' style='cursor:pointer;'/>
<img onclick='test(";)",this.src);' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' style='cursor:pointer;'/>
<img onclick='test(":p",this.src);' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' style='cursor:pointer;'/>
<img onclick='test(":((",this.src);' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' style='cursor:pointer;'/>
<img onclick='test(":)",this.src);' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' style='cursor:pointer;'/>
<img onclick='test(":(",this.src);' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' style='cursor:pointer;'/>
<img onclick='test(":-o",this.src);' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' style='cursor:pointer;'/>
<img onclick='test(":-/",this.src);' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' style='cursor:pointer;'/>
<img onclick='test(":-*",this.src);' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' style='cursor:pointer;'/>
<img onclick='test(":|",this.src);' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' style='cursor:pointer;'/>
<img onclick='test("8-}",this.src);' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' style='cursor:pointer;'/>
<img onclick='test(":)]",this.src);' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' style='cursor:pointer;'/>
<img onclick='test("~x(",this.src);' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' style='cursor:pointer;'/>
<img onclick='test(":-t",this.src);' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' style='cursor:pointer;'/>
<img onclick='test("b-(",this.src);' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' style='cursor:pointer;'/>
<img onclick='test(":-L",this.src);' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' style='cursor:pointer;'/>
<img onclick='test("x(",this.src);' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' style='cursor:pointer;'/>
<img onclick='test("=))",this.src);' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' style='cursor:pointer;'/>
</b>
<br/><br/>
Drag nilai ini kedalam box komentar anda:
<input id='txtsmile' name='txtsmile' onClick='javascript:this.select();' size='1' style='border: 1px solid #4688B8; cursor:pointer; background-color:#CCCCCC; text-align:center;' type='text' value=''/>
=>
<img id='imgsmile' src=''/>
</div>
- setelah semua selesai klik tombol save template untuk menyimpan
- kemudian refresh blog anda, masuk dibagian komentar maka akan tampak seperti ini:
semoga bermanfaat ....
