home
Hello Friend!Our previous article is on How to add the author bio widget in blogger blog So today our article is on how to add this stylish Navigation bar in your blogger blog.If the primary navigation on your site or blog doesn’t provide enough space for putting all links, then this secondary CSS menu will allow you to put a lot of links in it.This navigation bar is made up of HTML and CSS no JavaScript is use in it.Many Professional blogger use Navigation menu for blogger.because adding navigation menu to your blogger blog make the visitors to quickly get the required content what they want.So many people need this.Thatswhy i designed this stylish navigation menu for your blog.Follow some simple steps inorder to at this navigation menu in your blog.
.png "navigation bar")
Login to Blogger > Dashborad Click on Drop Down Menu and select Template Backup your Template before making any changes to your blog Press CTRL+F and search the code shown below.
.Copy the below code for and paste it there.
IF you have any Problem regarding this Menu then ask me in Comment section.
EnjoyYou are Done!!
.png "navigation bar"){kind=small}
HOW TO ADD THIS NAVIGATION MENU ON YOUR BLOGGER BLOG:
]]></b:skin>. Paste below code just above it.
<style>.LAYOUT –> ADD A GADGET –> HTML/JAVASCRIPT
#navbarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
width:700px;
position: relative;
display: block;
height: 50px;
font-size: 12px;
font-weight: bold;
background:black;
border:3px solid #2aa4cf;
}
#navbarmenu li{
float:left;
padding:12px
margin:0px;
}
#navbarmenu a{
color:#2aa4cf;
font-size:20px ;
padding:20px;
line-height:50px;
text-decoration:none;
}
#li1 a:hover{
padding:12px;
color:white;
background-color:#FDB305;
clear:both;
}
#li2 a:hover{
color:white;
background-color:#AF05FD;
clear:both;
padding:12px;
}
#li3 a:hover{
color:white;
background-color:#FD05D0;
clear:both;
padding:12px;
}
#li4 a:hover{
color:white;
background-color:#058DFD;
clear:both;
padding:12px;
}
#li5 a:hover{
color:white;
background-color:#FD3B05;
clear:both;
padding:12px;
}
</style>
.Now Save Your Template<body><div id="navbarmenu"><ul><li id="li1"><a href='#'><span>HOME</span></a></li><li id="li2"><a href='#'><span>SERVICES</span></a></li><li id="li3"><a href='#'><span>ABOUT US</span></a></li><li id="li4"><a href='#'><span>CONTACT US</span></a></li><li id="li5"><a href='#'><span>HIRE US</span></a></li></ul></div>
IF you have any Problem regarding this Menu then ask me in Comment section.
EnjoyYou are Done!!
.png)
Home
+ comments + 2 comments
Nice Article Dude ! Keep Posting
simple but AWsome Navigation bar
thanks for sharing
Post a Comment