Menu Navigasi HTML5 Dengan Style Biru | Ghiyats Blogs - Artikel Pada hari ini, Akan saya bagikan sebuah Menu navigasi Berwarna biru, Menu navigasi mungkin sobat sudah mengerti apa kegunaan, Kegunaan menu adalah untuk mempermudah pengunjung mencari halaman yang ada di blog tersebut.
Menu ini juga di lengkapi dengan Html 5, Langsung saja kita coba, Membuat artikel ini, Tutorialnya seperti di bawah ini :
- Pertama, Kita harus login ke blogger.com
- Terus, menuju ke menu ''Template'' >> Klik ''EDIT HTML''
- Cari kode <head> untuk memasukkan style Html5, dan masukan kode dibawah ini, sebelum kode tersebut
<link href="https://dl.dropboxusercontent.com/u/223738947/html5-reset.css" type="text/css" rel="stylesheet">
- Setelah itu, Kita Menuju Menu ''Tata Letak'' >> ''Tambah Gadget''
- Cari gadget ''HTM/JavaScript'' Terus masukan kode dibawah ini, di dalamnya.
<style>
#nav_menu {
width: 100%;
margin: 10px;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: bold;
margin-right: auto;
margin-left: auto;
text-transform: capitalize;
}
#nav_menu ul {
float: auto;
overflow: hidden;
margin:0 auto;
text-align: center;
}
#nav_menu:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
#nav_menu a {
display:block;
padding: 10px 30px;
color: #fff;
margin: 0 auto;
text-decoration: none;
text-shadow: 0 1px #333;
text-align:center;
}
#nav_menu a:hover {
color: #FFF;
text-shadow: 0 2px #000;
}
#nav_menu li {
text-align: center;
display: inline-block;
margin: 0 auto;
border-style: solid;
border-width: 1px;
border-color: #005fa1 #005fa1 #005fa1 #005fa1;
background: #0096ff; /* Old browsers */
background: -moz-linear-gradient(top, #0096ff 0%, #006bb6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0096ff), color-stop(100%,#006bb6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0096ff 0%,#006bb6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0096ff 0%,#006bb6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0096ff 0%,#006bb6 100%); /* IE10+ */
background: linear-gradient(top, #0096ff 0%,#006bb6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0096ff', endColorstr='#006bb6',GradientType=0 ); /* IE6-9 */
}
#nav_menu li:hover {
background: #404040; /* Old browsers */
background: -moz-linear-gradient(top, #404040 0%, #252525 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,##404040), color-stop(100%,#252525)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, ##404040 0%,#252525 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #404040 0%,#252525 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #404040 0%,#252525 100%); /* IE10+ */
background: linear-gradient(top, #404040 0%,#252525 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#404040', endColorstr='#252525',GradientType=0 ); /* IE6-9 */
border-color: #252525;
}
#nav_menu li:first-child {
border-color: none;
border-radius: 100px 0 0 100px;
}
#nav_menu li:last-child {
border-color: none;
border-radius: 0 100px 100px 0;
}
#nav_menu li:first-child a:hover {
border-color: #252525;
}
</style>
<!-- begin navigation -->
<nav id="nav_menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Faqs</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- end navigation -->
- Ganti # dengan url yang ingin di tuju
Demikianlah artikel pada hari ini, semoga apa yang saya bagikan bermanfaat untuk sobat semua, Silakan beri komentar anda tentang artikel di kolom komentar di bawah ini,
Terima Kasih...
Via :
MyBlogger-Tricks
