Apple Style Menu Bar For Blogger Blog

Apple is well know company which makes iPod and iTunes, Mac laptop and desktop computers, the OS X operating system. I love Apple products, In this tutorial I'm going to share how to add Apple style menu bar for your Blogger blog. Search box also included in this menu bar. In two steps only you can add this menu bar to your blog blog. Let's start the tutorial:

You  May Like To Read:

• CSS3 Smooth Vertical Menu For Blogger Blog
• Create Drop Down Dark Style Menu In Blogger Blog
• Multi Color CSS3 Navigation Menu For Blogger Blog
• 
  

Live Demo

How To Add Apple Style Menu Bar For Blogger Blog

• Go To Blogger Dashboard >> Template >> Edit HTML >> Find ]]></b:skin>
• Just Above ]]></b:skin> Paste Given Below Code

/* The CSS Code blogsdaddy.com */
#appleNav { margin:40px 0; list-style:none;
font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; letter-spacing:-0.5px; font-size:13px;
 
    text-shadow: 0 -1px 3px #202020;
    width:980px; height:34px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;
}
#appleNav li { display:block; float:left; border-right:1px solid #5d5d5d; border-left:1px solid #929292; width:105px; height:34px; border-bottom:1px solid #575757; border-top:1px solid #797979;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f; /* Fallback */
}
#appleNav li:not(:last-child):hover {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
    background-color:#383838; /* Fallback */
    -moz-box-shadow: inset 0 0 5px 5px #535353;
    -webkit-box-shadow: inset 0 0 5px 5px #535353;
    box-shadow: inset 0 0 5px 5px #535353;
}
#appleNav li:not(:last-child):active {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
    background-color:#383838; /* Fallback */
 
    -moz-box-shadow: inset 0 1px 2px 2px #000;
    -webkit-box-shadow: inset 0 1px 2px 2px #000;
    box-shadow: inset 0 1px 2px 2px #000;
}
#appleNav li a { color:white; text-decoration:none; text-align:center; display:block; line-height:34px; outline:none; }
#appleNav form input { width:76px; height:20px; margin-left:9px; margin-top:8px; border:none; padding-left:20px; padding-right:10px; color:#eee;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQHfJ-5EgiGup7y0BJhtpfAP1cUVS14Q1q2Pub_beTw27J-MYTzOO_CKwsWCv1RndKCeXLPJkt-O03gUVAXgmTzL8hHKPzy5whfRhDj4yfs3Ch7LsedXC0Z74fUs3PeViAY0AOZvXXI7Ai/s1600/blogsdaddy_magnifier.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0, #747474), color-stop(0.5, #6E6E6E), color-stop(0.51, #7E7E7E), color-stop(1, #8D8D8D));
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQHfJ-5EgiGup7y0BJhtpfAP1cUVS14Q1q2Pub_beTw27J-MYTzOO_CKwsWCv1RndKCeXLPJkt-O03gUVAXgmTzL8hHKPzy5whfRhDj4yfs3Ch7LsedXC0Z74fUs3PeViAY0AOZvXXI7Ai/s1600/blogsdaddy_magnifier.png"), -moz-linear-gradient(center bottom, #747474 0%, #6E6E6E 50%, #7E7E7E 51%, #8D8D8D 100%);
    background-repeat: no-repeat;
    background-color:#6E6E6E; /* Fallback */
    -moz-box-shadow: inset 0 2px 1px 1px #363636;
    -webkit-box-shadow: inset 0 2px 1px 1px #363636;
    box-shadow: inset 0 2px 1px 1px #363636;
}
#appleNav li:first-child {
    -moz-border-radius:4px 0 0 4px;
    -webkit-border-radius:4px 0 0 4px;
    border-radius:4px 0 0 4px;  
    border-left:none;
}
#appleNav li:first-child a img {
   vertical-align:middle; margin-top:-2px;
}
#appleNav li:last-child {
    -moz-border-radius:0 4px 4px 0;
    -webkit-border-radius:0 4px 4px 0;
    border-radius:0 4px 4px 0;
    border-right:none;
    width:124px;
}
/* Fade in animation (Webkit only) */
@-webkit-keyframes showMenu {
    from { opacity: 0; top:-20px; }
    to   { opacity: 1; }
}
#appleNav {
     -webkit-animation: showMenu 1s; position:relative;
}​

• Save Your Blogger Template and Follow Next Steps
• Go To Blogger Dashboard >> Layout >> Add A Gadget >> HTML/JavaScript
• Paste The Following Code Inside HTML/JavaScript

<nav>
<ul id="appleNav">
   <li><a href="http://www.apple.com" title="Apple"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMF7gpYDxQo34i-RfTMsuOrwvGdiUM_iR2LGxPKu9jwh3hDxYaMCYJ29dyPM0UZY0nIaZyGLi3A4qFXWCI-Ew-b_hX0REG-i39MVns8SB6jaXmqlShwC78RAxJS4Wl8uRwbjZxbNajoNCS/s1600/blogsdaddy_logo.png" alt="Apple Logo" /></a></li>
   <li><a href="Your URL Here" title="Store">Store</a></li>
   <li><a href="Your URL Here" title="Mac">Mac</a></li>
   <li><a href="Your URL Here" title="iPod">iPod</a></li>
   <li><a href="Your URL Here" title="iPhone">iPhone</a></li>
   <li><a href="Your URL Here" title="iPad">iPad</a></li>
   <li><a href="Your URL Here" title="iTunes">iTunes</a></li>
   <li><a href="Your URL Here" title="Support">Support</a></li>
   <li>
        <form>
        <input type="text" />
        </form>
   </li>
</ul>
</nav>​

Customization:

• Replace Yellow Color Highlighted Text With Your Links
• Replace Pink Color Highlighted Text With Your Titles

Oh Great! You're all done. Now Save your HTML/JavaScript gadgets and see your blog. If you need any help ask via comments. Stay Blessed :)

Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.