CARA MEMASANG EMOTICON MENARIK PADA KOMENTAR BLOG

Ditulis Oleh Sulaiman Budi Yulianto | Sabtu, 22 Desember 2012 | 01:10 AM

 Menambahkan Emoticon Menarik Pada Komentar Blog ini mengadopsi dari beberapa artikel sobat blogger dan saya  lengkapi. Memasang emoticon atau smiley pada ruanng komentar blog secara otomatis, cukup hanya kita mengetikkan simbolnya maka nanti akan tampil gambar emoticon yang kamu inginkan (seperti pada ruang "postingan" ini), yang terkadang kita ingin memberi sebuah emosi pada tulisan kita, biar pada komentar kamu lebih ber-ekspresi   .



       Sebelumnya artikel seperti ini sudah dipasang dibeberapa artikel lainnya juga namun cara yang satu ini dijamin gak ribet dan sangat mudah, cocok dipasang di blog kamu dan akan saya tambahkan beberapa cara lain. Ikuti tutorialnya dibawah ini : 

Agar lebih aman, sebaiknya “backup” ato simpan dulu template anda dengan mengklik Download Template Lengkap. Ok!, klo sudah di “backup”, langsung aja ke prosedur pemasangan emoticon ini. Ikuti langkah berikut ini:


1.Langkah Pertama, Login dulu ke Dasbor -->; Edit HTML.


2.Langkah Selanjutnya, Jangan lupa centang Expand Template Widget

3.Lalu cari kode dibawah ini:
<div class='post-footer-line post-footer-line-3'/>

</div>
</div>
</div>

Untuk mempermudah gunakan perintah “ctrl+F”.

4. COPAS/Pasang kode berikut ini:

<!-- emoticon  mainbom.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align:center; font-weight:bold; margin-top:15px; margin-bottom:10px;'>
Untuk menggunakan “emoticon” ini pada kotak komentarnya, cukup “COPAS” aja kodenya (Jangan Gambar) ya Sob…
</div>
<b>
<img src='http://i.imgur.com/Jnwl1.gif' width='40'/>
:a:
<img src='http://i.imgur.com/h9NDs.gif' width='40'/>
:b:
<img src='http://i.imgur.com/IL1IB.gif' width='40'/>
:c:
<img src='http://i.imgur.com/k3Fdh.gif' width='40'/>
:d:
<img src='http://i.imgur.com/ZDlSF.gif' width='40'/>
:e:
<img src='http://i.imgur.com/OXalA.gif' width='40'/>
:f:
<img src='http://i.imgur.com/cnARR.gif' width='40'/>
:g:
<img src='http://i.imgur.com/WTmJr.gif' width='40'/>
:h:
<br/>
<img src='http://i.imgur.com/kenHK.gif' width='40'/>
:i:
<img src='http://i.imgur.com/aDJrj.gif' width='40'/>
:j:
<img src='http://i.imgur.com/E5qba.gif' width='40'/>
:k:
<img src='http://i.imgur.com/w3vTW.gif' width='40'/>
:l:
<img src='http://i.imgur.com/0WFG2.gif' width='40'/>
:m:
<img src='http://i.imgur.com/bkfG8.gif' width='40'/>
:n:
<img src='http://i.imgur.com/zvteN.gif' width='40'/>
:o:
<img src='http://i.imgur.com/xkzm0.gif' width='40'/>
:p:
<img src='http://i.imgur.com/UqDiW.gif' width='40'/>
:q:
<br/>
<img src='http://i.imgur.com/5uihz.gif' width='40'/>
:r:
<img src='http://i.imgur.com/5O9L2.gif' width='40'/>
:s:
<img src='http://i.imgur.com/7RDAt.gif' width='40'/>
:t:
<img src='http://i.imgur.com/WmQPn.gif' width='40'/>
:u:
<img src='http://i.imgur.com/9C3hy.gif' width='40'/>
:v:
<img src='http://i.imgur.com/fFhYI.gif' width='40'/>
:w:
<img src='http://i.imgur.com/e50uc.gif' width='40'/>
:x:
<img src='http://i.imgur.com/RjY5y.gif' width='40'/>
:y:
<img src='http://i.imgur.com/lrZEF.gif' width='40'/>
:z:

<img src='http://i.imgur.com/4a2GG.gif' width='40'/>
:aa:

"<img src='http://i.imgur.com/KJbrk.gif' alt='' width='40' class='smiley'/>

:ab:
<br/>
</b>
</b:if>

Lalu taruh di bawah kode </div> yang terakhir, kode tersebut berfungsi untuk menampilkan emoticonnya.

5. Cari kode penutup </body>.

6. Copy kode-kode pada kotak dibawah ini:

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

_str = _str.replace(/:ab:/gi, "<img src='http://i.imgur.com/KJbrk.gif' alt='' width='40' class='smiley'/>");
b.item(i).innerHTML = _str;
}}}
//]]>
</script>

5. Letakan code tersebut di atas, untuk memanggil emoticon saat berkomentar.

7. “Save” dan lihat hasilnya. 

Catatan Penting!!:  Untuk beberapa jenis "template blogger" hasil download (bukan template standar bawaan "blogspot.com"), emoticon tidak dapat digunakan pada ruang komentar.  Tidak "support" (karena terdapat perbedaan kode script bawaan yang berbeda) dengan kode di atas. Tpi untuk "template" bawaan maka emoticon ini akan bekerja, contohnya pada blog ini (dapat bekerja dengan baik).