Welcome here! Please leave your comment and follow my blog. Use CTRL+C to copy (no right click allowed)
This blog is full of tutorials. Please use them, by clicking the "STUFF" page above^^ Thanks for your visit!!
I'm Gifta, I can't online everyday /^-^\/>

Thank you for your visit, please use my tutorials...!
August 05, 2016

Sunday, April 19, 2015

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

There are 2 comments.
Please post another comment..