Refresh About Friends Stuff Blogskins Request Credits Follow

Selasa, 16 Januari 2018

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

4 komentar:

  1. wah nice tutor....
    btw, yang punya blog gk pake navigasi di halaman atasnya?

    BalasHapus
  2. @Chipiet♥
    Thanks..
    navigationku di bagian sidebar blog, akak -_-

    BalasHapus
  3. Berarti yang dibawahnya font berwarna merah dan biru itu kita ganti sesuai keinginan kita sendiri?

    BalasHapus

1. Jangan gunakan kata-kata kotor atau porno!
2. Jangan mempromosikan barang di komentar!
3. Komentar harus berhubungan dengan pos!