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 .

bootstrap modal subscribe box

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'/>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
          <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'/>
          <!-- Include all compiled plugins (below), or include individual files as needed -->
          <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 trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Subscribe Us
</button>

<!-- Modal -->
<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">&times;</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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

 

  • 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,

image

Now you have successfully created modal subscribe box with bootstrap.Just click close to close the modal popup.

Print Friendly and PDF
SHARE

About me

Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.

    Blogger Comment
    Facebook Comment

0 comments :

Post a Comment