Create Modal Subscribe Box Using jQuery

Step 1: Design > Add Gadgets, Add HTML/JavaScript.

Step 2: Add Below code Below code in Content.(Do not had tittle).

<link media="screen" rel="stylesheet" href="http://www.freshinterview.com/blogpopup/colorbox.css" />
        <link media="screen" rel="stylesheet" href="http://www.freshinterview.com/blogpopup/pop.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
        <script src="http://www.freshinterview.com/blogpopup/js/jquery.colorbox.js"></script>
            <script src="http://www.freshinterview.com/blogpopup/js/jquery.colorbox-min.js"></script>
         <script src="http://www.freshinterview.com/blogpopup/Script.js"></script> 



        <!-- This contains the hidden content for inline calls -->
         <div style='display:none'>
                <div id='subscribe' style='padding:10px; background:#fff;'>
                <h2 class="box-title">Never Miss Any Update From Us!</h2>
                <h3 class="box-tagline">Get notified about our updates.</h3>

                <!-- BEGIN #subs-container -->
                <div id="subs-container" class="clearfix">

                    <!-- BEGIN .box-side -->
                        <div class="box-side left">

                        <div class="box-icon"><a class="email" href="http://feedburner.google.com/fb/a/mailverify?uri=SourceHub" target="_blank" title="Subscribe Now!"><img src="http://www.freshinterview.com/blogpopup/images/feed.png"/></a></div>

                        <h4><a href="http://feedburner.google.com/fb/a/mailverify?uri=SourceHub" target="_blank">Subscribe by Email</a></h4>


                         <div class="box-icon"><a class="email" href="http://feeds.feedburner.com/sourcehub" target="_blank" title="Subscribe Now!"><img src="http://www.freshinterview.com/blogpopup/images/rss.png"/></a></div>
                        <h4><a href="http://feeds.feedburner.com/sourcehub" target="_blank">Subscribe by Feed</a></h4>
                        
                       <div class="box-icon"><a class="email" href="http://in.linkedin.com/pub/nagesh-tech-spark/48/458/780" target="_blank" title="Subscribe Now!"><img src="http://www.freshinterview.com/blogpopup/images/in.png"/></a></div>
                        <h4><a href="http://in.linkedin.com/pub/nagesh-tech-spark/48/458/780" target="_blank">Subscribe by LinkedIn</a></h4>                    
                        <!-- END .box-side -->
                    </div>

                    <div id="box-or">OR</div>

                    <!-- BEGIN .box-right -->
                        <div class="box-side right">

                        <div class="box-icon"><a class="rss" href="http://www.facebook.com/pages/Tech-spark/232340523506801" target="_blank" title="Subscribe Now!"><img src="http://www.freshinterview.com/blogpopup/images/like.png"/></a></div>

                        <h4><a href="http://www.facebook.com/pages/Tech-spark/232340523506801" target="_blank">Subscribe by Facebook</a></h4>



                        <div class="box-icon"> <a class="email" href="https://plus.google.com/b/102093994164315503941" target="_blank" title="Subscribe Now!"><img src="http://www.freshinterview.com/blogpopup/images/plus.png"/></a></div>
                             <h4><a href="https://plus.google.com/b/102093994164315503941" target="_blank">Subscribe by Google+</a></h4>
                        
 <div class="box-icon"><a class="email" href="https://twitter.com/#!/sourcehub" target="_blank" title="Subscribe Now!"><img src="http://www.freshinterview.com/blogpopup/images/twitter.png"/></a></div>
                        <h4><a href="https://twitter.com/#!/techspark99" target="_blank">Subscribe by Twitter</a></h4>                    
                    <!-- END .box-side -->

                    </div>

                <!-- BEGIN #subs-container -->
                </div>
                </div>
        </div>

Step 1:Save the changes.



Please comment on it if you are facing any problem.