design blogger subscription form using bootstrap

Hi friends,in this post I am sharing how to bootstrap for designing  blogger subscription form.First of all you need to know how to add bootstrap files to blogger.Keep in mind you should upload bootstrap min.css and min.js files to google drives or some host and should have a  direct link for these files

blogger subscription form

If you have not added  bootstrap files 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=’bootstrap min.css file direct link url’ 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=’’bootstrap min.js file direct link url ‘/>

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

<div class="container"  >
<div class="panel panel-default">
  <div class="panel-body" >


<form  action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Techinfoweb', 'popupwindow', 'scrollbars=yes,width=550,height=520');return

true" class="form-horizontal" role="form" >
  <div class="form-group">    <div class="col-sm-10">        <input type='text' name='name' class="form-control"  placeholder='Your Name' /></div></div>
    <div class="form-group">     <div class="col-sm-10">           <input type='text' name='email' class="form-control"  placeholder='Your Email' /></div></div>
                   <input type="hidden" value="Techinfoweb" name="uri"/>
               <input type="hidden" name="loc" value="en_US"/>
             <div class="form-group">     <div class="col-sm-10">                <input value="Sign Up Now!" class="btn btn-info" type="submit" /></div></div>

              </form>

</div>
</div>
</div>

  • Now replace “Techinfoweb” with your feed url.

That’s all you have successfully created simple subscription form using bootstrap.

And if container looks more wide

<div class="container" style="width:300px;" > and change pixels according to your needs.

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