Membuat Pop-Up Contact Form

Setelah beberapa hari ini ubek-ubek soal tips blogging, sekarang saatnya membahas trik blog. Kali ini Saya akan memberikan tutorial memodifikasi contact form Anda, sehingga tampil dalam bentuk pop-up. Ini tidak harus Anda lakukan untuk memodifikasi contact form, tapi juga berbagai layanan lain, misalnya feedburner widget. Jika telah diterapkan akan tampil seperti ini:

Untuk membuatnya sangat mudah....
1. Login blogger
2. Tata Letak
3. Edit HTML
4. Centang Expand Templates Widget
5. Masukkan kode berwarna biru berikut di bawah: ]]></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" type="text/css" href="http://dinhquanghuy.110mb.com/contactform/jquery.fancybox-1.3.0.css" media="screen" />

Lalu silahkan parse/encode script di bawah ini (untuk encode/parse silahkan baca: Kode HTML Tak Keluar, Parse Dulu!)

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

Setelah di parse/encode tambahkan script tersebut di bawah script pertama. Setelah itu klik Simpan

Penulisan Link

Untuk aplikasikan fungsi ini ada penambahan kode sedikit. Jika kode link biasa adalah sebagai berikut ini:

<a href="http://tujuanlink.com">Nama Link</a>

Sekarang Anda tambahkan id contact_form, sehinnga menjadi:

<a id="contact_form" href="http://tujuanlink.com">Nama Link</a> 

Silahkan mencoba dan semoga mempercantik blog Anda. Demo asli di Dinhquanghuy.

Related Posts by Categories

Widget by Hoctro | Jack Book