Blue Navigation Bar

Blue Navigation Bar - Pada kesempatan yang lalu saya membuat artikel tentang Attitude Navigation Bar , sebuah menu yang tampak besar bak orang yang kekenyangan saat buka puasa , tapi tetep cakep hehe . Nah kesempatan kali ini  untuk memberikan pilihan saat brada membutuhkan sebuah menu , saya akan membagikan sebuah menu yang hampir mirip dengannya namun ada sedikit perbedaan pada warna dan style nya , tapi saya fikir menu kali ini gak kalah keren dari menu sebelumnya. Oks sambil nungguin adzan maghrib brada lihat demonya dibawah ini .

Kelebihan Blue Navigation Bar 
  • Sangat akrab dengan browser Firefox , Opera , Google Chorme , bahkan dengan Internet Explorer sekalipun
  • Loading extra cepat 
Kustomisasi menu
  • Klik Tab " Tata Letak "
  • Klik " Tambah gadget "
  • Cari Tab " HTML/Javascript
  • Masukan kode dibawah ini 
<style type="text/css">
#menu9 ul {
list-style:none;
font-family: "Lucida Sans Unicode", sans-serif;
font-size: 40px;
letter-spacing: -3px;
line-height: 1.2em;
float:left;
clear:both;
margin:20px;
}
#menu9 ul li{
float:left;
}
#menu9 ul li a{
display:block;
text-decoration:none;
padding:5px 10px 5px 10px;
background-color:#00adef;
width:170px;
text-align:center;
}
#menu9 ul li a span{
display:block;
}
#menu9 ul li a span.title{
color:#fff;
border-bottom:2px solid #fff;
padding-bottom:5px;
}
#menu9 ul li a:hover{
}
#menu9 ul li a:hover span.title{
color:#074a64;
border-bottom:2px solid #0b6f95;
}
#menu9 ul li a span.text{
padding:0px 5px;
font-size: 14px;
font-weight: bold;
letter-spacing: normal;
line-height: 1.4em;
color:#fff;
background-color:#074a64;
visibility:hidden;
}
#menu9 ul li a:hover span.text{
line-height: 3.4em;
visibility:visible;
}
</style>
<h2>Menu 9</h2>
<div id="menu9">
<ul>
<li><a href="#">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="#">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="#">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="#">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>

  • # ganti dengan URL brada
  • Save dan lihat hasilnya
Selamat menjalankan ibadah puasa 


17 komentar

haduh.. euy, nunggu adzan maghrib masih lama..


sebelum hover tampilan simple banget, mirip tampilan defalut dari bawaan blogger pas di pencet kelihatan cakepnya :D .

keren nih navigation menunya mas.

Satu jam lagi kok miz..beduknya
Jangan di pencetin trus loh..ntar dol..repot..hehe :)

Kalo udah mahir coding...mudah aja ya kang..utak atik langsung jadi tutor keren deh..hehe :)

weeeyyyy... kereeeen.. mohon bimbingan buat newbie dari mastah nihh

ilmu baru nih, saya demen banget kalau yang bisa akrab sama chrome..simpen ah

wkwkwk .. apanya yg dol mas bud ???

kalau keren silahkan dicoba sob

mungkin cuma ini aja yg tau nya mas bud ...

haha apanya yang dipencetin hehehe

izin simpen dulu kang... baca heula nanti kalau sudah paham baru praktek...


Template blogna alus euy... naksir dahhh

yang rapih simpennya kang... nanti jatooh

cantik banget sob navigasi bar nya, tapi gak cocok sama template saya hehe, ^_^

ane coba nanti yah sob diblog saya hehe :)

sama-sama newbie jadi bingung neh hehe

Wih Keren Banget....

DO NOT COPY MY CODES AND ARTICLES FROM AVDHOOTBLOGGER.

REMOVE ALL OF MY ARTICLES OR I WILL COMPLAINT TO DMCA FOR DELETION OF YOUR BLOG.