Cara Membuat Navigation Tab di Navbar

by K A L L E N
Let's Share, nyaan! (。•ㅅ•。) :
Konnichiwaa~!
Berhubung saya lagi senggang dan biar gak lupa kode html nya(?) jadinya saya bikin tutorial ini~!
saya bingung jelasinnya itu di title nya apaan wkwkwk :v ya pokoknya nanti liat gambarnya aja deeh~!
Hari ini saya mau ngejelasin yang ada di gambar inii yang dipanahin merah itu looh!
click gambar untuk memperjelas
Nah itu kan navbar (biasanya orang-orang navbarnya diatas, tapi saya maunya dibawah biar headernya ga ketutupan :v) nya ada link-link nya gitu untuk ke laman selain home. tapi pas kita scroll kebawah, linknya juga ngikut kebawah. ngerti gak? ._. <-- pea
saya bingung ngejelasinnya hahaha D: /dor
pokoknya untuk navigation tab yang sekalian navbar deh!
udah beberapa hari ini aku otak-atik blog orang tapi ga nemu tutorialnya (ntah ini ga nemu atau emang males nyarinya wkwk :v) dan akhirnya nemu sendiri apa yang aku inginkan :'3 *yeaaay*

langsung aja ke Template > Edit HTML
lalu cari kode 
<head>
Lalu letakkan kode ini dibawah <head>
<div style='position: absolute; top:0px; right: 0px; width:100%; border-radius:0px; position:fixed; padding:10px; background-color: #FFFFFF; color: #FFFFFF; font-size:20px;'> 
<div><span class='Apple-style-span' style='font-family: verdana; font-size: medium; '>
<span id='nav' style='font-size: 13px; font-family: serif; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color:#FFFFFF; color: #FFFFFF;  text-align: center; text-transform: none; padding-top: 5px; padding-bottom: 5px; padding-left: 7px; padding-right: 7px; height: 21px; cursor: pointer; border-radius: 5px 5px 5px 5px; border: 2px solid #FFFFFF; '><base target='_blank'/><a href='LINK KAMU' style='color: rgb(110, 110, 110); text-decoration: none; -webkit-transition-duration: 1s;'>JUDUL KAMU</a></span>
<span id='nav' style='font-size: 13px; font-family: serif; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color:#FFFFFF; color: #FFFFFF;  text-align: center; text-transform: none; padding-top: 5px; padding-bottom: 5px; padding-left: 7px; padding-right: 7px; height: 21px; cursor: pointer; border-radius: 5px 5px 5px 5px; border: 2px solid #FFFFFF; '><base target='_blank'/><a href='LINK KAMU' style='color: rgb(110, 110, 110); text-decoration: none; -webkit-transition-duration: 1s;'>JUDUL KAMU</a></span>
<span id='nav' style='font-size: 13px; font-family: serif; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color:#FFFFFF; color: #FFFFFF;  text-align: center; text-transform: none; padding-top: 5px; padding-bottom: 5px; padding-left: 7px; padding-right: 7px; height: 21px; cursor: pointer; border-radius: 5px 5px 5px 5px; border: 2px solid #FFFFFF; '><base target='_blank'/><a href='LINK KAMU' style='color: rgb(110, 110, 110); text-decoration: none; -webkit-transition-duration: 1s;'>JUDUL KAMU</a></span>
</span></div>
</div>

  • Hijau untuk mengganti warna background navbarnya. background-color: #FFFFFF; bisa diganti jadi background:url(URL BACKGROUND KAMU);
  • Abu-abu untuk mengatur besar kecilnya ukuran font yang kamu mau
  • Merah untuk mengganti warna background dan warna font navigation tabnya. background-color: #FFFFFF; bisa diganti jadi background:url(URL BACKGROUND KAMU);
  • Orange untuk menambah url link kamu yang mau di masukin ke navigation tab
  • Kuning untuk menulikan judul di navigation tab kamu yang ada linknya

Kalau semisal kamu mau menambah tab lainnya, tinggal masukin kode ini ajaa
<span id='nav' style='font-size: 13px; font-family: serif; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color:#FFFFFF; color: #FFFFFF;  text-align: center; text-transform: none; padding-top: 5px; padding-bottom: 5px; padding-left: 7px; padding-right: 7px; height: 21px; cursor: pointer; border-radius: 5px 5px 5px 5px; border: 2px solid #FFFFFF; '><base target='_blank'/><a href='LINK KAMU' style='color: rgb(110, 110, 110); text-decoration: none; -webkit-transition-duration: 1s;'>JUDUL KAMU</a></span>

Nah, kalo semisal kamu mau navbar kamu dibawah, kamu tinggal search kode ini
</body>
lalu pastekan kode <div style bla bla bla nya dibawah kode </body> tadi. sama aja kok caranya seperti yang aku jelasin tadi :3

PREVIEW dulu, baru SAVE

gimana? ribet yak banyak kodenya? sama. saya juga pusing kok :w;
kalo ada masalah atau yang lainnya, bisa tanya di comment box :3
Selamat mengerjakan! (?)

Regards, Kallen.

♫ Thanks for Reading, da. Ctrl + C = COPY! ♫

0 Spam(s) on "Cara Membuat Navigation Tab di Navbar"

Posting Komentar

Rules :
✱ Menggunakan bahasa yang baik, jelas dan benar
✱ Tidak spam
✱ Tidak menyinggung perasaan author maupun orang lain

Regards,
Kallen Beilschmidt ♫

 
H o m e S t u f f s K a l l e n T o m o d a c h i T h a n k s T o F o l l o w +
K a l l e n B e i l s c h m i d t Ⓒ 2 0 1 6