AppAdvice (Italics) Ocean Blue Navigation Menu Blogger/WordPress

With popular demand of our fellow readers, i would take this opportunity to introduce the newest 'Appadvice' navigation menu for Blogger and WordPress blogs. Though the navigation widget can be used on any blog/website as its standalone and the code is pretty easy to be implemented.

A well ground navigation menu can act more like a back bone to any blog/website navigation system. Visitor landing on the blog looks for content here and there, and navigation menus are one of the great ways to  highlight your content.

Below are features that makes this AppAdvice style one of its kind.

AppAdvice (Italics) Ocean Blue Navigation Menu Blogger/WordPress


  • Ocean blue gradient that gives a peaceful look to the readers thus not effecting the bounce rate. (improving in fact).
  • Fixed/Static thus increasing interaction and social opt-ins.
  • Social plugins (Facebook/Twitter)

Before we move on with the implementation, you may want to check out our previously shared navigation menus:

Other Drop Down Menus:

How to Implement the Navigation Menu?

Step #1 Customize The Code:

<div style="position:static;padding-bottom:45px;">

<div id="nav" style="margin-top:0px">
<li id="home">
<a href="Home URL">Home</a>
<a href="Link 1">
Link 1 Title
<em>Link 1 Italics</em>
<a  href="Link 2">
Link 2 Name
<em>Link 2 Italics</em>
<a href="Link 3">
Link 3 Name
<em>Link 3 Italics</em>
<a href="Link 4">
Link 4 Name
<em>Link 4 Italics</em>
<a href="Link 5">
Link 5 Name
<em>Link 5 Italics</em>

<div style='margin-right:10px;margin-top:9px;margin-left:10px;'><iframe allowtransparency='true' frameborder='0' scrolling='no' src=' Profile ID&amp;send=false&amp;layout=button_count&amp;width=80&amp; show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21' style='border:none; overflow:hidden; width:80px; height:21px;'/></iframe>

<iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src=";align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;lang=en&amp;link_color=&amp;screen_name=Twitter Profile ID&amp;show_count=&amp;show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe></div>



#nav {
    background-color: #889CB5;
    background-image: -moz-linear-gradient(#DFE8F5, #8B9EB8 20%, #738AAA 50%, #6C84A4 80%, #4B5A6D);
    background-position: center center;
    border-radius: 7px 7px 7px 7px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.176), 0 -1px 1px rgba(0, 0, 0, 0.082), 1px 0 1px rgba(0, 0, 0, 0.082), -1px 0 1px rgba(0, 0, 0, 0.082);
    height: 42px;
    margin: 18px auto;

    position: fixed;
    width: 1050 ;
    z-index: 9998;
nav {
    background-image: -moz-linear-gradient(#A5B9D2, #809ABB 40%, #7089AB 60%, #748FB3 80%, #748FB3);
    border-radius: 5px 5px 5px 5px;
    display: block;
    height: inherit;
    position: relative;
#nav li, #nav li a {
#nav li {
    border-left: 1px solid #889CB5;
    border-right: 1px solid #5B6D82;
    display: inline;
    float: left;
    height: inherit;
#nav li a {
    color: #273341;
    font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
    font-size: 19px;
    font-weight: 100;
    line-height: 40px;
    outline: 0 none;
    padding: 0 15px 12px;
    text-decoration: none;
    text-shadow: 0 1px rgba(255, 255, 255, 0.5);
#nav li a em {
    font-family: Helvetica;
#nav li:hover {
    background-color: rgba(0, 0, 0, 0.05);
#nav li:active {
    background-color: rgba(0, 0, 0, 0.1);
#nav li a:hover {
    color: white;
    text-shadow: 0 1px #273341;
#nav li:first-child {
    border-left: medium none;

#nav #home a {
    background: url("") no-repeat scroll center center transparent;
    float: left;
    height: 0;
    overflow: hidden;
    padding: 33px 0 0;
    width: 103px;


#nav #home a:hover {
#sitesearch {
    height: 43px;
    margin: 11px 10px 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 140px;

Step #2 Adding The Navigation Menu

Once you're done editing the links and social profile IDs into the above code, you're all set to add the navigation menu to your blog.

For Blogger Users:

Go to Blogger Dashboard >> Layout >> Add a Gadget >> HTML/JavaScript and paste the code in it. Hit Save. You can then move on the gadget where ever you like to display the navigation menu. Normally its in the head section of the blog.

In case there is no 'Widget holder' section in your template at your desired place, you can read out:

For WordPress Users:

For the guys using WordPress, they can simply place the CSS section of the above code in their style.css files and the HTML section in their Header.php files (or any other header file with different name).

Need Help?

need help

Hope that you guys liked this navigation menu. Your feedback is Thats what pushes us to bring more of such widgets. In case you guys need any help regarding the implementation of the widget, do let me know in the comment

Credits: The navigation menu is an inspiration from i.e a popular Apple apps website. Don't forget to give them a hug for such a wonderful navigation menurazz



AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
BloggingeHow | Making Blogging Simpler: AppAdvice (Italics) Ocean Blue Navigation Menu Blogger/WordPress
AppAdvice (Italics) Ocean Blue Navigation Menu Blogger/WordPress
BloggingeHow | Making Blogging Simpler
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy

Tools of the Trade