How to Add Bootstrap Navigation Bar to blogger

Get Free SEO Tips

Follow me

Mathias Amodu

Founder at Zealmat Limited
Mathias Amodu, a passionate blogger with full interest in making the world a better place for upcoming webmasters in the society at large
Follow me
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 912 Articles
Mathias Amodu, a passionate blogger with full interest in making the world a better place for upcoming webmasters in the society at large

1 Comment

Leave a Reply

Your email address will not be published.


*


[mc4wp_form id="3153"]