Membuat Pop-up Contact Form untuk Blogger

Membuat Pop-up Contact Form merupakan alternatif terbaik untuk memudahkan pengunjung blog menghubungi admin, khususnya bagi para blogger yang mengunakan layanan dengan fasilitas contact. Pada posting sebelumnya saya pernah membahas cara Membuat Contact Form dengan Google Spreadsheets dimana setiap orang yang menghubungi kita lewat Contact form akan langsung menotifikasi di email kita.
Untuk kali ini Blog and SEO Tips akan memberikan atau membagi cara membuat contact form dengan fasilitas Pop Up. Langsung saja ya...

Klik disini untuk melihat Contohnya

 Pertama
Masuk ke Dashbord Blogspot anda dan Buka halaman Setting layout >> Edit HTML
Kedua
Cari kode ]]></b:skin> dan tempatkan kode ini tepat dibawahnya:

<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" />

Ketiga
Buka halaman/Website ini http://centricle.com/tools/html-entities/ kemudian Copy paste kan Kode dibawah ini kemudian di Encode

<script type="text/javascript">
$(document).ready(function() {

$("#contact_form").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});


});
</script>

 Selanjutnya tempatkan tepat dibawah kode pada penjelasan Kedua sehingga menjadi seperti ini:

]]></b:skin>
<script src='http://code.jquery.com/jquery-1.4.1.min.js' type='text/javascript'/>
    <script src='http://dinhquanghuy.110mb.com/contactform/jquery.fancybox-1.3.0.pack.js' type='text/javascript'/>
    <link href='http://dinhquanghuy.110mb.com/contactform/jquery.fancybox-1.3.0.css' media='screen' rel='stylesheet' type='text/css'/>
&lt;script type=&quot;text/javascript&quot;&gt;
        $(document).ready(function() {
                      
            $(&quot;#contact_form&quot;).fancybox({
                &#39;width&#39;                : &#39;75%&#39;,
                &#39;height&#39;            : &#39;75%&#39;,
                &#39;autoScale&#39;         : false,
                &#39;transitionIn&#39;        : &#39;none&#39;,
                &#39;transitionOut&#39;        : &#39;none&#39;,
                &#39;type&#39;                : &#39;iframe&#39;
            });
          
          
        });
    &lt;/script&gt;    

Save Perubahan anda

Keempat
Seperti pada posting saya sebelumnya tentang cara Membuat Contact Form dengan Google Spreadsheets Silahkan anda baca terlebih dahulu. dan kemudian anda akan mendapatkan linksperti ini

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

Kelima
Sekarang anda tinggal membutuhkan sebuah Scipt untuk membuat Pop-up untuk ditempatkan diposisi yang anda inginkan. dan berikut adalah scriptnya:

<span style="font-size: large;"><b><a href="http://spreadsheets.google.com/embeddedform?formkey=dGJ1QkxXNHRfLXM4UkVvSzJtUDNELVE6MA" id="contact_form">Contact Us</a></b></span></div>

Anda bisa memasang dimanapun anda sukai.
Selamat mencoba dan sukses selalu

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini dan untuk berlangganan gratis via email silahkan isi kotak dibawah dengan email anda, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di dankerizer.com