Superb CSS3 Navigation menu for Blogger (5 color style)

As you already know that Blogger’s default templates doesn’t comes up with navigation menu. And without navigation menu a site doesn’t look that much good and also it becomes routeless roads to your site visitors. There is a way to add a menu using list gadget, otherwise you can use custom made menu to create navigation menu to your blogsite; here a custom menu I published couple of days ago features fixed to header, dropdown menu and social icons; that menu was a multipurpose menu, so I decided to create and publish a normal looking menu without lots option and adaptive design. Neat and simple looking flat designed, cool CSS3 transition effects, modern and stylish UI that will make sure your Blogger site is running on the treading stuff and increase your reputation. Let’s see how it looks like and how to add it in your Blogger blog.

Superb CSS3 navigation menu for Blogger

Live Demo- (here you go)

How to install:

• Log in to your Blogger, select your blog.

• Go to ‘Layout’, and select ‘add a gadget’ from the space below ‘header’

• Select ‘HTML/JavaScript’ from popup menu

• Copy and paste following codes of your style and configure with your label name on default label, # place your label links; additionally add more label by coping <a class="ks-link" href="#">label</a> and delete unnecessary label by deleting <a class="ks-link" href="#">label</a>line, that’s it

• Save gadget, Save template and check your blog out for live preview

Flat Blue navigation menu

<nav id="ks-nav">
<!--crawlist.net nav starts-->
  <a class="ks-link" href="#">Home</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
<!--crawlist.net nav ends-->
</nav>

<style>/*crawlist.net designing starts*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
nav {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  width:100%;
}
#ks-nav {
  background: #52B3D9;
}
#ks-nav a { color:#fff; text-decoration:none;}
.ks-link {
  transition: 0.3s ease;
  background: #52B3D9; 
  color: #ffffff;
  font-size: 20px;
  text-decoration: none; 
  border-top: 4px solid #52B3D9;
  border-bottom: 4px solid #52B3D9;
  padding: 16px 0;
  margin: 0 20px;
}
.ks-link:hover {
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0;
}
/*crawlist.net designing ends*/</style>

Flat Turquoise navigation menu 

<nav id="ks-nav">
<!--crawlist.net nav starts-->
  <a class="ks-link" href="#">Home</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
<!--crawlist.net nav ends-->
</nav>

<style>/*crawlist.net designing starts*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
nav {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  width:100%;
}
#ks-nav {
  background: #36D7B7;
}
#ks-nav a { color:#fff; text-decoration:none;}
.ks-link {
  transition: 0.3s ease;
  background: #36D7B7; 
  color: #ffffff;
  font-size: 20px;
  text-decoration: none; 
  border-top: 4px solid #36D7B7;
  border-bottom: 4px solid #36D7B7;
  padding: 16px 0;
  margin: 0 20px;
}
.ks-link:hover {
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0;
}
/*crawlist.net designing ends*/</style>

Flat Purple navigation menu

<nav id="ks-nav">
<!--crawlist.net nav starts-->
  <a class="ks-link" href="#">Home</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
<!--crawlist.net nav ends-->
</nav>

<style>/*crawlist.net designing starts*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
nav {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  width:100%;
}
#ks-nav {
  background: #BE90D4;
}
#ks-nav a { color:#fff; text-decoration:none;}
.ks-link {
  transition: 0.3s ease;
  background: #BE90D4; 
  color: #ffffff;
  font-size: 20px;
  text-decoration: none; 
  border-top: 4px solid #BE90D4;
  border-bottom: 4px solid #BE90D4;
  padding: 16px 0;
  margin: 0 20px;
}
.ks-link:hover {
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0;
}
/*crawlist.net designing ends*/</style>

Flat Orange navigation menu

<nav id="ks-nav">
<!--crawlist.net nav starts-->
  <a class="ks-link" href="#">Home</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
<!--crawlist.net nav ends-->
</nav>

<style>/*crawlist.net designing starts*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
nav {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  width:100%;
}
#ks-nav {
  background: #F89406;
}
#ks-nav a { color:#fff; text-decoration:none;}
.ks-link {
  transition: 0.3s ease;
  background: #F89406; 
  color: #ffffff;
  font-size: 20px;
  text-decoration: none; 
  border-top: 4px solid #F89406;
  border-bottom: 4px solid #F89406;
  padding: 16px 0;
  margin: 0 20px;
}
.ks-link:hover {
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0;
}
/*crawlist.net designing ends*/</style>

Flat Silver navigation menu

<nav id="ks-nav">
<!--crawlist.net nav starts-->
  <a class="ks-link" href="#">Home</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
  <a class="ks-link" href="#">Label</a>
<!--crawlist.net nav ends-->
</nav>

<style>/*crawlist.net designing starts*/
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
nav {
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  width:100%;
}
#ks-nav {
  background: #BDC3C7;
}
#ks-nav a { color:#fff; text-decoration:none;}
.ks-link {
  transition: 0.3s ease;
  background: #BDC3C7; 
  color: #ffffff;
  font-size: 20px;
  text-decoration: none; 
  border-top: 4px solid #BDC3C7;
  border-bottom: 4px solid #BDC3C7;
  padding: 16px 0;
  margin: 0 20px;
}
.ks-link:hover {
  border-top: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  padding: 6px 0;
}
/*crawlist.net designing ends*/</style>

Compatibility

• This navigation menu is compatible with any default and standard designed template. If its design breaks on any template remove it.

• This menu is compatible with any updated Web browser.

So what your feedback about this flat CSS3 navigation menu don’t forget to mention by comment and Goodluck……