Tutorial: Navigation bar with hover #2

Bismillahirahmanirahim...
Assalamualaikum dan Salam Sejahtera.

Fara dah berbulan tak buat tutorial..

ni Fara nak share tuto ni kat korang sebab navi ni agak menarik :)kedit heahhhhhhh

[ LIVE PREVIEW ]

Sonang jo ~

1.Sign in --> Dashboard --> Layout --> Add gadget --> Html/java script

2.Copy semua code bawah ni dan paste kan kat ruang html/java script.

<style>
a.kai {border-radius:3333px; opacity:0.9;padding:10px; margin:2px;background:#000; display:inline-block; height:50px; width: 50px;}
a.kai:hover { border-radius:6px; transform: rotate(360deg) ; -webkit-transform: rotate(360deg) ; -moz-transform: rotate(360deg) ; -o-transform: rotate(360deg) ; -ms-transform: rotate(360deg) ;-webkit-transition-duration: 0.5s;}
.icon {border-radius:3333px; height: 50px; width: 50px;}
.icon:hover {border-radius:6px; border-radius: none; transform: rotate(360deg) ; -webkit-transform: rotate(360deg) ; -moz-transform: rotate(360deg) ; -o-transform: rotate(360deg) ; -ms-transform: rotate(360deg) ;-webkit-transition-duration: 0.5s;}
</style>
<a class="kai" href="http://www.blogger.com/"><img class="icon" src="http://i.imgur.com/2kf4t.png" /></a>
<a class="kai" href="http://www.blogger.com/"><img class="icon" src="http://i.imgur.com/sSwKl.png" /></a>
<a class="kai" href="http://www.blogger.com/"><img class="icon" src="http://i.imgur.com/b2Re9.png" /></a>
<a class="kai" href="http://www.blogger.com//"><img class="icon" src="http://i.imgur.com/zQPmL.png" /></a>
<a class="kai" href="http://www.blogger.com/"><img class="icon" src="http://i.imgur.com/S3zgO.png" /></a>

tukar..
*Merah : link /url page korang.
*Hijau : ur; gambar yang korang suka.

3. SAVE!!!!

kan senang?
bye and Assalamualaikum.