How to create an easy to style Custom Blogger Search Form

You will find that the Blogger Search widget is unbelievably difficult to customize. If you are using a pre-developed HTML and CSS template like twitter Bootstrap 3, the CSS stylesheets will not be applied to the Blogger Search Widget form.

The above form is styled using the default twitter Bootstrap 3 stylesheet. You can use this code to create your own easy to style Blogger Search Widget.

<form role="search" method="get" action="/search" class="form-inline">
  <div class="form-group">
    <input class="btn btn-default" id="submit" value="Search" type="submit" />
    <div class="form-group">
      <input id="searchBox" class="form-control" type="text" placeholder="Search" name="q"></input>
    </div>
  </div>
</form>

If you need any help with the implementation of the template post your questions in the comments section.