Add Bootstrap Navigation Menu to Blogspot Blog

Introduction :

Webmasters where looking new and modern design's for design their website or blog , Readymade scripts like Bootstrap and Jquery can make website's well looking and modern designed .  Now a days almost every webmasters where using Bootstrap navigation to create their web site navigation menu , This is because of its cool function . The Bootstrap navigation will automatically comes down and up when user scroll down the webpage . Today on this article you are going to learn how to integrate Bootstrap navigation to your Blogspot Blog .

How to Add Bootstrap Navigation to My Blogspot Blog :

To add Bootstrap Navigation to your Blogspot Blog , You need to do the following things . First you need to download or copy the following script from Bootstrap Official Site .
Bootstrap Script Download

After downloading Bootstrap script you need to upload it somewhere , You can use Dropbox or Google Drive to host the javascript of Bootstrap , Or you can use Bootstrap hosted Javascript to create Bootstrap navigation on your Blogspot Blog .
  • Log in to your Blogspot A/c .
  • Enter to the Blog which you want to add the Bootstrap Navigation .
  • Click on the Template .
  • Click on the Edit Template .
  • Before editing template , Backup your blogspot template first .
  • Now click on the Edit Html .
  • Now add the following Java Code and CSS Style in between the <head> and </head> .
<link href="" rel="stylesheet">
<link href="" rel="stylesheet">
<script src=""></script>
Now you need to add the following code at the first and last of the default navigation menu of your Blogspot blog .

Place this code at on the header of your default Blogspot navigation code .
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
Place the following code at last of your navigation menu code .
Here i can show you a demo image example that i done .
Bootstrap Navigation Coded Demo
You are done . Some times you cause problem with CSS Style of your default navigation code , So it is better you to make some changes on your default navigation menu after upgrading navigation with Bootstrap navigation .

I hope you well enjoyed this article if you have any doubts on this tutorial article , Don't forget to ask me by commenting us . Thanks 


Post a Comment

Wapmaster or Webmaster can Comment Us with the following Comment Box . Don't add Links to your site for Spamming our Blog .. Once you add Comment with Link . It will be deleted immediatly by our Admins .