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


38 komentar:

  1. Nah..;;) yg ini yg saya tunggu2 mas. langsung dicoba ya.
    mas, saya pengen sidebar seperti punya mas, gimana caranya?

    BalasHapus
    Balasan
    1. Wah, keren nih..cara buat tombol balas komentar kayak gini gimana bero?? :D

      Hapus
  2. setelah saya ikutin dgn seksama, akhrinya gak brhasil mas. gak kluar saat di klik, duh.. capek saya mas :f
    tolong lihat blog saya ya mas.

    BalasHapus
  3. keren...keren....kayanya patut dicoa nic...bookmark dulu ah....

    BalasHapus
  4. Region Relaxed
    sip
    :)


    taufikdisc™
    tadi saya cek kode JQuerynya dobel sob, coba hilangkan salah satu
    :D


    indra andriyadi
    selamat mencoba sob
    :)

    BalasHapus
  5. asik memang jquery ini apalagi di gabungkan dengan css3 perambanpun membaca dan menampilkan dengan tenang

    BalasHapus
  6. iya mas :)) keliru saya..
    tapi mas, saya pengen bacaan tambah emoticonnya gak di form komentar, kaya punya mas iki, piye cara ngeditnya mas? apalagi punya mas di tambah gambar katakan saja,, saya jg pngen taruh gambar di bagian bawah komentar mas.. setelah ada gambar, baru deh ada bacaan tambah emotikon.

    BalasHapus
  7. Wahh kerenn donk.... Tx buat triknya!

    BalasHapus
  8. Kalo buat wordpress bisa gak??? Thanks

    BalasHapus
  9. mantep gan.... kalo dibikin post commengan gmana kodenya brow?

    BalasHapus
  10. blogger admin
    benar mas, fancybox memang masih pakai image, belum ada pengembangan tuk pakai CSS3 hehe..


    taufikdisc™
    Taruh saja link-nya di bawah kode ini
    <h4 id='comment-post-message'><data:postCommentMsg/></h4>

    kalau yang KATAKAN SAJA, itu cuma pakai gambar
    :D



    andinoeg
    Bisa diterapkan di WP juga sob, caranya hampir sama, tapi mungkin peletakkannya yang beda, silakan di utak-atik sendiri
    :)


    febriyanto
    Belum sempat nulis tutornya sob, tapi hasil jadinya sudah ada, silakan dilihat di Halaman Demo Fancybox
    :D



    mohanlink™
    silakan dicoba bro
    :)


    Alena, Akhatam, readhermind-dy
    Terima kasih
    :)

    BalasHapus
  11. Keren abis, mampir dong ke blog ku

    BalasHapus
  12. Dah pindah dy mas.. thx y mas..
    Menyambut bulan puasa ni. saya pribadi mohon maaf jika ada kata2 yg salah y mas..
    :) "Marhaban Ya Ramadhan 1431 H" :)

    BalasHapus
  13. Sepertinya disini memakai thickbox ya?

    BalasHapus
  14. bro button langganan, kanan atas, di layar laptop [wide] jadi berantakan bro, coba check :?

    BalasHapus
  15. kalo make wordpress kayak apa ya?

    BalasHapus
  16. aku make wordpress,bisa gak ya diaplikasikan?

    BalasHapus
  17. wew, jadi tambah asyik nih ngeblog

    BalasHapus
  18. sidebar punya mas mirip punya sohtanaka ya..
    bisa request bikinin tutor sidebar kayak punya mas gak?

    BalasHapus
  19. mas. ngoceh lg nih.
    begini mas, setelah saya pake fancybox d blog saya, saya baru sadar saat gambar di postingan saya jadi ikutan ada inlinenya mas saat di klik, yg di buat cm utk emoticon, koq gambar di postingan jg ngikut mas?:?

    BalasHapus
  20. ardianzzz
    yup

    mohanlink™
    dah dibenerin bro, thanks :)

    alief, pelintas batas
    untuk wordpress langsung pakai plugin sob :)

    taufikdisc™
    untuk sidebar, tutornya bisa dibaca di sini sob


    untuk fancybox, coba hapus kode ini:

    $(&quot;a:has(img)&quot;).fancybox();

    :D

    BalasHapus
  21. Untuk fancybox beres mas :)
    tapi kalo sidebar :?
    tutorial indo aja ane besalahan, palagi english language mas..:f
    bisa di bantu translate mas?
    kalo bs kirim via e-mail aja ya (taufikdisc@gmail.com)!
    lbh bagus lg di buat tutorialnya :))
    ngarep nih!

    BalasHapus
  22. hi.. just dropping by here... have a nice day! http://kantahanan.blogspot.com/

    BalasHapus
  23. taufikdisc™
    gampang ko buatnya, coba pakai google translate, atau langsung saja perhatiin kode (CSS) nya
    :)

    BalasHapus
  24. tetep aja ane kagak ngerti :(

    BalasHapus
  25. mama tidak mempunyai profil
    Gunakan pilihan Name/URL, kotak URL bisa Anda kosongi atau isi dengan URL Facebook Anda.

    BalasHapus
  26. Sesuai dengan yang saya mau. . . persis betul, salut gan. . . ;;)

    BalasHapus

Formulir Kontak

Nama

Email *

Pesan *

[ Instagram M2D ]

[ Favorit ]

Malam Marah Malam Ramah

Apalah yang istimewa dengan malam? malam tak lebih dari kegelapan yang menyelimuti sesuatu yang tak pantas menikmati kelembutan cahaya, kera...

[ Referral ]

Ardhiansyam | Kontak | Sitemap | ke atas ↑