New CSS3 Navigation menu for Blogger (5 color style) ~ Crawlist

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:

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">

<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>

</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">

<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>

</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">

<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>

</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">

<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>

</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">

<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>

</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……

Crawlist

Blogger widgets tutorials, Wordpress Themes Plugins, Gadgets tools lists, HTML5 CSS3 tutorials

Menu