Black & Blue Navigation Bar - Menu bar pada sebuah blog sangatlah penting selain untuk memudahkan para pengunjung dalam menjelajahi isi dari blog kita , kehadiran menu bar juga sebagai penghias sebuah blog agar menarik . Kali ini [OBC] akan share Black & Blue Navigation Bar , sebuah menu yang sangat simple tapi tetap keren untuk dipasang pada sebuah blog. Dominasi warna hitam pada backround dan biru pada titlenya menjadikan menu yang satu ini cukup menarik buat brada pasang. Untuk lebih jelasnya silahkan brada lihat screenshot dan demonya.
Kustomisasi
Save dan lihat hasilnya , mudah-mudahan brada suka hehe ..!!!
Good Luck ...
- Masuk pada Tataletak
- Add Gadget / HTML Javascript
- Masukan kode dibawah ini
- Save dan lihat hasilnya
<style type="text/css">
#menu6 ul {
list-style:none;
font-family: "Trebuchet MS", sans-serif;
font-size: 28px;
font-weight: bold;
letter-spacing: -1px;
line-height: 1.1em;
float:left;
clear:both;
margin:20px;
border:4px groove #333333;
}#menu6 ul li{
float:left;
}#menu6 ul li a{
display:block;
text-decoration:none;
padding:10px 10px 5px 10px;
color:#fff;
background-color:#333333;
width:170px;
}#menu6 ul li a span{
display:block;
}#menu6 ul li a span.title{
border-bottom:2px solid #ffffff;
}#menu6 ul li a:hover{
background-color:#fff;
}#menu6 ul li a:hover span.title{
color:#008fe3;
border-bottom:2px solid #008fe3;
}#menu6 ul li a span.text{
padding:0px 5px;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.4em;
background-color:#008fe3;
visibility:hidden;
color:#fff;}
#menu6 ul li a:hover span.text{
visibility:visible;}
</style>
<div id="menu6">
<ul>
<li><a href="http://duniaradioku.blogspot.com/">
<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>
Kalau brada ingin memasang menu dibawah header atau diatas header
- Masuk pada Edit HTML
- Cari kode ]]></b:skin>
- Masukan kode dibawah ini tepat diatas kode ]]></b:skin>
<style type="text/css">
#menu6 ul {
list-style:none;
font-family: "Trebuchet MS", sans-serif;
font-size: 28px;
font-weight: bold;
letter-spacing: -1px;
line-height: 1.1em;
float:left;
clear:both;
margin:20px;
border:4px groove #333333;
}#menu6 ul li{
float:left;
}#menu6 ul li a{
display:block;
text-decoration:none;
padding:10px 10px 5px 10px;
color:#fff;
background-color:#333333;
width:170px;
}#menu6 ul li a span{
display:block;
}#menu6 ul li a span.title{
border-bottom:2px solid #ffffff;
}#menu6 ul li a:hover{
background-color:#fff;
}#menu6 ul li a:hover span.title{
color:#008fe3;
border-bottom:2px solid #008fe3;
}#menu6 ul li a span.text{
padding:0px 5px;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.4em;
background-color:#008fe3;
visibility:hidden;
color:#fff;}
#menu6 ul li a:hover span.text{
visibility:visible;}
</style>
Masih dalam Edit HTML , sekarang brada cari kode !!
- <header> untuk memasang menu diatas nama blog
- </header> untuk memasang menu dibawah nama blog
Pastekan kode dibawah ini diatas kode <header> atau </header>
<div id="menu6">
<ul>
<li><a href="http://duniaradioku.blogspot.com/">
<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>
Save dan lihat hasilnya , mudah-mudahan brada suka hehe ..!!!
Good Luck ...
Pertamax mas...sukses selalu blognya
BalasHapusterimakasih sob mampirnya .......
Hapushmm mantap tingkatan aja coba coba nya
BalasHapuslumayan sob
Hapusjadi keliat simple namun nyentrik ya kang :)
BalasHapusemang simple mas bud ... simple-lendung hehe
HapusGlek.. :D
HapusGlek ,,,
Hapussave dulu mas,,,,
BalasHapusSilahkan mba
HapusSalam kenal masbro.
BalasHapusBlognya keren. (y)
Mampir ya http://lintasgaul.blogspot.com
salam kenal kembali sob ..
Hapussiap meluncur
pengen pasang tapi utak atik daleman belog takut error lagi kang
BalasHapuspasti udah keringet dingin nih :)
Hapuskayaknya mamang lebih pinter utak-atik daleman .....a
Hapusjadi keluar keringet mas hihi
mantap surantap kang rul, ting dulu dong angkat gelasnya :D
BalasHapusyoi sob ting-ting hehe
HapusKalo tong tong bukan angkat gelas mesti :)
Hapuslantas apa mas ???
Hapusahaha XD
Hapuscakep k rul.. :D .. pengen template yang headernya kayak punya ini gimana ya caranya #Lupa
BalasHapusoh iya .. mohon maap lahir dan batin ya, selamat lebaran #telat .
lumayan miz .. owh http://duniaradioku.blogspot.com/2013/06/sticky-all-widget.html caranya ini miz .. mohon maaf lahir batin juga
Hapustutorialnya Kang Ruly pasti keren2 heehhee..... :)
BalasHapusAngkat Gelasnya kang, kopinya dah siap.... :)
keren gan ini tampilan blognya..
BalasHapusTutorialnya juga navigasi ane coba terapin deh :D
jadi pengen ikutan masang
BalasHapusbiar tambah yang bertandang
demo nya bener2 keren dah, mantab. ^_^
BalasHapus