toolbar maker

Sunday, June 30, 2013

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','http://1.bp.blogspot.com/-fkeve1IzBHE/UOPAi98C0yI/AAAAAAAAASY/GTI3XsIrxEs/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','http://1.bp.blogspot.com/-fkeve1IzBHE/UOPAi98C0yI/AAAAAAAAASY/GTI3XsIrxEs/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','http://1.bp.blogspot.com/-fkeve1IzBHE/UOPAi98C0yI/AAAAAAAAASY/GTI3XsIrxEs/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','http://1.bp.blogspot.com/-fkeve1IzBHE/UOPAi98C0yI/AAAAAAAAASY/GTI3XsIrxEs/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="http://2.bp.blogspot.com/-ZMpJmyf5SNs/UOPAiNI2EdI/AAAAAAAAASU/h2MpEi9JbZI/s1600/btrix_logo.png&quot" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://2.bp.blogspot.com/-ZMpJmyf5SNs/UOPAiNI2EdI/AAAAAAAAASU/h2MpEi9JbZI/s1600/btrix_logo.png&quot']);" rel="nofollow">http://2.bp.blogspot.com/-ZMpJmyf5SNs/UOPAiNI2EdI/AAAAAAAAASU/h2MpEi9JbZI/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.


Categories: ,

2 comments:

  1. just concentrate on the steps it's a proved method !!!
    thanks for commenting

    ReplyDelete

Subscribe to RSS Feed Follow me on Twitter!