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


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