Stefani Gifta Ganda's Blog

Rabu, 20 Mei 2015

Navigation Style (2)

Ara request, nih! Dia tanya cara buat navigation / menu tab kayak punyaku itu ... Aku dapet tutorial ini dari Kak Fathima pertamanya. Oke, yuk, langsung

Home About Stuff Linkies Request? Facebook Twitter Tumblr Ask.fm Karyaku Follow
THAT'S THE LIVE PREVIEW
1. Blogger > Dashboard > Layout > Add a Gadget > HTML/JavaScript
2. Kosongkan title-nya
3. Copas kode di bawah ini:
<style>
a.gelato{
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border:1px solid #000;
font-family:trebuchet ms;
font-size:12px;
text-transform:uppercase;
text-align:center;
background-color:#FFDDAC;
color:#000000;
display:inline-block;
width:80px;
padding:3px;
margin:1px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
}
a.gelato:hover{
background:#FFEACC;
}
a.banana{
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
border:1px solid #000;
font-family:trebuchet ms;
font-size:12px;
text-transform:uppercase;
text-align:center;
background-color:#FFC5E9;
color:#000000;
display:inline-block;
width:80px;
padding:3px;
margin:1px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
}
a.banana:hover{
background:#FFDFF3;
}
</style>
<center>
<a class="gelato" href="URL BLOG KAMU">Home</a>
<a class="banana" href="URL PAGE KAMU">About</a>
<a class="gelato" href="URL PAGE KAMU">Stuff</a>
<a class="banana" href="URL PAGE KAMU">Linkies</a>
</center>
<br />
4. Save!
NOTE: Kalau mau menambahkan page lagi, copy kode di bawah dan paste di BAWAH yang <a class="banana" href="URL PAGE KAMU">Linkies</a>
<a class="gelato" href="URL PAGE KAMU">JUDUL PAGE</a>
<a class="banana" href="URL PAGE KAMU">JUDUL PAGE</a>
Nah, sudah selesai! Kalau gagal, tanya aja ke aku di komentar


By

There are 11 komentar.

  1. Unknown20 Mei 2015 16.29

    Thanks! Besok aku cobain^^

    BalasHapus
  2. Stefani Gifta20 Mei 2015 16.37

    @Alma Raisha Ara oke, sama-sama Ara ... thx juga sudah pakai tutorialku

    BalasHapus
  3. Unknown21 Mei 2015 10.10

    Tapi aku pake hp ribet ngeditnya deh... U_U

    BalasHapus
  4. Fathima21 Mei 2015 10.29

    Gifta, ini tutorialku bukan ya?, kalau iya lain kali tolong pake creditnya

    BalasHapus
  5. Fathima21 Mei 2015 14.28

    oh, kirain, soalnya kodenya hampir mirip

    BalasHapus
  6. Nadya_NFA150726 Mei 2017 19.47

    thx, kak

    BalasHapus
  7. Anonim14 Oktober 2018 11.10

    thx kak gifta!

    BalasHapus
  8. nadya :D15 Oktober 2020 10.01

    izin pake kak!~

    BalasHapus
  9. nadya :D12 November 2020 10.44

    kak, izin basecode yaa + izin repost (tapi yang udah aku edit), boleh? nanti aku kasih credit!

    BalasHapus