Cara Membuat Cbox Menggunakan JQuery Fancybox

Cbox with JQuery Fancybox

Muhammad Rafsanjani - Hallo sahabat blogger ! Apa kabar? Bagaimana dengan rutinitasnya akhir-ahir ini?. Yeah... saya menyempatkan diri untuk posting artikel yang satu ini yaitu Cara Membuat Cbox Menggunakan JQuery Fancybox. 

Tentu anda telah tahu apa yang di maksud dengan Cbox dan kegunaanya. JQuery Fancybox sendiri adalah salah satu utiliter yang digunakan untuk menampilkan tampilan buku tamu Cbox dengan muncul melayang di depan web blog bersangkutan [lihat gambar].

Berikut akan saya paparkan langkah -langkahnya :

1. Pasang Cbox di sidebar blog Anda, seperti biasa login blogger > dashboard > layout > add widget > html java script. Kemudian berikan judul atau tajuk dengan kata Cbox lalu simpan.  

2.  Langkah selanjutnya,meloncat ke template > Edit HTML dan centang Expand Template Widget.

Cari kode (yang sama) ini:

Tips : untuk memudahkan gunakan tombol Ctrl + F

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

3. Ubah kode tersebut

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



4. Perhatikan kode yang berwarna orangeye. Kode tersebut berfungsi untuk menyembunyikan dan memberi identiti (id) pada Cbox. Jangan lupa untuk menyimpan template Anda.





5. Untuk finishing nya 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 atau di postingan.

Semoga bermanfaat.. jangan lupa comment-nya yah!!




Sumber : http://imam77.blogspot.com