August 05, 2015

Insert Responsive Popup subscription box using Bootstrap

Learn how to insert Feedburner email subscription form or any subscription form as Responsive Popup window with effects while page start loading and less code.

The popup windows is the best tool to alert or remind your visitors gently before landing in to  webpage. The popup window helps to bring attention and high focus for information to be reached to audience so that they never miss it.

There are variety of Blogspot and Wordpress Javascript codes and plugins are available across  in google internet search. Many of them has plenty of lines such as CSS, HTML and JavaScript codes which makes slower the website and spoil site structure as well.

Many bloggers are not familiar with website programming so they place it wrongly and it may cause negatively affecting SEO. The BootStrap is a Framework which is used for UI design and development. The advantage of using bootstrap is it become responsive automatically when the website opened on Android and iPhone Operating System phone with lesser screen size than desktop. Many popup codes are available in WWW which are not responsive when you insert it in to blogspot.com' s blogger especially it does not work at all when the site load in Mobiles and Tablets.

The following code is easy to insert and it does not have many lines of coding, You can also customize the popup window design according to your website theme design. The customization of Bootstrap Modal Popup is required the user interface (UI) designing skills.

step 1: go to your feedburner login > click on your feed title > under publicize tab click "email subscriptions" link on left menu > now you can see your subscription form code > just copy and past between the following code on step 3

feedburner responsive popup bootstrap
Demo: How to copy Feed burner email subscription form code?

step 2: paste the following code between <head> ..... </head> tag

 <script type="text/javascript">  
   $(window).load(function(){  
     $('#myModal').modal('show');  
   });  
 </script>  

step 3: paste the following html code anywhere between <body> .... </body> tag

 <div class="container">  
  <!-- Modal -->  
  <div class="modal fade" id="myModal" role="dialog">  
   <div class="modal-dialog">  
    <!-- Modal content-->  
    <div class="modal-content">  
     <div class="modal-header">  
      <button type="button" class="close" data-dismiss="modal">X</button>  
      <h4 class="modal-title">Subscribe Now</h4>  
     </div>  
     <div class="modal-body">  
     </div>  
    </div>  
   </div>  
  </div>  
 </div>  

step 4: paste the copied feedburner subscription code between <div class="modal-body"> .... </div>

step 5: this code requires bootstrap to be linked to your website. If you would have not inserted bootstrap before in your website, now you have to paste the following immediately after <head> tag so that it works.

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  

Now you can save your template and check it on live website or blogger. The demo site of the above code for feedburner suscription popup using bootstrap is available at www.feedburner-popup-widget.blogspot.com