Make your blogspot as like as " APPLE " style

Welcome to our new post. Today I will see you that how create menu bar as like as apple style in your blogspot site. It will be look like as like as this :

Isn’t it nice ? let’s see how can we add this :

First off all go to Blogger Dashboard < Template < Edit HTML

Search by: Ctrl+f

       ]]></b:skin>

And then you just paste this code on above it.

  #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("<a href="http://1.bp.blogspot.com/-fkeve1IzBHE/UOPAi98C0yI/AAAAAAAAASY/GTI3XsIrxEs/s1600/btrix_magnifier.png&quot" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9rkS9Q9agU4p7zbIZ_mlbsXu629v1XNkRXlZ5aPP41zHoDgoy_MaUuCkNG8ASH0UBdjN2kNmdTdwkCrSZK9ZnP5cxz6WndPKJDXFZgd2lol6GCyr0UoMggfCircO4RN26KE7huLhKglVP/s1600/btrix_magnifier.png&quot']);" rel="nofollow">http://1.bp.blogspot.com/-fkeve1IzBHE/UOPAi98C0yI/AAAAAAAAASY/GTI3XsIrxEs/s1600/btrix_magnifier.png&quot</a>;), -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("<a href="http://1.bp.blogspot.com/-fkeve1IzBHE/UOPAi98C0yI/AAAAAAAAASY/GTI3XsIrxEs/s1600/btrix_magnifier.png&quot" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9rkS9Q9agU4p7zbIZ_mlbsXu629v1XNkRXlZ5aPP41zHoDgoy_MaUuCkNG8ASH0UBdjN2kNmdTdwkCrSZK9ZnP5cxz6WndPKJDXFZgd2lol6GCyr0UoMggfCircO4RN26KE7huLhKglVP/s1600/btrix_magnifier.png&quot']);" rel="nofollow">http://1.bp.blogspot.com/-fkeve1IzBHE/UOPAi98C0yI/AAAAAAAAASY/GTI3XsIrxEs/s1600/btrix_magnifier.png&quot</a>;), -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; }​

#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("<a href="http://1.bp.blogspot.com/-fkeve1IzBHE/UOPAi98C0yI/AAAAAAAAASY/GTI3XsIrxEs/s1600/btrix_magnifier.png&quot" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9rkS9Q9agU4p7zbIZ_mlbsXu629v1XNkRXlZ5aPP41zHoDgoy_MaUuCkNG8ASH0UBdjN2kNmdTdwkCrSZK9ZnP5cxz6WndPKJDXFZgd2lol6GCyr0UoMggfCircO4RN26KE7huLhKglVP/s1600/btrix_magnifier.png&quot']);" rel="nofollow">http://1.bp.blogspot.com/-fkeve1IzBHE/UOPAi98C0yI/AAAAAAAAASY/GTI3XsIrxEs/s1600/btrix_magnifier.png&quot</a>;), -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("<a href="http://1.bp.blogspot.com/-fkeve1IzBHE/UOPAi98C0yI/AAAAAAAAASY/GTI3XsIrxEs/s1600/btrix_magnifier.png&quot" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9rkS9Q9agU4p7zbIZ_mlbsXu629v1XNkRXlZ5aPP41zHoDgoy_MaUuCkNG8ASH0UBdjN2kNmdTdwkCrSZK9ZnP5cxz6WndPKJDXFZgd2lol6GCyr0UoMggfCircO4RN26KE7huLhKglVP/s1600/btrix_magnifier.png&quot']);" rel="nofollow">http://1.bp.blogspot.com/-fkeve1IzBHE/UOPAi98C0yI/AAAAAAAAASY/GTI3XsIrxEs/s1600/btrix_magnifier.png&quot</a>;), -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; }​

*look at the top it is set as margin:40px , width:980px ও height:34px .Let’s convert this settings according to your site measurement .

Then go to 

Layout < Add a Gadget < HTML Script

Then paste the code of below

<nav> <ul id="appleNav">    <li><a href="<a href="http://www.s2free.blogspot.com/&quot" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.s2free.blogspot.com/&quot']);" rel="nofollow">http://www.s2free.blogspot.com/&quot</a>; title="Apple"><img src="<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_7i5qzA8n50an3U-nnSn4f68yC9Ikywmj82K-uhbPk4XuLvTpjhk9wF_GgS-P0nklofe5kYJE1HQdPyJVjT5NH7Rjlq97Cyl-7FhRLSdfjb5-BeVGvbeDURfhHgUxCWc9a6J8y71ZjgCT/s1600/btrix_logo.png&quot" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_7i5qzA8n50an3U-nnSn4f68yC9Ikywmj82K-uhbPk4XuLvTpjhk9wF_GgS-P0nklofe5kYJE1HQdPyJVjT5NH7Rjlq97Cyl-7FhRLSdfjb5-BeVGvbeDURfhHgUxCWc9a6J8y71ZjgCT/s1600/btrix_logo.png&quot']);" rel="nofollow">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_7i5qzA8n50an3U-nnSn4f68yC9Ikywmj82K-uhbPk4XuLvTpjhk9wF_GgS-P0nklofe5kYJE1HQdPyJVjT5NH7Rjlq97Cyl-7FhRLSdfjb5-BeVGvbeDURfhHgUxCWc9a6J8y71ZjgCT/s1600/btrix_logo.png&quot</a>; 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="Support">Support</a></li>    <li>         <form>         <input type="text" />         </form>    </li> </ul> </nav>​

In this code’s which place are using (#) in this places give your url and in the place of Store , Pod , Ipod , Mac replaced by the names of your pages !

And its done.  All the best friend’s.