Membuat Menu Pop-Up Contact Form

Membuat Pop-Up Contact Form – Blog kurang lengkap rasanya kalau belum ada fasilitas Contact Form. Contac Form pada pembahasan kali ini akan dibahas mengenai Contact Form bergaya Pop-Up (Halaman Baru), Contoh penerapan Pop-Up sama persis seperti Pop-Up pada “Email Subscription/langganan feedburner”, seperti

Nah, lalu bagaimana cara membuat Contac Form dengan menu Pop-Up ?
Mari ikuti tutorial berikut ini,
1. Masuk ke blogger
2. Pilih Design/Rancangan
3. Pilih Edit HTML
4. Centang Expand Templates Widget
5. Masukkan kode berwarna biru berikut di bawah kode ]]></b:skin> (Gunakan Ctrl+F untuk mencari)

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="http://dinhquanghuy.110mb.com/contactform/jquery.fancybox-1.3.0.pack.js"></script>
<link rel="stylesheet" type="text/css" href="http://dinhquanghuy.110mb.com/contactform/jquery.fancybox-1.3.0.css" media="screen" />

<script type="text/javascript">
   $(document).ready(function() {
   $("#contact_form").fancybox({
   'width' : '75%',
   'height' : '75%',
   'autoScale' : false,
   'transitionIn' : 'none',
   'transitionOut' : 'none',
   'type' : 'iframe'
   });
   });
   </script>

Lalu, simpan.

Nah, untuk membuat link menu Pop-Up nya mudah sekali, bagini

Misal ,untuk penulisan link biasa,

<a href="URL yang dituju">Nama Link</a>

Nah, kita ubah sedikit, untuk membuat menu link dengan Pop-Up,

<a id="contact_form" href="URL POP-UP">Nama Link</a>

^Note : Warna ungu adalah kode yang ditambahkan untuk membuat Pop-Up nya

Contoh, saya menuliskan <a id="contact_form" href="http://prasutan.blogspot.com">Contact Form</a>