Navigation is an important factor of a blog/site ,so that your visitors can navigate through your blog .Most of you must know Chris Coyier of CSS-Tricks.com.His Blog is outstanding with his beautifully coded template.His blog is running in self-hosted wordpress platform and uses Responsive template made by him.One of the highlight of his blog is hisnavigation bar which probably better than any one's navbar.
How we can add it our blogs ?
Take a look at a mock up created by me .
This navbar is created with transition effects and awesome fonts(we have excluded such fonts to reduce size of his widget).It is coded with advanced CSS3 and HTML5 Codes which gives it a fresh look.
Enough of talk .Lets add it .First Part
Download the Code File
Download the Codes just by Signing up for our newsletter.
Note that we wont share your email address with anyone.Your privacy is 100% guaranteed .
#1 CSS Part
- Open the CSS file from the folder
- Make necessary changes and save it another file (eg. Notepad)
- Adding it your blog (Go to bottom to see how to add)
#2 HTML Part
<!-- Coded By Tune2tech --> <nav class='main-nav' id='main-nav'> <a class='home' href='/'> <span aria-hidden='true' data-icon='k'/> Home </a> <a class='forums' href='/forums/'> <span aria-hidden='true' data-icon='9'/> Forums </a> <a class='snippets' href='/snippets/'> <span aria-hidden='true' data-icon='Q'/> Snippets </a> <a class='gallery' href='/gallery/'> <span aria-hidden='true' data-icon='p'/> Gallery </a> <a class='videos' href='/video-screencasts/'> <span aria-hidden='true' data-icon='q'/> Videos </a> <a class='almanac' href='/almanac/'> <span aria-hidden='true' data-icon='ó'/> Almanac </a> <a class='demos' href='/downloads/'> <span aria-hidden='true' data-icon='w'/> Demos </a> <a class='deals' href='/deals/'> <span aria-hidden='true' data-icon='6'/> Deals </a></nav> <!--/* Coded By Tune2tech */-->
Dont forget to Edit the HTML links( P.S -The HTML Part is included in index.html in the downloaded ZIP file)
Adding this widget to your Blog
- Just copy the CSS code which you saved in notepad to your Styles.cssfile
- Add the HTML code to your Desired position.(You can even add it as HTML widget by going to appearance –> Widget->Text widget->paste and save.That’s all !!)
- Just paste CSS code which you saved in notepad from right above the ]]></b:skin> in your blogger Edit HTML/Templates Section