Making Pop-Up Contact Form

After a few days talking about blogging tips, it is time to discuss tricks blog. This time I will give you a tutorial to modify the contact form, so it appears in the form of pop-ups. This does not need to do to modify the contact form, but also various other services such as Feedburner widget. If you've applied will appear like this:

To make it very easy ....

1. Blogger Login

2. Layout

3. Edit HTML

4. Tick ​​the Expand Widget Templates

5. Enter the following code in blue below: ]]></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" /> 

Then please parse / encode the script below (to encode / parse please read: HTML Code No Exit, Parse First! )

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

After the parse / encode add the script under the script first. After that click Save

Writing Links

To apply this function is the addition of a little code. If the common link code is as follows:

<a href="http://linklocation.com"> Name of Link </ a>  

Now you add the id contact_form , so becomes: 

<a id="contact_form" href="http://linklocation.com">Link Name</a>   

Please try and hopefully enhance your blog. Original demo in Dinhquanghuy . 

If you liked the article on this blog, Please click here Subscribe for free via email, so you'll get a delivery of articles to every article published in www.face-tutorial.co.cc

Related Post :