Cara Membuat Emoticon Kaskus Pada Komentar Blog [Mudah]

Halo sobat..  sekarang kita jumpa lagi di tutorial blog lainya. Kini kita akan membahas gimana Cara Membuat Emoticon Kaskus Pada Komentar Blog. disini berfungsi untuk mempercantik Blog Kita atau mungkin sebagai daya tarik juga untuk para pengunjung Blog anda untuk memberikan Komentar.

Ok langsung saja kita praktekan, dengan bantuan Tutorial berikut ini :

Checkidoooott, hehe

Langkah Pertama

1. Pilih Rancangan => Edit HTML => Centang Expand Widget Template

2.Cari kode seperti dibawah ini :

<b:if cond='data:post.embedCommentForm'>

(di template saya ada 2 kode seperti ini, pilih yang ke 2)

3. Masukkan kode berikut ini tepat di atas kode <b:if cond='data:post.embedCommentForm'>

<b>
<img src='http://i.imgur.com/4a2GG.gif' width='40'/>
:a:
<img src='http://i.imgur.com/Jnwl1.gif' width='40'/>
:b:
<img src='http://i.imgur.com/h9NDs.gif' width='40'/>
:c:
<img src='http://i.imgur.com/IL1IB.gif' width='40'/>
:d:
<img src='http://i.imgur.com/k3Fdh.gif' width='40'/>
:e:
<img src='http://i.imgur.com/ZDlSF.gif' width='40'/>
:f:
<img src='http://i.imgur.com/OXalA.gif' width='40'/>
:g:
<img src='http://i.imgur.com/cnARR.gif' width='40'/>
:h:
<img src='http://i.imgur.com/WTmJr.gif' width='40'/>
:i:
<img src='http://i.imgur.com/kenHK.gif' width='40'/>
:j:
<img src='http://i.imgur.com/aDJrj.gif' width='40'/>
:k:
<img src='http://i.imgur.com/E5qba.gif' width='40'/>
:l:
<img src='http://i.imgur.com/w3vTW.gif' width='40'/>
:m:
<img src='http://i.imgur.com/0WFG2.gif' width='40'/>
:n:
<img src='http://i.imgur.com/bkfG8.gif' width='40'/>
:o:
<img src='http://i.imgur.com/zvteN.gif' width='40'/>
:p:
<img src='http://i.imgur.com/xkzm0.gif' width='40'/>
:q:
<img src='http://i.imgur.com/UqDiW.gif' width='40'/>
:r:
<br/>
<img src='http://i.imgur.com/5uihz.gif' width='40'/>
:s:
<img src='http://i.imgur.com/5O9L2.gif' width='40'/>
:t:
<img src='http://i.imgur.com/7RDAt.gif' width='40'/>
:u:
<img src='http://i.imgur.com/WmQPn.gif' width='40'/>
:v:
<img src='http://i.imgur.com/9C3hy.gif' width='40'/>
:w:
<img src='http://i.imgur.com/fFhYI.gif' width='40'/>
:x:
<img src='http://i.imgur.com/e50uc.gif' width='40'/>
:y:
<img src='http://i.imgur.com/RjY5y.gif' width='40'/>
:z:
<img src='http://i.imgur.com/lrZEF.gif' width='40'/>
:ab:
<br/>
</b>

5. Pasang kode dibawah ini sebelum </body>

<!-- Emoticon  Start -->
<script type='text/javascript'>
//<![CDATA[
a = document.getElementById('comments');
if(a) {
b = a.getElementsByTagName("DD");
for(i=0; i < b.length; i++) {
if (b.item(i).getAttribute('CLASS') == 'comment-body') {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://i.imgur.com/4a2GG.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://i.imgur.com/Jnwl1.gif' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://i.imgur.com/h9NDs.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://i.imgur.com/IL1IB.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://i.imgur.com/k3Fdh.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://i.imgur.com/ZDlSF.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://i.imgur.com/OXalA.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://i.imgur.com/cnARR.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://i.imgur.com/WTmJr.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://i.imgur.com/kenHK.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://i.imgur.com/aDJrj.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://i.imgur.com/E5qba.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://i.imgur.com/w3vTW.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://i.imgur.com/0WFG2.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:o:/gi, "<img src='http://i.imgur.com/bkfG8.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:p:/gi, "<img src='http://i.imgur.com/zvteN.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:q:/gi, "<img src='http://i.imgur.com/xkzm0.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:r:/gi, "<img src='http://i.imgur.com/UqDiW.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:s:/gi, "<img src='http://i.imgur.com/5uihz.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:t:/gi, "<img src='http://i.imgur.com/5O9L2.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:u:/gi, "<img src='http://i.imgur.com/7RDAt.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:v:/gi, "<img src='http://i.imgur.com/WmQPn.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:w:/gi, "<img src='http://i.imgur.com/9C3hy.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:x:/gi, "<img src='http://i.imgur.com/fFhYI.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:y:/gi, "<img src='http://i.imgur.com/e50uc.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:z:/gi, "<img src='http://i.imgur.com/RjY5y.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:ab:/gi, "<img src='http://i.imgur.com/lrZEF.gif' alt='' width='40' class='smiley'/>");
b.item(i).innerHTML = _str;
}
}
}
a = document.getElementById('comments');
if(a) {
c = a.getElementsByTagName("DD");
for(i=0; i < c.length; i++) {
if (c.item(i).getAttribute('CLASS') == 'comment-body-author') {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://i.imgur.com/4a2GG.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://i.imgur.com/Jnwl1.gif' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://i.imgur.com/h9NDs.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://i.imgur.com/IL1IB.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://i.imgur.com/k3Fdh.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://i.imgur.com/ZDlSF.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://i.imgur.com/OXalA.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://i.imgur.com/cnARR.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://i.imgur.com/WTmJr.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://i.imgur.com/kenHK.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://i.imgur.com/aDJrj.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://i.imgur.com/E5qba.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://i.imgur.com/w3vTW.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://i.imgur.com/0WFG2.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:o:/gi, "<img src='http://i.imgur.com/bkfG8.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:p:/gi, "<img src='http://i.imgur.com/zvteN.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:q:/gi, "<img src='http://i.imgur.com/xkzm0.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:r:/gi, "<img src='http://i.imgur.com/UqDiW.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:s:/gi, "<img src='http://i.imgur.com/5uihz.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:t:/gi, "<img src='http://i.imgur.com/5O9L2.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:u:/gi, "<img src='http://i.imgur.com/7RDAt.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:v:/gi, "<img src='http://i.imgur.com/WmQPn.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:w:/gi, "<img src='http://i.imgur.com/9C3hy.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:x:/gi, "<img src='http://i.imgur.com/fFhYI.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:y:/gi, "<img src='http://i.imgur.com/e50uc.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:z:/gi, "<img src='http://i.imgur.com/RjY5y.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:ab:/gi, "<img src='http://i.imgur.com/lrZEF.gif' alt='' width='40' class='smiley'/>");
c.item(i).innerHTML = _str;
}
}
}
//]]>
</script>
<!-- Emoticon  End -->

6. Langkah terakhir jika sudah Simpan Template

 7. Kelar deh.. g kerasa kan, hehe. sekarang silahkan di cek .

SELAMAT MENCOBA, SEMOGA BERHASIL

Cukup sekian,

Jangan lupa Follow & Coment ya :)

Share this post