Sunday

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.






Share :

zealmatblog

1 comment:

  1. Assistance needed ooo. Tryin my all to follow through sha. www.soccerload.com

    ReplyDelete



Parse Your Adsense HTML code Here





We love to hear from you!

Sign in to comment "anonymously" without entering verification text.