Emotikon Onion di Kotak Komentar Blogger

Tulisan ini berawal dari permintaan Sobat TomieDLuffy tentang script yang saya gunakan untuk menampilkan emotikon Onion di kotak komentar blog ini. Tutorial dan gambar emotikonnya saya ambil dari blognya Mas Kendhin (yang kebetulan file javascript untuk emotikon Onionnya lagi eror), jadi bagi sobat yang (kebetuan) juga belum menyimpan javascriptnya, dapat mengikuti bahasan (tutorial) berikut ini.


1. Buka halaman Edit HTML
2. Beri tanda centang pada kotak "expand widget template"
3. Lalu letakkan script berikut sebelum kode </body>


<!-- emot -->
<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(/:f/gi, "<img alt='capek' src='http://i629.photobucket.com/albums/uu15/wwshine/capek.gif' class='smiley'/>");
_str = _str.replace(/:D/gi, "<img alt='tertawa' src='http://i629.photobucket.com/albums/uu15/wwshine/bigsmile.gif' class='smiley'/>");
_str = _str.replace(/:x/gi,"<img alt='cinta' src='http://i629.photobucket.com/albums/uu15/wwshine/love.gif' class='smiley'/>");
_str = _str.replace(/:\$/gi, "<img alt='katakan' src='http://i629.photobucket.com/albums/uu15/wwshine/malu.gif' class='smiley'/>");

_str = _str.replace(/;\;\)/gi, "<img alt='kagum' src='http://i629.photobucket.com/albums/uu15/wwshine/kagum.gif' class='smiley'/>");
_str = _str.replace(/x\(/gi, "<img alt='marah' src='http://i629.photobucket.com/albums/uu15/wwshine/marah.gif' class='smiley'/>");
_str = _str.replace(/:\?/gi, "<img alt='bingung' src='http://i629.photobucket.com/albums/uu15/wwshine/bingung.gif' class='smiley'/>");
_str = _str.replace(/:@/gi, "<img alt='pusing' src='http://i629.photobucket.com/albums/uu15/wwshine/mumet.gif' class='smiley'/>");
_str = _str.replace(/:\~/gi, "<img alt='muntah' src='http://i629.photobucket.com/albums/uu15/wwshine/muntah.gif' class='smiley'/>");
_str = _str.replace(/:\|/gi, "<img alt='mentok' src='http://i629.photobucket.com/albums/uu15/wwshine/mentok.gif' class='smiley'/>");
_str = _str.replace(/:\)\)/gi, "<img alt='ngakak' src='http://i629.photobucket.com/albums/uu15/wwshine/ngakak.gif' class='smiley'/>");
_str = _str.replace(/:\(\(/gi, "<img src='http://i629.photobucket.com/albums/uu15/wwshine/tolong.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\(/gi, "<img alt='sedih' src='http://i629.photobucket.com/albums/uu15/wwshine/sedih.gif' class='smiley'/>");
_str = _str.replace(/:s/gi, "<img alt='senang' src='http://i629.photobucket.com/albums/uu15/wwshine/senang.gif' class='smiley'/>");
_str = _str.replace(/:o/gi, "<img alt='wow' src='http://i629.photobucket.com/albums/uu15/wwshine/wow.gif' class='smiley'/>");
_str = _str.replace(/:\)/gi, "<img alt='senyum' src='http://i629.photobucket.com/albums/uu15/wwshine/hi.gif' 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(/:f/gi, "<img src='http://i629.photobucket.com/albums/uu15/wwshine/capek.gif' alt='' class='smiley'/>");
_str = _str.replace(/:D/gi, "<img src='http://i629.photobucket.com/albums/uu15/wwshine/bigsmile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:x/gi,"<img src='http://i629.photobucket.com/albums/uu15/wwshine/love.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\$/gi, "<img src='http://i629.photobucket.com/albums/uu15/wwshine/malu.gif' alt='' class='smiley'/>");

_str = _str.replace(/;\;\)/gi, "<img src='http://i629.photobucket.com/albums/uu15/wwshine/kagum.gif' alt='' class='smiley'/>");
_str = _str.replace(/x\(/gi, "<img src='http://i629.photobucket.com/albums/uu15/wwshine/marah.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\?/gi, "<img src='http://i629.photobucket.com/albums/uu15/wwshine/bingung.gif' alt='' class='smiley'/>");
_str = _str.replace(/:@/gi, "<img src='http://i629.photobucket.com/albums/uu15/wwshine/mumet.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\~/gi, "<img src='http://i629.photobucket.com/albums/uu15/wwshine/muntah.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\|/gi, "<img src='http://i629.photobucket.com/albums/uu15/wwshine/mentok.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\)\)/gi, "<img src='http://i629.photobucket.com/albums/uu15/wwshine/ngakak.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\(\(/gi, "<img src='http://i629.photobucket.com/albums/uu15/wwshine/tolong.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\(/gi, "<img src='http://i629.photobucket.com/albums/uu15/wwshine/sedih.gif' alt='' class='smiley'/>");
_str = _str.replace(/:s/gi, "<img src='http://i629.photobucket.com/albums/uu15/wwshine/senang.gif' alt='' class='smiley'/>");
_str = _str.replace(/:o/gi, "<img src='http://i629.photobucket.com/albums/uu15/wwshine/wow.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\)/gi, "<img src='http://i629.photobucket.com/albums/uu15/wwshine/hi.gif' alt='' class='smiley'/>");
c.item(i).innerHTML = _str;
}
}
}
//]]>
</script>
<!-- end emot -->

4. Cari kode berikut


<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>


5. Kemudian letakkan kode berikut setelah kode
<p class='comment-footer'>

<b><center><img border='0' src='http://i629.photobucket.com/albums/uu15/wwshine/capek.gif'/>
:f
<img border='0' src='http://i629.photobucket.com/albums/uu15/wwshine/bigsmile.gif'/>
:D
<img border='0' src='http://i629.photobucket.com/albums/uu15/wwshine/hi.gif'/>
:)
<img border='0' src='http://i629.photobucket.com/albums/uu15/wwshine/kagum.gif'/>
;;)
<img border='0' src='http://i629.photobucket.com/albums/uu15/wwshine/love.gif'/>
:x
<img border='0' src='http://i629.photobucket.com/albums/uu15/wwshine/malu.gif'/>
:$
<img border='0' src='http://i629.photobucket.com/albums/uu15/wwshine/marah.gif'/>
x(
<img border='0' src='http://i629.photobucket.com/albums/uu15/wwshine/bingung.gif'/>
:?
</center></b>
<br/>
<b>
<center><img border='0' src='http://i629.photobucket.com/albums/uu15/wwshine/mumet.gif'/>
:@
<img border='0' src='http://i629.photobucket.com/albums/uu15/wwshine/muntah.gif'/>
:~
<img border='0' src='http://i629.photobucket.com/albums/uu15/wwshine/mentok.gif'/>
:|
<img border='0' src='http://i629.photobucket.com/albums/uu15/wwshine/ngakak.gif'/>
:))
<img border='0' src='http://i629.photobucket.com/albums/uu15/wwshine/sedih.gif'/>
:(
<img border='0' src='http://i629.photobucket.com/albums/uu15/wwshine/senang.gif'/>
:s
<img border='0' src='http://i629.photobucket.com/albums/uu15/wwshine/tolong.gif'/>
:((
<img border='0' src='http://i629.photobucket.com/albums/uu15/wwshine/wow.gif'/>
:o </center></b>


6. Simpan template Anda dan lihat hasilnya.

  • Catatan: Untuk menghindari kehabisan bandwidth, silakan simpan gambar-gambar emotikon tersebut di image hosting Anda.



17 komentar:

  1. tks.. sob... langsung .. di tes...

    kemarin.. sy kan.. sempat buat.. tp script dr kendhin dah gk kerja lg... belum sempat di copy T_T

    1x tks... bngt.. :)

    BalasHapus
  2. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  3. mas...
    koq kotak komentar aq jadi ada dua?
    gimana tu mas?
    kotak yang 1 ada emoticon, tp yg satu lg gag da.
    gmana ngilangin'a mas?

    BalasHapus
  4. mas...
    di bawah emoticon'a koq ada bacaan gini

    Link ke posting ini

    Buat sebuah Link

    gmana cara mnghilangkan'a mas?

    BalasHapus
  5. :@ duuuh... di kotak koment udah keluar emoticonnya.
    tapi waktu di ketik code emoticonnya, gak keluar gambarnya mas!!!
    :@
    :@
    :@
    :@

    BalasHapus
  6. @taufiklink: mungkin kodenny dobel, silakan cek kembali

    Coba masuk ke pengaturan > format

    @Fadli: coba cek lagi penempatan kodenya

    BalasHapus
  7. nambah ilmu lg..
    thx ya kawan..:D

    BalasHapus
  8. Mas...
    sepertinya kejadian yg saya alami sama seperti tooltips, gak bekerja jg nih mas. :?
    gak muncul emoticonnya mas..

    tapi saat saya coba di sini

    http://bangdel.blogspot.com/2009/10/pasang-emoticon-di-atas-kotak-komentar.html

    berhasil mas!

    coba di cek lg yha mas...
    :D

    BalasHapus
  9. taufikdisc™
    ternyata posting ini dan posting tipsy memang error sob, saya posting pake WLW, sekarang dah beres. Makasih :D

    BalasHapus
  10. Nah...
    ini baru berhasil mas...:D
    sama-sama mas..

    BalasHapus

Formulir Kontak

Nama

Email *

Pesan *

[ Instagram M2D ]

[ Favorit ]

Malam Marah Malam Ramah

Apalah yang istimewa dengan malam? malam tak lebih dari kegelapan yang menyelimuti sesuatu yang tak pantas menikmati kelembutan cahaya, kera...

[ Referral ]

Ardhiansyam | Kontak | Sitemap | ke atas ↑