Skip to content Skip to sidebar Skip to footer

Membuat page navigation hover cantik

Membuat page navigation hover cantik

Sebelum ini aku pernah menuliskan tutorial page navigation yang cantik, cute juga dan sekarang ada page navigasi yang akan aku share bagikan kepada teman-teman yang mau hehehe...mau apa ya? mau blog nya cantik tapi tetap simple xD. Itu gambarnya seperti di atas dan kalau anak panah mouse mengarah kesitu akan ada hovernya, berubah warna dan bisa muter/pusing melingkar. Untuk membuat page navigation hover cantik seperti di atas caranya adalah:

Membuat page navigation hover cantik

1.Masuk ke Design/rancangan > Tata Letak > Tambahkan Gadget
2.HTML/JavaScript dan masukkan kode di bawah ini:

<style>#left {
top:60px;left:10px;position: fixed;float: left;
}
#nav {
margin-top:40px;float: left;}
#nav a {
background-color:pink;color:#fff;display: block;width: 50px;height: 50px;border-radius: 40px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
padding:6px;
font-family:arial;font-size: 10px;line-height:50px;
text-decoration: none;
text-align: center;
margin-top: 20px;-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#nav a:hover {
background-color:orange;color: #fff;-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);-webkit-transition:1300ms;}
</style>
<div id="left">
<div id="nav">
<a href="link">title</a><a href="link">title</a><a href="link">title</a><a href="link">title</a></div></div>
3.Yang aku tandai dengan warna itu bisa diubah sendiri menurut keinginan, dan tulisan warna biru link adalah diganti dengan link navigation, title warna merah adalah nama page navigasi misalnya home, about me, dll setelah itu simpan.

Itulah cara membuat page navigation hover cantik dari aku, selamat mencoba xD.

2 comments for "Membuat page navigation hover cantik"

  1. wow...keren banget, saya mau ada pengaruh ndak di loading nya?

    ReplyDelete
    Replies
    1. hmmm kalau navigasi ini gak membuat loading jadi berat kayaknya xD

      Delete