Tutorial Membuat Navigation #1

Hai hai semuanya! 

Aku ... iya aku mau kasih tutorial singkat hari ini. Yaitu tentang membuat navigation dengan style  yang unik. Kebetulan aku belum pernah ngepos tentang navigation. Jadi, aku ngepos sekarang aja deh! Oke, langsung aja klik!

Cara:
1)Blogger >> Tata letak >> Tambahkan gadget>> HTML/Java script

2) Copas kode di bawah:

<style>
a.gelato{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border:2px solid #ccc;
font-family:trebuchet ms;
font-size:10px;
text-transform:uppercase;
text-align:center;
background-color:#FFCA7F;
color:#ffffff;
display:inline-block;
width:100px;
padding:3px;
margin:3px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
}
a.gelato:hover{
letter-spacing:10px;
background:#FFE7C5;
}
a.banana{
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border:2px solid #ccc;font-family:trebuchet ms;
font-size:10px;
text-transform:uppercase;
text-align:center;
background-color:#FFBBBB;
color:#ffffff;
display:inline-block;
width:100px;
padding:3px;
margin:3px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
}
a.banana:hover{
letter-spacing:10px;
background:#FFE4E4;
}
</style>
<br />
<center>
<a class="gelato" href="https://www.blogger.com/" title="Your Title">Page</a>
<a class="banana" href="https://www.blogger.com/" title="Your Title">Page</a>
<a class="gelato" href="https://www.blogger.com/" title="Your Title">Page</a>
<a class="banana" href="https://www.blogger.com/" title="Your Title">Page</a>
</center>

NB= Merah= ganti dengan link page kamu

Biru= ganti dengan judul page kamu

3) Save! 

Page Page Page Page Di atas itu previewnya yak! Oke, selamat mencoba. credit: THIS