Menu ini juga Dengan HTML5 Yang membuat kode kode menu ini, sudah valid html5, yang sangat bagus untuk struktur Blog, Langsung saja kita coba, artikelnya seperti dibawah ini :
Menu Navigasi Orange Dengan Css3 Dan HTML5
- Pertama, Kita Login Ke Blogger, Dengan akun anda
- Setelah berada di Blogger, Sekarang kita menuju menu ''Tata Letak''
- Klik ''Tambah Gadget'' >> Cari Gadget Bertulis ''HTML/JavaScript''
- Salin kode dibawah ini, dan Masukan di Gadget Di atas
<style>
#org_menu {
position: relative;
margin: 0 auto;
clear: both;
width: 960px;
}
#org_menu:before {
content: "";
position: absolute;
left: -10px;
bottom: -9px;
z-index: 1;
border: 10px solid transparent;
border-right-color: #c50;
}
#org_menu ul {
display: block;
position: relative;
z-index: 2;
padding: .2em 30px;
margin-right: -2em;
list-style: none;
background: #f72;
font-family: 'Arial', serif;
font-weight:bold;
font-size: 16px;
line-height: 1;
color: white;
text-transform: capitalize;
border-radius: 0 9999px 9999px 0;
box-shadow: 0 2px 8px -3px rgba(0,0,0,.5),
0 1.4em 2em -0.7em rgba(255, 255, 255, .2) inset;;
}
#org_menu ul:after {
content: "";
clear: both;
display: block;
visibility: hidden;
}
#org_menu li {
float: left;
position: relative;
}
#org_menu a {
display: block;
padding: .8em 1.4em;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0,0,0,.3);
color: white;
transition:.3s box-shadow, .3s padding;
border-radius: 9999px;
}
#org_menu a:hover,
#org_menu a:active {
background: rgba(0,0,0,.1);
color: #F90;
box-shadow: 1px 1px 5px rgba(0,0,0,.3) inset;
}
#org_menu a:active {
background:white;
color: #eee;
padding: .5em .6em .3em 1em;
text-shadow: 1px 1px 0 rgba(0,0,0,.4);
box-shadow: 10px 6px 1px #c50 inset;
}
#org_menu:hover {
transform: rotate(720deg);
}
</style>
<nav id="org_menu">
<ul>
<li ><a href="#" title="Home">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Speaking</a></li>
<li><a href="#">Writing</a></li>
<li><a href="#">Interviews</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">About me</a></li>
</ul>
</nav>
- Ganti Home,Projects Dan lain lain, dengan tulisan nama menu yang anda inginkan
- Ganti # dengan url yang ingin di tuju
- Setelah itu klik simpan
Demikianlah artikel pada hari ini, semoga yang sudah saya bagikan ini, bermanffat dan mudah untuk di pratekkan oleh sobat semua, Kalau sobat kurang mengerti atau memberikan pendapat tentang artikel ini silakan beri komentar di kolom komentar dibawah ini.
Keep blogging..
