Add apple styled navigation menu bar in blogger

Apple styled navigation menu bar looks very attractive and enhances the look of your blog. It is fast loading and SEO friendly so your blog doesn't face slowdown problems with this navigation bar. This apple styled menu bar looks like the navigation bar as on Apple's official website. So, do you want to add it in your blog? Let's see the steps to add this apple styled navigation menu bar in blogger:

• Login to your blogger account and go to Template > Edit HTML
• Now, find ]]></b:skin> in the code (you may use ctrl+F keys to get the search bar within the code editor) and paste the following code just before it.

#applenavbar{-moz-border-radius:4px;-moz-box-shadow:0 3px 3px #cecece;-webkit-animation:showMenu 1s;-webkit-border-radius:4px;-webkit-box-shadow:0 3px 3px #cecece;border-radius:4px;box-shadow:0 3px 4px #8b8b8b;font-family:"Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;font-size:13px;height:34px;letter-spacing:-.5px;list-style:none;margin:40px 0;position:relative;text-shadow:0 -1px 3px #202020;width:980px}#applenavbar li{background-color:#5f5f5f;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%);border-bottom:1px solid #575757;border-left:1px solid #929292;border-right:1px solid #5d5d5d;border-top:1px solid #797979;display:block;float:left;height:34px;width:105px}#applenavbar li:not(:last-child):hover{-moz-box-shadow:inset 0 0 5px 5px #535353;-webkit-box-shadow:inset 0 0 5px 5px #535353;background-color:#383838;background-image:0;box-shadow:inset 0 0 5px 5px #535353}#applenavbar li:not(:last-child):active{-moz-box-shadow:inset 0 1px 2px 2px #000;-webkit-box-shadow:inset 0 1px 2px 2px #000;background-color:#383838;background-image:0;box-shadow:inset 0 1px 2px 2px #000}#applenavbar li a{color:#FFF;display:block;line-height:34px;outline:none;text-align:center;text-decoration:none}#applenavbar form input{-moz-border-radius:10px;-moz-box-shadow:inset 0 2px 1px 1px #363636;-webkit-border-radius:10px;-webkit-box-shadow:inset 0 2px 1px 1px #363636;background-color:#6E6E6E;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin3dnTY52rx3xI6eLVCuRQ0KlHCn_zzwb-jJvMiRxTF6ZcFo0k3Xdh6_6sjTIwdtLqBY2_Jtn6A7_BB1Ch_y9_y6kcWvKaPGKr5KyBKNfRJ0F3LrtBAw9BcLDeu0LzOGgLY-jO56CGLbs/s1600/pctricksguru_magnifier.png), 0;background-repeat:no-repeat;border:none;border-radius:10px;box-shadow:inset 0 2px 1px 1px #363636;color:#eee;height:20px;margin-left:9px;margin-top:8px;padding-left:20px;padding-right:10px;width:76px}#applenavbar li:first-child{-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px 0 0 4px;border-left:none;border-radius:4px 0 0 4px}#applenavbar li:first-child a img{margin-top:-2px;vertical-align:middle}#applenavbar 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}to{opacity:1}

• Now save your template.
• Its time to add the apple styled navbar at any place you like. So, just go to blogger LAYOUT section and Add A New HTML/Javascript widget.
• Now paste the following code in the empty html widget box and save that.

<ul id="applenavbar">
<li><a href="#" title="Apple"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4e7kYwXe_9Xqs9cgPzP_rq_PncEii-MU7jvZUL0InttWGOq6RHqk5ATXqWwP-bArk8AClKckxElDxs9Et0pQvoGLyjSUiDcVT5i3S0olbKPQOtk-mzVgWL7ux2d6TwqpWUsWKsR14aUg/s1600/apple_logo.png" alt="Apple Logo"/></a></li>
<li><a href="#" title="Store">Store</a></li>
<li><a href="#" title="Mac">Mac</a></li>
<li><a href="#" title="iPod">iPod</a></li>
<li><a href="#" title="iPhone">iPhone</a></li>
<li><a href="#" title="iPad">iPad</a></li>
<li><a href="#" title="iTunes">iTunes</a></li>
<li><a href="#" title="Help">Help</a></li>
<li><a href="#" title=" "> </a></li>
</ul>

Note : Change the # with your url and green color text with your own text and save the widget.

• That's it. Arrange the newly added widget at any desired place and save the layout. Now open your blog and see the apple styled navigation menu bar in action.

Keep visiting for more tips and tricks.