How to Add Bootstrap Navigation Bar to blogger

Bootstrap help you not to spend much time working on your CSS code of your blogger blog and it will give you nice and clean design also and it will minimize your complexity coding all this will require time. Just follow the steps below.

Step 1
The first thing you need is a bootsrap3.0 files you can download it in there website www.getbootsrap.com

Step 2
Now you will need to upload it on a good hosting site like drop box and the file which you downloaded are
• bootstrap.min.CSS
• bootsrap.min.js

And make sure you have the direct link

<script SRC=’http://code.jqury.com/jquery-1.10.1min.js’/><script scr=’http://code.jquery.com/jquery-migrate-1.2.1min.js’/>

Step 3
Now visit your blogger dashboard and select the blog that you want to work on.

Step 4
Click on template=>edit template under the       <head>.

Add paste this code below  <head>.

<meta
content=’width=device-width,initial-scale=1.0′ name=’viewport’/><link href=’your direct streaming link URL ( mini.css’media=’screen’ rel=’stylesheet’/><script src=”http://code.jqury.com/jquery-1.10.1min.js’/><script scr=’http://code.jquery.com/jquery-migrate-1.2.1min.js’/>
><script src=’your direct link or streaming link URL url (min.js) ‘/>

Step 5
Now between <body>. </body>  put this code were you want it to be

<nav class=”navbar
navbar-defualt”
role=”navigation”>
<button type=”button”
class=”navbar-toggle”
data-toggle=”collapse”
data-toggle=”navbar-
ex1-collapse”>Toggle
navigation</button> <a
class=”navbar-brand”
href=”#”>Brand</a>
<a href=”#”>link</a>
<a href=”#”>link</a>
<a href=”#”
class=”dropdown-
toggle” data-
toggle=”dropdown”>
Dropdown </a>
<a href=”#”>Action</a>
<a href=”#”>Another action</a>
<a href=”#”>something else here</a>
<a href=”#”>seperated link </a>
<a href=”#”>one more seperated link </a>
<from class=”navbar-
form navbar-left”
role=”search”>
<input type=”text”
class=”form-control”
Placeholder=search” />
<button type=”submit”
class=”btn btn-default”submit</
button></form>
<a href=”#”>link</a>
<a href=”#”
class=”dropdown-toggle” data-
toggle=”dropdown”>
Dropdown </a>
<a href=”#”>Action</a>
<a href=”#”>Another action</a>
<a href=”#”>something else here</a>
<a href=”#”>seperated link </a>
<a href=”#”>one more seperated link </a>

The jquery should be use if not the drop menu will not work.

Don’t forget to drop a comment below thanks.

About Mathias Amodu 887 Articles
My Name is Mathias Amodu, a passionate blogger with full interest in making the world a better place for upcoming webmasters in the society at large

One Response

  1. Ene Bassey January 4, 2016

Leave a Reply

*