Cara Menambakan Emoticon Pada Posting Blog

Setelah mendapatkan kejutan yang menarik pagi hari tadi, dan saya juga senang karena Raksasa Jerman  Bayer Munchen berhasil mempermalukan Barcelona dengan skor 3-0 tanpa balas dengan begitu Agregat menjadi 7-0  ...
Ok masuk pada pembahasan utama, disini saya akan share cara memunculkan emoticon pada halaman posting sehingga postingan menjadi lebih hidup dan menarik tentunya..   Ini merupakan tutorial lanjutan dari "Menambahkan Emoticon Pada Komentar" sebenarnya mudah saja, jika anda sudah menambahkan emoticon pada komentar blogspot dengan tutorial lanjutan tersebut tidak perlu lagi menambahlan javascript emoticon untuk posting blog, kita hanya tinggal menambahkan kode css ".post-body" saja pada javascript untuk memunculkan emoticonya agar emoticon juga tampil pada postingan.
Kurang lebih seperti ini: 

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

 Tambahkan tanda koma ( , ) diakhir .post-body sehingga menjadi seperti ini .post-body,

Kemudian tambahkan kode css berikut ini dibawah kode ]]></b:skin>

<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> 

 Tutorial diatas untuk anda yang sudah menerapkan Emoticon pada komentar dengan mengikuti tutorial "Menambahkan Emoticon Pada Komentar Blogspot" dari blog ini ataupun dari MKR-Site.

Tutorial 2

Bagi anda yang hanya ingin menambahkan emoticon pada postingan saja, ikuti langkah-langkah berikut ini:
1. Letakkan kode jquery berikut ini diatas kode </head> 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Itu merupakan kode jQuery, jika pada template anda sudah terdapat kode jquery maka tidak usah ditambahkan lagi, atau anda juga bisa mengganti jQuery yang ada pada template anda untuk jaga-jaga kalau nanti emoticonya tidak bisa muncul.  
Ingat !! saya tidak bosan-bosanya untuk mengingatkan bahwa pada setiap template hanya boleh terdapat satu jQuery-min dan satu jQuery-UI-min.

2. Letakkan kode CSS berikut ini dibawah kode ]]></b:skin>

<style>

.emo.delayLoad { display:inline; text-align:left; margin:0; padding:1px; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; border:none; background-color:transparent; border-radius:none; -moz-border-radius:none; -webkit-border-radius:none }

</style> 

 3. Letakkan kode berikut ini diatas kode </body>

<script type='text/javascript'>

//<![CDATA[

// kode js untuk menampilkan emoticon

jQuery(document).ready(function () {emoticonx({

emoRange:".post-body, div.emoWrap",

})

});

//]]> 

</script>

<script src='https://boyz.googlecode.com/svn/JS/emoticonnya.js' type='text/javascript'/>

 Simpel kan?? hanya saja saya tidak menggunakan hosting untuk java scriptnya karena itu bisa terhapus kapan saja, saya lebih memilihnya untuk menguraikan saja kodenya dan meletakkannya didalam template jadi lebih aman..

Semoga bermanfaat :)