New CSS3 Navigation menu for Blogger (5 color style)

Few days ago I published a post where I paged Flat style superb navigation menu for your Blogger blog. Here in this post I am publishing another cool style CSS3 navigation menu what enhanced with more cool hover style. These adaptive designed menus are dedicated to make your blog stylish with a new level and perspective with a new trendy web designs. Let’s see how they looks like and how to add it in your Blogger blog.

New CSS3 navigation menu for Blogger

Live Demo- (Click Here)

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

Blue CSS3 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-nav a:hover { color:#52B3D9; text-decoration:none;}
.ks-link {
  transition: 0.4s;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  padding: 0 10px;
  margin: 0 10px;
}
.ks-link:hover {
  background-color: #ffffff;
  color: #52B3D9;
  padding: 22px 10px;
}
/*crawlist.net designing ends*/</style>

Turquoise CSS3 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-nav a:hover { color:#36D7B7; text-decoration:none;}
.ks-link {
  transition: 0.4s;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  padding: 0 10px;
  margin: 0 10px;
}
.ks-link:hover {
  background-color: #ffffff;
  color: #36D7B7;
  padding: 22px 10px;
}
/*crawlist.net designing ends*/</style>

Purple CSS3 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-nav a:hover { color:#BE90D4; text-decoration:none;}
.ks-link {
  transition: 0.4s;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  padding: 0 10px;
  margin: 0 10px;
}
.ks-link:hover {
  background-color: #ffffff;
  color: #BE90D4;
  padding: 22px 10px;
}
/*crawlist.net designing ends*/</style>

Orange CSS3 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: #EEA200;
}
#ks-nav a { color:#fff; text-decoration:none;}
#ks-nav a:hover { color:#EEA200; text-decoration:none;}
.ks-link {
  transition: 0.4s;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  padding: 0 10px;
  margin: 0 10px;
}
.ks-link:hover {
  background-color: #ffffff;
  color: #EEA200;
  padding: 22px 10px;
}
/*crawlist.net designing ends*/</style>

Silver CSS3 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-nav a:hover { color:#BDC3C7; text-decoration:none;}
.ks-link {
  transition: 0.4s;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  padding: 0 10px;
  margin: 0 10px;
}
.ks-link:hover {
  background-color: #ffffff;
  color: #BDC3C7;
  padding: 22px 10px;
}
/*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 these flat Cool CSS3 navigation menu don’t forget to drop a comment and Goodluck……