Cara Menciptakan Sajian Navigasi Mudah Css3
Banyak sekali style navigasi yang dapat kita temukan di Internet. Namun kalau 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 yaitu effect hover yang akan muncuk dikala kursor di arahkan pada link. Sobat,,, kalau ingin tampilannya lebih menarik Anda dapat memodifikasi. Yuuk teman kita eksklusif 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 instruksi dibawah ini dan pastekan diatasnya atau sebelumnya.
5. Selanjutnya Anda cari kode <div class="content-wrapper"> , kemudian salin instruksi dibawah ini dan pasangkan di atasnya.
6. Simpan Template dan lihat kesannya .
Memang cukup sederhana navigasinya tapi menarik bukan, sudah dulu ya biar bermanfaat!
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 yaitu effect hover yang akan muncuk dikala kursor di arahkan pada link. Sobat,,, kalau ingin tampilannya lebih menarik Anda dapat memodifikasi. Yuuk teman kita eksklusif 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 instruksi 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 instruksi 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 kesannya .
Memang cukup sederhana navigasinya tapi menarik bukan, sudah dulu ya biar bermanfaat!