Cara Membuat Menu Melayang Fixed yang keren

ok sobat TKJ, semalam saya membaca komentar yang di lontarkan oleh sobat TKJ, yang bertuliskan "cara bwat menu spt diatas itu gmna?? About us dll itu??" di postingan Cara Membuat Menu Drop Down yang Keren dengan Menu Search sebener nya janji saya semalam mau di posting, tapi berhubung semalam gak sempat, jadi saya posting sekarang hehehehe maaf ya gan kalau harus nunggu lama, bagi teman teman yang belum lihat penampakan menu nya, lihat gambar di bawah ini

nah tanpa basa basi,dan sebelum basi menu nya, kita langsung saja ke cara pembuatan menu ini, cara nya sangat mudah sekali ikuti langkah langkah di bawah ini :

Pertama Buka Blogger.com lalu Login
Setelah login anda buka bagian Edit HTML anda
nah yang ketiga kita mulai pengcodingan cari code ]]></b:skin> lalu copy code di bawah ini tepat di atas code ]]></b:skin>

/* Buka Menu fixed
----------------------------------------------- */
.menuNav{
    /* Affects the UL element */
    overflow: hidden;
    display: inline-block;
}
.menuNav li{
    /* Specifying a fallback color and we define CSS3 gradients for the major browsers: */
    background-color: #f0f0f0;
    background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
    background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    border-right: 1px solid rgba(9, 9, 9, 0.125);
    /* Adding a 1px inset highlight for a more polished efect: */
    box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    position:relative;
    float: left;
    list-style: none;
}
.menuNav li:after{
    /* This creates a pseudo element inslide each LI */
    content:'.';
    text-indent:-9999px;
    overflow:hidden;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1;
    opacity:0;
    /* Gradients! */
    background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
    background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    /* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */
    box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    /* This will create a smooth transition for the opacity property */
    -moz-transition:0.25s all;
    -webkit-transition:0.25s all;
    -o-transition:0.25s all;
    transition:0.25s all;
}
/* Treating the first LI and li:after elements separately */
.menuNav li:first-child{
    border-radius: 4px 0 0 4px;
}
.menuNav li:first-child:after,
.menuNav li.selected:first-child:after{
    box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    -moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    -webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    border-radius:4px 0 0 4px;
}
.menuNav li:last-child{
    border-radius: 0 4px 4px 0;
}
/* Treating the last LI and li:after elements separately */
.menuNav li:last-child:after,
.menuNav li.selected:last-child:after{
    box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    border-radius:0 4px 4px 0;
}
.menuNav li:hover:after,
.menuNav li.selected:after,
.menuNav li:target:after{
    /* This property triggers the CSS3 transition */
    opacity:1;
}
.menuNav:hover li.selected:after,
.menuNav:hover li:target:after{
    /* Hides the targeted li when we are hovering on the UL */
    opacity:0;
}
.menuNav li.selected:hover:after,
.menuNav li:target:hover:after{
    opacity:1 !important;
}
/* Styling the anchor elements */
.menuNav li a{
    color: #5d5d5d;
    display: inline-block;
    font: 20px/1 Lobster,Arial,sans-serif;
    padding: 12px 35px 14px;
    position: relative;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
    z-index:2;
    text-decoration:none !important;
    white-space:nowrap;
}

.bilah-menu-atas{
width:100%;
min-width:1024px;
position:fixed;
top:0;
left:0;
right:0;
height:27px;
font-size:13px;
z-index:99;
white-space:nowrap;
background-color:#369;
background-image:0 0 #369 100%;
box-shadow:0 2px 0 #0e5a8c;
border-bottom:1px solid rgba(255,255,255,0.1)}

.kolom-utama{
-moz-transition:all .2s linear 0;width:960px;
height:auto;
margin:0 auto}
.kolom-menu{
width:1024px;
height:auto;
float:left;
display:inline;
margin:0 0 0 -41px}
.kolom-menu ul{
height:auto;
margin-top:0}
.kolom-menu ul li{
float:left;
position:relative;
list-style:none outside none}
.kolom-menu ul li:first-child{border-left:1px solid rgba(30,30,30,0.125)}
.kolom-menu ul li a{
color:#fff;
font-weight:700;
text-shadow:-1px -1px rgba(0,0,0,0.2);
text-decoration:none;
display:inline-block;
position:relative;
border-right:1px solid rgba(30,30,30,0.125);
box-shadow:1px 0 0 rgba(255,255,255,0.1);
padding:5px 10px}

/* tutup Menu Fixed
----------------------------------------------- */
nah setelah code di atas di copy, sekarang cari code </head> setelah ketemu copy code di bawah ini tepat di bawah code </head>

<div class='bilah-menu-atas' id='bilahmenuatas'>
<div class='kolom-utama'>
<div class='kolom-menu'>

<ul class='menuNav'>
<li><a href='http://yudhacomunity.blogspot.com'><img alt='Home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiln2Vi9g07X9bfwH0MmsHazEd4Nqnj0D28EDYerWb2t8XoWjFCtOqZUNt0YWeLzyXssVngp9F83yBeH4B70wmtHKMH6jTsn452trDkpicwCGGdaekJRgb8ThWtUJ0kf7OkwjlJ_mqQqus/s800/Beranda.png' style='height:15px; width:20px' title='Home'/></a></li>
<li><a href='http://yudhacomunity.blogspot.com/p/about-us.html'>About Us</a></li>
<li><a href='http://yudhacomunity.blogspot.com/p/contact-us.html'>Contact Us</a></li>
<li><a href='http://yudhacomunity.blogspot.com/p/privacy-policy.html'>Privacy Policy</a></li>
<li><a href='http://yudhacomunity.blogspot.com/2011/12/cara-memasang-iklan-diblog-komunitas-anak-tkj.html'>Pasang Iklan</a></li>
<li><a href='http://yudhacomunity.blogspot.com/2012/07/daftar-sebagai-penulis-blog-ini_25.html' >Menjadi Penulis</a></li>

</ul>
</div>

</div>
</div>
ganti yang bercetak tebal dengan LINK dan nama Menu yang anda inginkan