So you want to add something attractive that’s solves your navigation problem and even looks awesome, well now you can add Apple style navigation menu bar that will dazzle your whole blog with its looks and links holding problem. So I grabbed this BloggerTrix if he has put his hard work in creating this widget I thank him for this widget.
Well this navigation menu are looks similar to what you might have seen on apple’s website but I tested this menu and it lacked that search extending feature but still it solves your problem.
So the menu can be viewed using the above demo link and image is also posted, so you can check that too. So now just follow below steps and add this menu bar to your blog.
- Visit Blogger > Template > Edit HTML
- Now press
Ctrl +F and search for]]></b:skin>& paste below code above it.#appleNav{-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}#appleNav 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}#appleNav 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}#appleNav 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}#appleNav li a{color:#FFF;display:block;line-height:34px;outline:none;text-align:center;text-decoration:none}#appleNav 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/AVvXsEjlThoHKrjYy8SZ0GxYrF0ACWXK7_iIwCwCApT-eGGXpBCTxBGhCkMAEw48Pm3ncSWnGufcbFwtaMs_hB_T6rWdinXgLSTQC6R7ZPb4IMb148xHbZTxuAneozPS2-KkA60ocK59i5KMD2Pb/s1600/btrix_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}#appleNav 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}#appleNav li:first-child a img{margin-top:-2px;vertical-align:middle}#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}to{opacity:1}
- Now just save your template and navigate to Layout > Add Gadget > HTML/Javascript.
- Now add below code into it.
<nav>
<ul id="appleNav">
<li><a href="#" title="Apple"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPsJDYOdYhwEKskzhlhs_AOHHM_fh2CkHDYR_JPST21F_IhtggBCOMoBKl4GgtclPL9-d4YvKZKbqeszt6TBJbb9h97dqMIHEHW4qouh_C5zxd9_YJWmTAKF-bsSdPyr-EZ5RGxcjTLH4j/s1600/btrix_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="Support">Support</a></li>
<li><form><input type="text"/></form></li>
</ul>
</nav> - Now just replace # with links and name of what ever page you wanna link too.
That’s it now you menu will be live, you can even edit any kind of style you want to if you have pretty much knowledge about CSS. So have fun and do comment if you find any problem using this menu and once again thanks too BloggerTrix.
(COMMENTS WILL LOAD AUTOMATICALLY)