On this quick tutorial, you will learn how to Create an Iphone Navigation Menu on Blogger. The old iphone navigation with the silver style is very awesome. with this blogger tutorial we will show you how to add a beautiful navigation menu for your blogspot blog.

Create an Iphone Navigation Menu on Blogger

1. Go to Layout > Add A Gadget and select HTML/JavaScript gadget.
2. Copy the HTML link and paste it inside the content box.

[css]
/* Old */
.old {
width: 960px;
height: auto;
}
.old ul {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
}
.old ul li {
float: left;
list-style: none;
}
.old ul li a {
font: bold 12px/100% “Lucida Sans Unicode”, Arial, Helvetica, sans-serif;
padding: 11px 35px;
text-decoration: none;
color: rgba(0,0,0,.8);
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background: -webkit-linear-gradient(top, #cacaca, #848484);
background: -moz-linear-gradient(top, #cacaca, #848484);
background: -ms-linear-gradient(top, #cacaca, #848484);
background: -o-linear-gradient(top, #cacaca, #848484);
background: linear-gradient(to bottom, #cacaca, #848484);
}
.old ul li a:before {
border-left: 1px solid rgba(255,255,255,.1);
content: “”;
padding: 10px 35px;
margin: 0 -35px;
position: relative;
}
.old ul li a:after {
border-right: 1px solid rgba(255,255,255,.1);
box-shadow: 1px 0px 0px rgba(0,0,0,.5);
content: “”;
padding: 10px 35px;
margin: 0 -35px;
position: relative;
}
.old ul li:last-child a:after {border: none; box-shadow: none;}
.old ul li:first-child a {-moz-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px;}
.old ul li:last-child a {-moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;}
.old ul li a:hover {
background: -webkit-linear-gradient(top, #929292, #535353);
background: -moz-linear-gradient(top, #929292, #535353);
background: -ms-linear-gradient(top, #929292, #535353);
background: -o-linear-gradient(top, #929292, #535353);
background: linear-gradient(to bottom, #929292, #535353);
}
.old ul li a:active {
-webkit-box-shadow: inset 0 5px 10px rgba(0,0,0,.5);
-moz-box-shadow: inset 0 5px 10px rgba(0,0,0,.5);
box-shadow: inset 0 5px 10px rgba(0,0,0,.5);
}

[/css]

You can apply this not only to navigation bars but also to buttons that ask for Download files or take users to social network pages.
To rename the category, simply replace Home with your own text. For the link, just replace # with the Page URL.

Tutorial by myblogger-tricks

Republished by Imagincreation