Tutorial Navbar Cute Style #1

Assalamu'alaikum readers! Kak Ann request cara bikin navbar kayak punya Aisha. Navbar ini kodenya Aisha dapat dari blogskin yang waktu itu pernah Aisha pakai, tapi lupa skins yang mana.

before:

after:

• Log in akun blog
• Dashboard >> Tata Letak >> Add Gadget di bawah header
• Copas kode di bawah ini:

<br /><br /><style>
.koko {
display:inline-block;
-webkit-transition:All 0.8s ease ;
-moz-transition:All 0.84s ease ;
-o-transition:All 0.8s ease ;
padding-right:5px;
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
width:60px;
text-decoration:none;
font-family:tahoma;
font-size:10px;
text-transform:uppercase;
color: #fff;
background: #F5E7E8;
text-align:center;
cursor:vertical-text;
opacity: 0.4;
}
.koko:hover{
background: #ccc;
letter-spacing: 3px;
background-position:50% 30%;
background-size:80px;
letter-spacing:2px;
color: #fff;
border-bottom:0px;
-webkit-transition:All 1.5s ease;
-moz-transition:All 1.5s ease;
-o-transition:All 1.5s ease;
box-shadow:inset 0 50px 8px #FF7676;
}
</style>
<center>
<a class="koko" href="URL">REFRESH</a>
<a class="koko" href="URL">AUTHOR</a>
<a class="koko" href="URL">TUTO</a>
<a class="koko" href="URL">BIES</a>
<a class="koko" href="URL">RANDOM</a>
<a class="koko" href="URL">THEMES</a>
<a class="koko" href="URL">LINK</a></center>
<br /><br />

• Save