Emotikon Tersembunyi dengan JQuery Fancybox

Tulisan ini adalah pengembangan dari dua tulisan sebelumnya, Penerapan Fancybox dengan JQuery di Blogger dan EMS Sony Ericsson Emotikon di Blog Anda. Jadi sebelum membaca tulisan ini, silakan mampir dulu ke dua tulisan tersebut (lebih baik lagi bila mencoba hehe...). Seperti yang telah saya tulis sebelumnya, Fancybox dapat menangani berbagai macam fungsi yang kerap digunakan sebagai elemen pendukung sebuah blog atau pun website. Kali ini saya akan membahas (lagi) penerapan salah satu fungsi Fancybox, yaitu konten Inline yang dipadukan dengan tampilan pratinjau emotikon yang dipasang di blogger/blogspot. Belum mengerti apa yang saya maksud? silakan mampir ke Kanvas Semu untuk melihat hasil jadi dari penerapan trik ini.

emotikon fancybox

Nah, mengerti maksud saya? secara sederhana trik ini hanya menyembunyikan pratinjau (preview) emotikon Sony Ericsson dan memanggilnya kembali dengan Fancybox. Selanjutnya, mari kita melangkah :)

Langkah 1
Pastikan Anda telah menerapkan Fancybox dan Emotikon Sony Ericsson (Onion), kemudian backup template blogger/blogspot Anda.


Langkah 2
Mari kita sembunyikan kode pratinjau emotikon:
Cari kode  

<center><p><i>copy paste</i> kode berikut untuk menambahkan emotikon</p></center>

Letakkan kode berikut di atasnya.

<div style='display:none'><div id='soner'>

Jangan lupa untuk menutupnya dengan 2 kode </div> di akhir kode pratinjau emotikon (di bawah kode ini: </tr></table></center></b>).


Langkah 3
Selanjutnya, kita buat kode untuk memanggil kode pratinjau emotikon, misalnya seperti ini:

<a href='#soner' id='inline'>Tambahkan Emotikon Sony Ericsson?</a>

Lalu tempatkan kode tersebut di bawah
<h4 id='comment-post-message'><data:postCommentMsg/></h4>


Langkah 4
Temukan kode &#39;hideOnContentClick&#39;: true
Ganti true dengan false

Ini dilakukan agar konten inline tidak tertutup (tersembunyi) bila diklik, sehingga bisa disalin-tempel (copy-paste).


Langkah 5
Simpan template Anda, selesai (selesai?), iya sudah selesai :)
Semoga bermanfaat :)


Ardhiansyam | Find us on Google+ | Kontak | Follower? klik di sini | Sitemap | Versi Mobile | ke atas ↑