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~!

![]() |
click gambar untuk memperjelas |
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.
0 Comment(s) on "Cara Membuat Navigation Tab di Navbar"
Post a Comment
Jangan lupa mampir ke adelescence.com via PC / website yaah!
Tolong comment sesuai tema postingannya ya! ;3
Terima kasih :3