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.



Ardhiansyam | Find us on Google+ | Kontak | Follower? klik di sini | Sitemap | Versi Mobile | ke atas ↑