Navigation Style (1)

Adelia request lagi, nih! Langsung aja, yuk!

• Blogger >>> Layout / Tata Letak >>> Add a Gadget >>> HTML/JavaScript
• Copy dan paste kode ini:

<style type="text/css">
a.linkies {
font-size: 13px;
font-family: JENIS FONT;
display:inline-block;
text-align:center;
border:2px JENIS BORDER #E94B4B;
border-radius:5px;
width: 90px;
color: WARNA TULISAN;
background:#fff;
padding:1px;
margin: 3px;
text-decoration: none;
-webkit-transition-duration:0.5s;
}
a.linkies:hover {
display:inline-block;
text-align:center;
border:2px JENIS BORDER #E94B4B;
border-radius:1px;
width: 95px;
color: WARNA TULISAN;
background: #fff;
-webkit-transition-duration:0.5s;
}
</style>
<a class="linkies" href="URL LAMAN">Home</a>
<a class="linkies" href="URL LAMAN">Stuff</a>
<a class="linkies" href="URL LAMAN">Linkies</a>

KETERANGAN:

• Merah: ukuran font
• Biru: yang 2px itu ukuran border & yang #E94B4B itu warna border
• Ungu: warna background navigation tab-nya
• Jangan lupa, kode setelah a.linkies:hover { adalah kode saat cursor diarahkan ke navigation tab. Sedangkan kode setelah a.linkies { adalah kode sebelum navigation tab di-hover

Untuk warna-warna cek di sini