Add Beautiful Navigation Menu to blogger

Adding a pure css navigation menu to your blogger make the visitors to quickly get the required content what they want.This is really great to see in a blog. Many professional bloggers use navigation menu for blogger. So many people also need this.

Today we brought some eye-catching Navigation Menus for blogger. There are 10 navigation menus here. So you can add any menu easily if you haven't navigation menu in your blog.

Step 1
Login to you Blogger dashboard and go the Layout >> Add a Gadget >> HTML/JavaScript.
Then copy down any navigation code and paste it into the gadget's text area.

Navigation Menu 1

<style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0;  list-style-type: none; white-space: nowrap; } ul#navlist li { float:  left; font-family: verdana, arial, sans-serif; font-size: 9px;  font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color:  #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; }  #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px;  color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; }  ul#navlist li#active { color: #95bbae; background-color: #d1e3db; }  #navlist a:hover { color: #fff; background-color: #FE9C54; }  </style> <div id="navcontainer"> <ul id="navlist"><li><a href="#"><span>Link  1</span></a></li><li><a href="#"><span>Link  2</span></a></li><li><a href="#"><span>Link  3</span></a></li><li><a href="#"><span>Link  4</span></a></li><li><a href="#"><span>Link  5</span></a></li><li><a href="#"><span>Link  6</span></a></li><li><a href="#"><span>Link  7</span></a></li></ul></div>

Navigation Menu 2

<style> #navcontainer { float:left; width:100%; background:#fff; font: bold  7.5pt Verdana; line-height:normal; border-bottom:1px solid #6659A7;  border-top:1px solid #6659A7; } ul#navlist { margin: 0; padding: 0;  list-style-type: none; white-space: nowrap; } ul#navlist li { float:  left; font-family: verdana, arial, sans-serif; font-size: 9px;  font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color:  #6659A7; border-top: 1px solid #e0ede9; border-bottom: 1px solid  #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px  9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration:  none; } ul#navlist li#active { color: #95bbae; background-color:  #d1e3db; } #navlist a:hover { color: #666; background-color: #fff; }  </style> <div id="navcontainer"> <ul id="navlist"><li><a href="#"><span>Link  1</span></a></li><li><a href="#"><span>Link  2</span></a></li><li><a href="#"><span>Link  3</span></a></li><li><a href="#"><span>Link  4</span></a></li><li><a href="#"><span>Link  5</span></a></li><li><a href="#"><span>Link  6</span></a></li><li><a href="#"><span>Link  7</span></a></li></ul></div>

Navigation Menu 3

<style> #tabs { font: bold 7.5pt Verdana; } #navcontainer { float:left; margin:  0; padding: 8px 0px; width:100%; background:#575656; font-size:93%;  line-height:normal; } ul#navlist { margin: 0; padding: 0;  list-style-type: none; white-space: nowrap; } ul#navlist li { float:  left; font: bold 7.5pt Verdana; line-height: 14px; margin: 0; padding:  5px 0 5px 0; } #navlist a, #navlist a:link { margin: 0; padding: 10px;  color: #fff; border: 4px solid #575656; text-decoration: none; }  #navlist a:hover { color: #fff; border: 4px solid #fff; } </style> <div id="navcontainer"> <ul id="navlist"><li><a href="#"><span>Link  1</span></a></li><li><a href="#"><span>Link  2</span></a></li><li><a href="#"><span>Link  3</span></a></li><li><a href="#"><span>Link  4</span></a></li><li><a href="#"><span>Link  5</span></a></li><li><a href="#"><span>Link  6</span></a></li><li><a href="#"><span>Link  7</span></a></li></ul></div>

Navigation Menu 4

<style> #tabs1 { font: bold 7.5pt Verdana; } #tabs9 img { border: none; }  #navcontainer { margin: 10px 0 0 30px; padding: 0; height: 20px; }  #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type:  none; text-align: center; } #navcontainer ul li { display: block; float:  left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a  { background: #fff; width: 78px; height: 18px; border-top: 1px solid  #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd;  border-right: 1px solid #ddd; padding: 0; margin: 0 0 5px 0; color:  #666; text-decoration: none; display: block; text-align: center; font:  normal 10px/18px verdana; } #navcontainer ul li a:hover { color:  #6659A7; background: #eeeeee; } #navcontainer a:active { background:  #c60; color: #fff; } #navcontainer li#active a { background: #c60;  border: 1px solid #c60; color: #fff; } </style> <div  id="navcontainer"> <ul id="navlist"><li><a href="#"><span>Link  1</span></a></li><li><a href="#"><span>Link  2</span></a></li><li><a href="#"><span>Link  3</span></a></li><li><a href="#"><span>Link  4</span></a></li><li><a href="#"><span>Link  5</span></a></li><li><a href="#"><span>Link  6</span></a></li><li><a href="#"><span>Link  7</span></a></li></ul></div>

Navigation Menu 5

<style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0;  background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid  #5F6A71; } #nav li { margin: 0; padding: 0; display: inline;  list-style-type: none; } #nav a:link, #nav a:visited { float: left;  font: bold 7.5pt verdana; line-height: 14px; padding: 9px;  text-decoration: none; color: #708491; } #nav a:link.active, #nav  a:visited.active, #nav a:hover { color: #666; background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJNQqqO4K1_aA7i1epXFfoHJGL7ohNiXa6iBXXmAoxwcxB0SV2g2jfnL2Ta7b8yOpXLQUITMYTdercn2BOSZFijAa41ZMtPfpmM4WwUTVdtYJ6ONtXXCyBAGKX_2YJSgJW1njdg2mYeuU/s1600/Inverted.png)  no-repeat top center; border-top: 4px solid #5F6A71; } </style>  <div class="container"> <ul id="nav"><li><a href="#"><span>Link  1</span></a></li><li><a href="#"><span>Link  2</span></a></li><li><a href="#"><span>Link  3</span></a></li><li><a href="#"><span>Link  4</span></a></li><li><a href="#"><span>Link  5</span></a></li><li><a href="#"><span>Link  6</span></a></li><li><a href="#"><span>Link  7</span></a></li></ul></div>

Navigation Menu 6

<style> #tabsI { float:left; width:100%; background:#EFF4FA; font: bold 7.5pt  Verdana; line-height:normal; border-bottom:1px solid #DD740B; } #tabsI  ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li {  display:inline; margin:0; padding:0; } #tabsI a { float:left;  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZmnD4UiwzudprcnL0ykZVq3qFBNwm8Qdbi4UkJUwuciq8tTsLc59_KGTcqZVBre4PlTOseTBQo9MHGbSU7WUjwplTsZyV_sYu7g7Z9n78qwNxJv4gsI0ZarnekTxtJGp441cyup395L0/s1600/tableftI.png)  no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; }  #tabsI a span { float:left; display:block;  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqskF7kSQ8NaX2CSkr-IoLmQcsZ4AQThJvKoJp3Kj5qUlFlMmjRoGnuYf_6uiqV-WBV0_1b1x787V6lylbDwAgOnm7XsiLD6FFG2BZD3DHyEGq3XsgKBJfABYr93-l7RTwUnK8m1TQXAs/s1600/tabrightI.png)  no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /*  Commented Backslash Hack hides rule from IE5-Mac */ #tabsI a span  {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; }  #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span {  background-position:100% -42px; } </style> <div id="tabsI"> <ul><li><a href="#"><span>Link  1</span></a></li><li><a href="#"><span>Link  2</span></a></li><li><a href="#"><span>Link  3</span></a></li><li><a href="#"><span>Link  4</span></a></li><li><a href="#"><span>Link  5</span></a></li><li><a href="#"><span>Link  6</span></a></li><li><a href="#"><span>Link  7</span></a></li></ul></div>

Navigation Menu 7

<style> #tabsG { float:left; width:100%; background:#666; font: bold 7.5pt  Verdana; line-height:normal; } #tabsG ul { margin:0; padding:10px 10px 0  50px; list-style:none; } #tabsG li { display:inline; margin:0;  padding:0; } #tabsG a { float:left;  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwoAqiZO_dh8iBYYqXhEti0mBh6MRahnD8McSTYiuVZ-LVZDp5cSt-IUsCc2Zf1f5lGPd3TpKqtX1bqJuvUnTpnN-LQmpbytbelsx5i1Zfs07DdUsPtfbTloQ5Ri6e78J-T31Sz6Ddpo0/s1600/tableftG.png)  no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; }  #tabsG a span { float:left; display:block;  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcEDo_fXcose0-ZzY3ft9-ZmwVpjLqE2DazSLiwTkRo0roqiutgnzVFWapIf8HOUQX05htL7xWUFtjNmInxAe9BnokyYZNHY6VghpW96dR02dzNXa9u2CSxbwrYti7Ms_kDmTNJ45ckmA/s1600/tabrightG.png)  no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /*  Commented Backslash Hack hides rule from IE5-Mac */ #tabsG a span  {float:none;} /* End IE5-Mac hack */ #tabsG a:hover span { color:#FFF; }  #tabsG a:hover { background-position:0% -42px; } #tabsG a:hover span {  background-position:100% -42px; } </style> <div id="tabsG"> <ul><li><a href="#"><span>Link  1</span></a></li><li><a href="#"><span>Link  2</span></a></li><li><a href="#"><span>Link  3</span></a></li><li><a href="#"><span>Link  4</span></a></li><li><a href="#"><span>Link  5</span></a></li><li><a href="#"><span>Link  6</span></a></li><li><a href="#"><span>Link  7</span></a></li></ul></div>

Navigation Menu 8

<style> #tabsF { float:left; width:100%; background:#efefef; font: bold 7.5pt  Verdana; line-height:normal; border-bottom:1px solid #666; } #tabsF ul {  margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li {  display:inline; margin:0; padding:0; } #tabsF a { float:left;  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmW66v9cgFBIBEEh1sfaIpX5QS7foEk9OnlvBPS4gecXPuvG9b5ZaeWo4TFcWoynlUj3-PuISB_sGgen2szjQClNty5jMfFY0lnxekDM3Z1ZGeUebOyabgwh5z_qEetJ6Q4sd-hU5ik4I/s1600/tableftF.png)  no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; }  #tabsF a span { float:left; display:block;  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-TUhPjPkRxlTohcRfAWVXqxBBDJbxbCQ1an1cMd5bP96ji6BVzYHw4p91oIgeav52W074Tdob7lkyeDAW5dmF2kNE8bBOvYRwc5w_8GNhgH55AZebS87lrGMEmHMenOfs2pFaZ7z6O58/s1600/tabrightF.png)  no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /*  Commented Backslash Hack hides rule from IE5-Mac */ #tabsF a span  {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; }  #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span {  background-position:100% -42px; } </style> <div id="tabsF"> <ul><li><a href="#"><span>Link  1</span></a></li><li><a href="#"><span>Link  2</span></a></li><li><a href="#"><span>Link  3</span></a></li><li><a href="#"><span>Link  4</span></a></li><li><a href="#"><span>Link  5</span></a></li><li><a href="#"><span>Link  6</span></a></li><li><a href="#"><span>Link  7</span></a></li></ul></div>

Navigation Menu 9

<style> #navcontainer { background: #369; border-top: 1px solid #9CC;  margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial,  Helvetica, sans-serif; } #navlist { list-style: none outside none;  margin: 0; padding: 0; } @media all { #navlist { text-align: center } }  #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin:  0; padding: 0; position: relative; } html>body #navlist li {  background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist  a, #navlist a:link, #navlist a:visited { background: #900; border: 1px  solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline;  height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative;  right: 2px; text-decoration: none; } #navlist a:hover { background:  #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; }  #navlist a:active { background: #999; bottom: 0px; color: #FFF;  position: relative; right: 0px; } #navlist li#active { background: #369;  bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position:  relative; } html>body #navlist li#active { background: #000; margin:  0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist  #active a:visited, #navlist #active a:hover { background: #369;  border-bottom: none; border-left: 1px solid #9CC; border-right: 1px  solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor:  text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; }  </style> <div id="navcontainer"> <ul id="navlist"><li><a href="#"><span>Link  1</span></a></li><li><a href="#"><span>Link  2</span></a></li><li><a href="#"><span>Link  3</span></a></li><li><a href="#"><span>Link  4</span></a></li><li><a href="#"><span>Link  5</span></a></li><li><a href="#"><span>Link  6</span></a></li><li><a href="#"><span>Link  7</span></a></li></ul></div>

Navigation Menu 10

<style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt  Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0  50px; list-style:none; } #tabsE li { display:inline; margin:0;  padding:0; } #tabsE a { float:left;  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYSjC-1UnHeancJoftA6cymNDlUnFyUuLKLtgAi00mnm1bMrZVEzoNisv0xlI5h2xNY0c9EXbrKeDjjui1eDtK8qwFKLIkk-iD_pLeRA85HMB-m-kterpDNMrHP2POh7wJVQ0XPgdvQxI/s1600/tableftE.png)  no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; }  #tabsE a span { float:left; display:block;  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif1COwlajiTBA3XWAoy-wWeiQIY9DyeUi_uIZ2OqCRvqGpdDOD49PjNvvICcr5MQMgl7Nsu0jDoDKcFSh4chPsn7WZG0iXdNf0iTi9ysdy3J9kTCi3sq4j4Vl-i6P0yE2VKXOF7XIs_vA/s1600/tabrightE.png)  no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /*  Commented Backslash Hack hides rule from IE5-Mac */ #tabsE a span  {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; }  #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span {  background-position:100% -42px; } </style> <div id="tabsE"> <ul><li><a href="#"><span>Link  1</span></a></li><li><a href="#"><span>Link  2</span></a></li><li><a href="#"><span>Link  3</span></a></li><li><a href="#"><span>Link  4</span></a></li><li><a href="#"><span>Link  5</span></a></li><li><a href="#"><span>Link  6</span></a></li><li><a href="#"><span>Link  7</span></a></li></ul></div>

Step 2
Now find the below code from your Navigation code.

"#" >Link 1
"#"

>Link 2

>Link 3

>Link 4

>Link 5

>Link 6

>Link 7

" >Link 1

Replace the # with the Page URL that you want to navugate from the button.
Replace the Link 1 with the Page Title.

Do same thing to all #s and Link 1 to Link 7.

Then save your gadget and see your blog.

We hope that this article helped you to Add Navigation Menu to blogger.
Feel free to leave a comment below!

Top Tutorials

Recent Posts