Banyak sekali style navigasi yang dapat kita temukan di Internet. Namun jikalau Anda lebih menyukai style atau gaya yang sederhana Anda dapat menemukannya disini yaitu sajian navigasi seherhana dengan properti CSS3.
Ada pepatah mengungkapkan didalam sebuah kesederhanaan akan terlihat sebuah keindahan, pepatah itu itu pas sekali dengan navigasi satu ini ; cukup sederhana namun mempunyai daya tarik. Fitur pada navigasi ini ialah effect hover yang akan muncuk dikala kursor di arahkan pada link. Sobat,,, jikalau ingin tampilannya lebih menarik Anda dapat memodifikasi. Yuuk teman kita pribadi menuju tutorialnya, ikuti setiap lahap - tahapnya ya.....
1. Login ke akun Bloger
2. Pilih Template, kemudian klik Edit HTML
3. Selanjutnya dengan memakai Ctrl+F Anda cari kode ]]></b:skin>
4. Jika sudah menemukan, Anda copy arahan dibawah ini dan pastekan diatasnya atau sebelumnya.
5. Selanjutnya Anda cari kode <div class="content-wrapper"> , kemudian salin arahan dibawah ini dan pasangkan di atasnya.
6. Simpan Template dan lihat balasannya .
Memang cukup sederhana navigasinya tapi menarik bukan, sudah dulu ya biar bermanfaat!
Sumber http://www.websiteedukasi.com/
Ada pepatah mengungkapkan didalam sebuah kesederhanaan akan terlihat sebuah keindahan, pepatah itu itu pas sekali dengan navigasi satu ini ; cukup sederhana namun mempunyai daya tarik. Fitur pada navigasi ini ialah effect hover yang akan muncuk dikala kursor di arahkan pada link. Sobat,,, jikalau ingin tampilannya lebih menarik Anda dapat memodifikasi. Yuuk teman kita pribadi menuju tutorialnya, ikuti setiap lahap - tahapnya ya.....
1. Login ke akun Bloger
2. Pilih Template, kemudian klik Edit HTML
3. Selanjutnya dengan memakai Ctrl+F Anda cari kode ]]></b:skin>
4. Jika sudah menemukan, Anda copy arahan dibawah ini dan pastekan diatasnya atau sebelumnya.
/*Simpel Menu Navigasi CSS3*/
.skew-menu {
font-family: Helvetica Neue, Helvetica, sans-serif;
text-align: center;
margin-top: 9em;
}
.skew-menu ul {
display: inline-block;
margin: 0;
padding: 0;
list-style: none;
transform: skew(-25deg);
}
.skew-menu ul li {
background: #fff;
float: left;
border-right: 1px solid #eee;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
text-transform: uppercase;
color: #555;
font-weight: bolder;
transition: all 0.3s linear;
}
.skew-menu ul li:first-child {
border-radius: 7px 0 0 7px;
}
.skew-menu ul li:last-child {
border-right: none;
border-radius: 0 7px 7px 0;
}
.skew-menu ul li:hover {
background: #eee;
color: #ff6347;
}
.skew-menu ul li a {
display: block;
padding: 1em 2em;
color: inherit;
text-decoration: none;
transform: skew(25deg);
}
5. Selanjutnya Anda cari kode <div class="content-wrapper"> , kemudian salin arahan dibawah ini dan pasangkan di atasnya.
<nav class="skew-menu">
<ul>
<li><a href="#">Shoes</a></li>
<li><a href="#">Sandals</a></li>
<li><a href="#">Shirts</a></li>
<li><a href="#">Jackets</a></li>
</ul>
</nav>
6. Simpan Template dan lihat balasannya .
Memang cukup sederhana navigasinya tapi menarik bukan, sudah dulu ya biar bermanfaat!
Sumber http://www.websiteedukasi.com/
