Ad

 WWW.CHECKLISTING.COM


Tuesday, February 14, 2012

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).
Add
<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.

2 comments:

Unknown said...

hi,
Thanks for this
I have checked it.its very good.
But the problem is I want subscribe to my newsletter option here where user can enter his emailid
Regards

NN said...

You can add newsletter subscription in div tag.
If you need separate newsletter subscription widget,please keep visit i will post it here.