
Ok masuk pada pembahasan utama, disini saya akan share cara memunculkan emoticon pada halaman posting sehingga postingan menjadi lebih hidup dan menarik tentunya..

Kurang lebih seperti ini:
Tambahkan tanda koma ( , ) diakhir .post-body sehingga menjadi seperti ini .post-body,
<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>
Kemudian tambahkan kode css berikut ini dibawah kode ]]></b:skin>
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.
<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 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>
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.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
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>
3. Letakkan kode berikut ini diatas kode </body>
<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>
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..
<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'/>

Semoga bermanfaat :)
<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
Catatan: (memasukan item pada komentar)
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA...</em>