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:

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.