Menambakan Emoticon Pada Posting Blog

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.. :D  Ini merupakan tutorial lanjutan dari "Menambahkan Emoticon Pada Komentar Blogspot" 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.. :D

Khusus untuk anda yang menggunakan template MDF VIP Grey Responsive Template by MDF dari sini, anda hanya menambahkan kode #main_text sebagai pengganti dari .post-body karena CSS untuk text posting berbeda dengan template pada umumnya.

Demikian posting tentang Menambakan Emoticon Pada Posting Blog, semoga bermanfaat.. :)

Posting Komentar

Catatan: (memasukan item pada komentar)
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

Link aktif akan dimatikan secara otomatis.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.
Back to Top