Cara Membuat Menu Navigasi Dengan Style Putih | Ghiyats Blogs - Hai, pada atikel yang akan saya bagikan akan saya berikan sebuah menu navigasi berwarna putih, menu ini dengan tampilan keren dan elegan, Berbeda Dengan Menu navigasi lainnya, Menu ini Warna Menunya Seperti Iphone.
Gimana Tertarik dengan menu yang akan saya bagikan ini ? Langsung saja, Kita coba belajar membuat Menu ini dan Tutorialnya Seperti di bawah ini :
Cara Membuat Menu Navigasi Dengan Style Putih
- Pertama login ke blogger
- Pergi ke menu Tata Letak >> Tambah Gadget
- Cari gadget ''HTML/JavaScript'' Dan masukan kode dibawah ini, Di dalam Gadget tersebut
/* 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);
}
<div class="old">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Mac</a></li>
<li><a href="#">iPod</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#">iPad</a></li>
<li><a href="#">iTunes</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
- Ganti # Dengan Url yang ingin di tuju
- Ganti Juga Home, Store dan yang lain seterah Tulisan menu yang anda inginkan
- Setelah itu, Klik Simpan
Demikianlah artikel ini yang berjudul ''Cara Membuat Menu Navigasi Dengan Style Putih'' Semoga bermanfaat dan mudah untuk di pratekkan, Kalau sobat masih binggung silakan beri pendapat di kolom komentar di bawah ini, Terima Kasih..
