Membuat Formulir Kontak Pop-up Untuk Blogger Menggunakan Fancy Box dan Google Docs

17.35 // 1 komentar // macho // Category: Tutorial Blog //

Dalam posting ini, saya akan menunjukkan kepada Anda cara untuk membuat formulir kontak untuk Blogger, dengan menggunakan layanan gratis Google Docs dan jquery Plugin (Fancy Box).
Berikut adalah screenshot:



Lihat Demo

Jika tertarik, ikutin langkah-langkahnya :

1. Login ke Blog Anda
2. Masuk ke Layout/Tata Letak
3. Terus menuju Edit HTML
4. Cari code ini ]]></b:skin>
5. Copy script code dibawah ini dan letakkan dibawah code ]]></b:skin>

<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" <link 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'                : '90%',
                'height'            : '90%',
                'autoScale'         : false,
                'transitionIn'        : 'none',
                'transitionOut'        : 'none',
                'type'                : 'iframe'
            });
            
            
        });
    </script> 



6. Dalam posting sebelumnya, saya sudah menerangkan langkah-langkah untuk membuat formulir kontak untuk Blogger menggunakan Google Docs. Anda dapat membacanya di sini

Ketika Anda membuat formulir kontak di dokumen Google, memberikan link ke formulir seperti ini:  

http://spreadsheets.google.com/embeddedform?formkey=dGF2d0VzaXJfMUx3WWpaOXpJc1FKOWc6MA

Sekarang, apa yang perlu kita lakukan adalah menambahkan link ke formulir kontak pop-up. Tambahkan kode ini ke file template dimana Anda menaruh link 'Hubungi Kami'

<a id="contact_form" href="http://spreadsheets.google.com/embeddedform?formkey=dGF2d0VzaXJfMUx3WWpaOXpJc1FKOWc6MA"> Hubungi Kami</a>

Jangan lupa mengganti link formulir kontak di atas dengan link formulir kontak Anda. Simpan template!
Jadi kapan saja kita klik link 'Hubungi Kami', jendela pop-up yang berisi formulir kontak Google Docs akan muncul.

Selamat mencoba... ^ ^