add bootstrap3.0 navbar to blogger

add bootstrap3.0 navbar to blogger

Add Comment , , Edit

Hi friends,in this post I am sharing about adding  bootstrap navbar in blogger template.First we have to download bootstrap.If not download here.You have to upload file to a hosting site mainly bootstrap.min.css,bootstrap.min.js and get direct link.

Note:

Jquery files not given in bootstrap or not working.When I tried to get dropdown menu,it not worked.Then I found this jquery link we have missed.The links are,

<!-- 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'/>

blogger navbar

  • Now 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 add following code in between <body> ---- </body> where you want.You can also found these in getbootstrap.com .

<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

  • You can get like below.See a sample in http://biz.jobcareerneeds.com

dropdown



  • For inverted navbar add below code,

     






<nav class="navbar navbar-default navbar-inverse" role="navigation">
<ul class="nav navbar-nav">
<li class="active"> <a href='#'> Brand</a> </li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Link2</a></li>
<li> <a href='#'> Link </a></li>
<li><a href='#'> Link</a> </li>
</ul>
</nav>



  • For all navbars,



    1.<nav class="navbar navbar-default navbar-inverse" role="navigation">
    2.<ul class="nav navbar-nav">
    3.<li class="active"><a href='#'>Home</li></ul></nav>


  • In the above table in 1.is the class to show which   navbar type you want like  inverted ,justified or other .
  • If you not use the 2nd and 3rd class then navbar will not work correct.In every navbar these two classes are required.
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

Subscribe to: Post Comments ( Atom )

Pages