So you'd like to add a very beautiful navigation menu bar to your blogger blog and want give up the old blogger page menu. I'm here let you tutorialized the brand new version of Advanced features that will help your happy reader to navigate your content much easily, and help them to find what they are looking for on your blog with the best Menu Bar user experience, the version of Navigation Menu Bar is calling Ninja as it featured and work like just way a Ninja work, fast, simple and beautiful.
As I've told you to give up the classic looking blogger original Page navigation tab, Yes the new version of navigation bar you're going to install on your blogger blog is based on tabs. “Behind” each of those tabs is a link -to a post page, a static page, a label page, to another website etc.
Now let's proceed to the easy steps for adding a beautiful looking Navigation Menu Bar.
As I've told you to give up the classic looking blogger original Page navigation tab, Yes the new version of navigation bar you're going to install on your blogger blog is based on tabs. “Behind” each of those tabs is a link -to a post page, a static page, a label page, to another website etc.
Now let's proceed to the easy steps for adding a beautiful looking Navigation Menu Bar.
Step 1: Adding a CSS and HTML of Navigation Bar in Blogger Template:
The Navigation bar perform the functions on its CSS and other HTML scripts functions that you'll add now in your template. The Navigation Bar you're going to install is a beautiful css based widget.
- Goto your blogger dashboard >> Template >> Edit HTML
- Now after loading the HTML code of your blog, click anywhere and then press CTRL + F key a search box will appear
- Now find the ]]></b:skin>
- Now paste the below Code before to ]]></b:skin> (for example look the above image where ]]></b:skin> code appearing at 120 line and the below code should be end at 119 line. To do this hit the enter after the line 119 and hit enter button and the next line (120) should go clean where you can paste the code. Be careful case is sensitive for beginners)
 |
| Blogger HTML Editor |
____________________________________________________________________
body {____________________________________________________________________
font-family:"Trebuchet MS"; letter-spacing:_.3em; margin:.1em; text-transform:uppercase; }Kumar-Narendra-NavigationBar { text-align: center; font-size: .8em; x } Kumar-Narendra-NavigationBar ul { border-radius: .25em; background: #FF7900; list-style:none; text-align: center; }Kumar-Narendra-NavigationBar li { position:relative; display:inline-block; border-bottom: none; border-radius: .25em .25em 0 0; }Kumar-Narendra-NavigationBar li:hover { box-shadow: 0 -5px 0#191919; }
Kumar-Narendra-NavigationBar a { color:#fff; display:block; padding: .5em; text-decoration:none; }Kumar-Narendra-NavigationBar a:hover { border-radius: 0 0 .25em .25em; background: #191919; box-shadow: 0 5px 0 #dc6519; color:white; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); }
/*Highlight Home button-----------------------------------------------*/.home { box-shadow: 0 -5px 0 #f47321; }.home a { background: #f47321; box-shadow: 0 5px 0 #dc6519; color:white; border-radius: 0 0 .25em .25em; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); }
- That's it now Save The template and your HTML code in installed, now all we need to outlet our functions..
Step 2: Installing Blogger Navigation Bar in your Blog Layout
- Now goto >> Layout blogger dashboard panel
- Click at the Ad A Gadget as you can see in the image below marked with the red arrow. (If you couldn't find Add a gadget link in header, then remove or rearrange some of your gadget or unblock your header by searching on google 'unblock the head widgets in blogger'.
 |
| Blogger Layout Panel |
- Clicking the link Add a Gadget, a popup window will appear and then choose the HTML/Javascript widget in the window. Something like below..
 |
| Blogger Blog Widget List |
- HTML/Javascript configuration widget will appear, and then paste the below code in the HTML box and leave title empty.
____________________________________________________________________
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<Kumar-Narendra-NavigationBar>
<ul> <li class="home"><a href="#"><i class="fa fa-home"></i></a></li> <li><a href="#">About</a></li> <li><a href='#'>Mbt Tools</a>
<li><a href="#">Blog</a></li> <li> <a href='#'> SEO </a></li> <li> <a href='#'> Giveaways </a> <li><a href="#">Services</a></li> <li> <a href='#'> Blogger </a></li><li> <a href='#'> Wordpress </a></li>
</ul></Kumar-Narendra-NavigationBar>
____________________________________________________________________
- Great ! you're done ! Now Check if everything is working properly, if any errore persisting comment that below..
.png)
.png)
.png)
.png)
