Variasi Buku Tamu Blogger dengan JQuery Fancybox

Fancybox lagi? iya, karena banyaknya pertanyaan dari sobat semua tentang cara membuat buku tamu dengan Fancybox, dan juga mumpung saya masih di kampung halaman, saya sempatkan untuk menulis tutorial ini. Sebenarnya prinsip kerja buku tamu dengan Fancybox yang akan saya bahas ini hampir sama dengan penerapan Emotikon Tersembunyi dengan JQuery Fancybox, yaitu dengan menyembunyikan konten (dalam hal ini buku tamu yang menggunakan Cbox) lalu memanggilnya kembali dengan menggunakan Fancybox (inline). Lalu bagaimana dengan buku tamu yang menggunakan Shoutmix? Untuk Shoutmix dengan Fancybox pernah saya singgung pada tutorial awal Penerapan Fancybox dengan JQuery di Blogger, silakan dibaca (lagi).

Buku Tamu Cbox dengan JQuery Fancybox


cbox

Langsung saja (tanpa basa-basi lagi)

Langkah 1
Pasang Cbox di sidebar blog Anda, lalu beri judul Cbox.

Langkah 2
Tuju halaman Edit HTML dan contreng Expand Template Widget
Cari kode (yang mirip) ini:

<b:widget id='HTML2' locked='false' title='Cbox' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>


Ubah kode tersebut menjadi seperti ini:

<b:widget id='HTML2' locked='false' title='Cbox' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<div style='display:none'><div id='cbox'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</div></div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>

Perhatikan kode yang berwarna oranye. Kode tersebut berfungsi untuk menyembunyikan dan memberi identitas (id) pada Cbox.

Jangan lupa untuk menyimpan template Anda.

Langkah 3
Mari kita panggil Cbox yang telah disembunyikan tadi dengan kode berikut:

<a id="inline" href="#cbox">Klik untuk menampilkan Cbox</a>

Kode tersebut dapat ditempatkan di sidebar maupun di postingan.

Sip, selesai. Oh ya, hampir lupa, live demonya dapat dilihat di Live Demo Fancybox :)


29 komentar:

  1. memang blogger tanpa buku tamu terasa hambar nice post

    BalasHapus
  2. Betul sekali kawan, apa rasanya kalau blog tanpa adanya buku tamu, seperti bertamu tidak di aku oleh tuan rumah. he 3x

    Baca juga posting baru saya tentang Rizki Yang Datang Tak Terduga

    BalasHapus
  3. Sob.. kalo kode pemanggilnya di letakkan di Menu sperti yg diterapkan di blog ini, gimana caranya? truz, koq sepertinya Cbox nya beda ya? :?

    BalasHapus
  4. oppie, Yayan
    ya setidaknya buku tamu dapat berguna bagi para blogwalker "kilat"
    :D


    Gori
    Sip, trims
    :)


    taufikdisc™
    ya sama saja sob dengan cara pasang link di sidebar atau di postingan. Cbox di blog ini pakai alternatif layout, jadi terlihat beda
    :D

    BalasHapus
  5. jalan ko, kamu lihat di mana sob? :?

    BalasHapus
  6. yes, akhirnya di posting jugak,... hehe
    ctrl+D dulu nie,..
    thank's sob,..

    besok, postingkan cara buat page NAV ya sob,..

    (1.2.3...7.8.....10..) yang begini,.. hehe

    BalasHapus
  7. oke sob! tp mau nanya lg nih, cara hilangin fungsi scroll fancybox gimana ya? :?

    BalasHapus
  8. wah mantap bisa dicoba
    thanks sobat

    BalasHapus
  9. mantab sob infonya, salam kenal aja;)

    BalasHapus
  10. planetto
    sama2 sob, biar ga pada penasaran
    :D
    Untuk pagenav bisa disimak di blognya Abu Farhan sob, sama ko penerapannya dengan blog ini.


    taufikdisc™
    aku lihat di blogmu sudah bisa tu sob, keren, bagaimana caranya??
    :? :D

    BalasHapus
  11. Imtikhan, baburinix!, hans ganteng
    Terima kasih sob, selamat mencoba
    :)

    BalasHapus
  12. wah asik nih, cnoxnya bisa dimodif kerenan, boleh nih saya coba ah

    BalasHapus
  13. pas pertama pake ada scroll nya sob.. tp beberapa hari kemudian dah ilang.. :)) thx ilmu nya kawan
    akhirnya kesampaian jg punya cbox yg beginian ;;)

    BalasHapus
  14. kalo untuk commentform gmn cara penerapannya gan?

    BalasHapus
  15. Gori
    Caranya hampir sama sob, coba aja
    :)

    BalasHapus
  16. Bagaimana penerapannya pada kolom-komentar bro?

    Saya sudah mencoba mengaplikasikannya tapi belum jadi juga. Caranya dengan memanggil #comment-form. Masalahnya, #comment-form sendiri tidak berfungsi. Bahkan jika dihidden dengan css sekalipun. Template ku yg salah atau bagaimana y.

    Ada solusi?

    BalasHapus
  17. brur..
    kenapa efeknya berimbas pada semua gambar meski gambar itu tidak disisipkan code pemanggil.

    lihat preview yg saya buat disini. pada gambar yang paling atas juga kena efek ini padahal tidak saya sisipkan code pemanggil pada gambar itu.

    BalasHapus
  18. maaf bro, saya belum bisa OL via PC. Untuk kotak komen coba lihat kodenya di live demo fancybox. Untuk masalah gambar, coba baca komentar saya di tutorial fancybox di blog Kang Rohman. Semoga membantu. (dikirim via ponsel jadul)

    BalasHapus
  19. (akhirnya bisa OL via PC juga) Untuk gambar masalahnya pada kode ini bro:

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

    silakan dihapus saja. Setelah itu gunakan class="image" untuk single image.

    Untuk image gallery, tambahkan rel="group" setelah class="image" pada tiap-tiap link gambar dalam image gallery

    BalasHapus
  20. bos.. aku pengen munculin kotak komentar aq..
    gimna yah?? aku cari2 kodenya salah mulu...

    mohon bantuannya...

    silahkan mampir di http://www.illusion-design.co.cc/

    BalasHapus
  21. illusion-design
    Maksudnya kotak komentar yang mana sob? barusan aku lihat kotak komentar di blogmu baik-baik saja :D

    BalasHapus
  22. maksud saya komentar kaya klassik tapi pakai fancybox...
    ga bisa2 bos...

    BalasHapus
  23. Maaf sob, saya juga belum mencoba pasang komentar klasik pakai fancybox, nanti kalau sempat saya coba, sering-sering saja maen ke sini :D

    BalasHapus
  24. trims bosss,
    tapi... buku tamu hanya bisa di klik di home, di postingan blog kagak bisa tuh...

    infonya...

    *yang masalah link di home gak bisa dibuka... nanti coba lagi. coz ada efek gituh.

    BalasHapus
  25. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  26. sory mabro, sepertinya ada kesalahan

    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 ↑