Simple Menu dengan Efek Blur

Tweet

Modifikasi ini memang merupakan sesuatu yang sangat sederhana, namun Saya rasa cukup efektif untuk menciptakan efek blur pada menu di bawah Navabar



Untuk menggunakan Navbar ini,pertama buka blogger => rancangan => edit HTML lalu masukan css dibawah ini diatas kode ]]></b:skin>

#nav {
float:left;
width:100%;
overflow:hidden;
background: -moz-linear-gradient(top, #25272C 0%, black 99%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25272C), color-stop(99%,black));
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25272C), color-stop(99%,black));}
#nav li{
float:left;
display:inline;
list-style:none;
line-height:13px;
margin-right:1px;
color:#ddd;}
#nav ul:hover, #nav li a {color: transparent;text-shadow: 0px 0px 3px white;}
#nav li a:hover, #nav li a.selected{
color:#fff;}
#nav li a {
float:left;
font-size:16px;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
text-decoration:none;
text-shadow: 0px 0px 1px white;
padding:15px 15px 25px 15px;
-webkit-transition: all 0.5s ease-in-out;}
#nav li a span{
font-size:11px;
letter-spacing:2px;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
text-shadow: 0px 0px 2px white;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;}
#nav li a:hover span, #nav li a.selected span{
color:#9E1C16;
text-shadow: 0px 0px 2px #9E1C16;}

Kemudian masukan kode html dibawah ini,di ADD gatget >> HTML/JavaScript

<div id='nav'>
<ul>
<li><a href='#'>TRIK Blog<br/><span>CSS3</span></a></li> 
<li><a href='#'>CHAT<br/><span>Pribadi gue</span></a></li> 
<li><a href='#'>ANIME TEMPLATE<br/><span>Blogger</span></a></li>
<li><a href='#'>LINK EXC<br/><span>Tukar Link</span></a></li>
<li><a href='#'>SOUNDTRACK<br/><span>Anime Music</span></a></li>
<li><a href='#'>GRUB<br/><span>Join</span></a></li>
<li><a href='#'>PAGE<br/><span>Join</span></a></li>
</ul>
</div>

merah ganti dengan Link kalian
hijau ganti dengan isi menua atau tulisan kalian

perhatikan tataletak HTML nya bisa lihat pada gambar di bawah