Cara Membuat Cbox dengan 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. 

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.  



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