Saturday, December 20, 2014

Tutorial Navigation Bar like Mine


Hai. Back lagi sama postingan tutorial sejak embuh berapa bulan nggak ngepos tutor. Tutor dari Salsa, navigation bar. Yang dulu warna abu sekarang jadi biru muda gitu deh. Credit to Hafiz Zulkafly.


  1. Open Blogger
  2. Tata Letak
  3. Add Gadget  (letaknya di pas BAWAH HEADER, jangan di bagian sidebar lho ya :3)
  4. Habis Add Gadget >> HTML/JavaScript
  5. Paste code di bawah ini
 <style>
.nav a{
background:#DCF0FC;
display:inline-block;
width:105px;
font:10px trebuchet ms;
margin:5px;
border:1px dashed #6AC4E0;
text-align:center;
color:#FFB8B8;
text-decoration:none;
text-transform:uppercase;
letter-spacing:1px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.nav a:hover {
border-radius:10px;
box-shadow: inset 60px 8px 0px 0px #FFDBDC, inset -60px -8px 0px 0px #FFDBDC;
color:#fffeee;
}
</style>

<div class="nav">
<div style="text-align: center;">
<a href="URL LINK">TITLE</a><a href="URL LINK">TITLE</a><a href="URL LINK">TITLE</a><a href="URL LINK">TITLE</a><a href="URL LINK">TITLE</a><a href="URL LINK">TITLE</a>
</div>
</div>
Kalo udah, SAVE!
Ket :
biru : warna box/text (bisa diubah sesuai keinginan, cari kode di --> code html info)
rose : jenis border. (bisa diganti dengan dotted/solid)
ungu : kelengkungan box saat dihover. (liat punyaku kalo diklik jadi gimana, susah ngejelasin-_-)
fuchsia : url link (misal : kalo TITLE nya : home, berarti url-nya ya link blog kamu)

Kalo gak jelas tanya di kolom comment jangan di cbox okay.

No comments:

Post a Comment

Just write your thoughts.