Menambahkan Emoticon Onion Pada Komentar Blogger

Kali ini Dhedy akan membagikan tutorial Menambahkan Emoticon Onion Pada Komentar Blogger.
Script ini Saya peroleh dari MKR dan MDF yang Saya gabungkan dengan image Onion koleksi saya.

Menambahkan Emoticon pada komentar bertujuan agar komentator bisa mengexpresikan diri dengan emoticon yang ada agar suasana pada saat berkomentar menjadi lebih hidup.

Penerapan Di Blogger

NB: Sebelum mengutak-atik template, ada baiknya di back up terlebih dahulu!!!

1. Login Akun Blogger anda
2. Pada Dashboard pilih Template » Edit HTML
3.Salin Kode dibawah inia, lalu letakan di atas kode </head>

12<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="https://dmblog-project.googlecode.com/svn/Emoticononion.js" type="text/javascript"></script>

NB:Karena manipulasi ini menggunakan jQuery maka setidaknya ditemplate anda harus ada jQuery library [line-1]. Jika sudah ada jQuery library di template anda maka code pada line-1 jangan dicopy.

Salin kode di bawah ini, kemudian letakkan tepat sebelum/di atas kode </body>

1234567891011121314151617181920212223242526<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Klik untuk melihat code!",
emoMessage:"Untuk memasukkan emoticon setidaknya ada satu spasi sebelum kode emoticon."
})
});
//]]>
</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Klik untuk melihat code!",
emoMessage:"Untuk memasukkan emoticon setidaknya ada satu spasi sebelum kode emoticon."
})
});
//]]>
</script>
</b:if>

4. Jangan Lupa menambahkan kode CSS ini agar lebih menarik.

<style>
.emo.delayLoad { display:inline; text-align:left; margin:0; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; border:none; background-color:transparent; width:auto; height:auto; border-radius:none; -moz-border-radius:none; -webkit-border-radius:none }
</style>