Emotikon Onion Pada Kotak Komentar

Share

topgans.blogspot.com - Hello sobat blogger, saya lagi rajin-rajinnya update nih..hehe. Di postingan kali ini saya akan membahas cara menambahkan Emotion Onion (Kucing Lucu) ini pada kotak komentar sobat ,Penasaran bagaimana penampakannya ? Silahkan di simak deh..

Emotikon Onion Pada Kotak Komentar,Eh iya Tutorial dan gambar emotikonnya saya ambil dari blognya Mas Kendhin (yang kebetulan file javascript untuk Emotikon Onionnya lagi error), jadi bagi sobat yang (kebetuan) juga belum menyimpan javascriptnya, dapat mengikuti bahasan (Tutorial) berikut ini.

1. Buka halaman Edit HTML2. 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.
Jika penasaran untuk melihat contoh hasilnya bisa langsung menuju Colour Theory 27 (blog portofolio kuliah saya , hehe) . Emotion ini cukup populer loh sobat blogger , dan tentunya dapat mempercantik tampilan blog sobat , biar berkesan mahal .. hehe

• Catatan : Untuk menghindari kehabisan bandwidth, silakan simpan gambar-gambar emotikon tersebut di image hosting Anda.  
• Bila ada masalah atau pertanyaan silahkan tinggalkan komentar sobat atau hubungi saya lewat Contact Us  dan secepatnya akan saya bantu..

Related Posts by Categories