add bootstrap3.0 modal to subscription box in blogger

Hi friends,in this post I am sharing bootstrap modal to blogger.Bootstrap modal is nothing but like popup and it happens only when we click it .So the advantage of modal is it avoids irritation to visitors for popup.And it make attraction and attention more when we see like popup .

Ok once again,If you have not added bootstrap in blogger ,follow the below steps,

Goto your blogger account>>Template>>Edit html and add below <head>,
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
    <link href=’your direct link url (min.css’media='screen' rel='stylesheet'/>
    
      <script src='http://code.jquery.com/jquery-1.10.1.min.js'/>
      <script src='http://code.jquery.com/jquery-migrate-1.2.1.min.js'/>
      
      <script src=’your direct link url(min.js) ‘/>

Now choose add a gadget where you want add accordion.Choose html/javascript ,add below code.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Subscribe Us
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <div class="modal-header">

        <h4 class="modal-title" id="myModalLabel">Modal title</h4>

</div>
      <div class="modal-body">
        <form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=#', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="techinfoweb" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
    </div>
</div>
</div>

Replace 'http://feedburner.google.com/fb/a/mailverify?uri=#' with your feedburner url.
Goto your feedburner account you will get feedburner url..
A sample modal image given below,