JeritanBlog telah ditukar nama BelajarBlogs...
Home » » Buku Tamu Cbox dengan JQuery Fancybox

Buku Tamu Cbox dengan JQuery Fancybox






Tutorial kali ini ialah cara membuat buku tamu dengan Fancybox.




Langkah 1

Pasang Cbox di sidebar blog Anda, lalu beri tajuk Cbox.



Langkah 2


Pergi ke halaman Edit HTML dan tick Expand Template Widget

Cari kode (yang sama) 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 orangeye. Kode tersebut berfungsi untuk menyembunyikan dan memberi identiti (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 atau di postingan.




Semoga berjaya :)

5 ulasan:

  1. sy xdpt mencari kod yg tertera di atas... mcm mana ye??

    BalasPadam
  2. Tutorial ini tidak akan bekerja bila jQuery Fancybox belum dipasang di template blog Anda. Untuk memasangnya, silakan mampir ke http://kolom-tutorial.blogspot.com/2010/07/penerapan-fancybox-dengan-jquery-di.html :)

    BalasPadam
  3. baguss nihh !! kunjungi blog ku juga ya ! AcerNoval

    BalasPadam