Cara Memasang Menu Melayang Keren di Blog

Sebelumnya Saya Sudah Membuat Postingan Tentang Cara Memasang Menu Dropdown Keren di Blogger . Kalian Tahu Menu Navigasi sangat Bermanfaat Untuk Pengunjung Blog Karena Blog Kalian Akan Mempunyai Banyak Jumlah Klik atau Jumlah Page View yang Banyak karena itu saya Merekomendasikan Untuk Membuat Menu Navigasi Floating Keren di Blogger ini .
Sebenarnya Menu Floating Keren ini Adalah Menu Punya Mas Sugeng . Berikut Screen Shotnya

Menu Navigasi Melayang ini Bermanfaat untuk Mempermudah Pengunjung Blog Agar Tidak Repot untuk Ke Menu Atas lagi. Ayo Kita Langsung ke Langkah nya

Berikut Langkah Memasang Menu Melayang Keren di Blog : 

1. Seperti Biasa Anda Harus Login Terlebih dahulu ke Blog Kesanyangan Anda,

2. Masuk Ke Menu Template

3. Lalu Klik Edit HTML > Centang Expand Template Widget

4. Setelah itu cari kode seperti dibawah ya untuk memudahkan tekan ctrl+F

]]></b:skin>

5. Setelah Ketemu Lalu Copy dan Pastekan Kode berikut Tepat diatas ]]></b:skin>

 #top-nav{background:#333;box-shadow:0 1px 3px rgba(0,0,0,0.4);height:28px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #000}#top-nav ul{margin:0 auto;width:970px}#top-nav ul li{float:left}#top-nav ul li a{line-height:28px;padding:0 15px;color:#aaa;font-size:13px;text-shadow:0 -1px 0 #000;display:block;text-decoration:none}#top-nav ul li a:hover{color:#fff}nav{position:relative;font:bold 16px Calibri,Arial,Sans-Serif}nav *{margin:0;padding:0;list-style:none}nav ul{background:#0054bb;background:-webkit-linear-gradient(top,#0054BB,#175093);background:-moz-linear-gradient(top,#0054BB,#175093);background:-ms-linear-gradient(top,#0054BB,#175093);background:-o-linear-gradient(top,#0054BB,#175093);background:linear-gradient(top,#0054BB,#175093);height:40px;-webkit-box-shadow:inset 0 1px 0 rgba(0,0,0,0.4),inset 0 2px 0 rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:inset 0 1px 0 rgba(0,0,0,0.4),inset 0 2px 0 rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4);box-shadow:inset 0 1px 0 rgba(0,0,0,0.4),inset 0 2px 0 rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4)}nav li{float:left;display:inline}nav li a{padding:0 15px;line-height:40px;color:#111!important;text-shadow:0 1px 0 rgba(255,255,255,0.3);display:block;text-decoration:none;-webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,0.1),inset -1px 0 0 rgba(0,0,0,0.1);-moz-box-shadow:inset 1px 0 0 rgba(255,255,255,0.1),inset -1px 0 0 rgba(0,0,0,0.1);box-shadow:inset 1px 0 0 rgba(255,255,255,0.1),inset -1px 0 0 rgba(0,0,0,0.1)}nav li a:hover{background:rgba(0,0,0,0.1)!important}nav li a:active{background:#0054bb;background:-webkit-linear-gradient(bottom,#0054BB,#175093);background:-moz-linear-gradient(bottom,#0054BB,#175093);background:-ms-linear-gradient(bottom,#0054BB,#175093);background:-o-linear-gradient(bottom,#0054BB,#175093);background:linear-gradient(bottom,#0054BB,#175093)}nav li ul{display:block;width:170px;position:absolute;left:auto;z-index:10;visibility:hidden;opacity:0;height:auto;-webkit-transition:all .26s ease-out .2s;-moz-transition:all .26s ease-out .2s;-ms-transition:all .26s ease-out .2s;-o-transition:all .26s ease-out .2s;transition:all .26s ease-out .2s}nav li li{display:block;float:none;width:100%}nav li:hover>ul{visibility:visible;width:200px;opacity:1}nav li li ul{left:200px;margin-top:-40px}nav li.sub>a{position:relative;padding-right:30px}nav li.sub>a:after{content:"";width:0;height:0;border-width:4px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:20px;right:10px}nav li.sub li.sub>a:after{content:"";width:0;height:0;border-width:4px;border-style:solid;border-color:transparent transparent transparent #eee;position:absolute;top:16px;right:10px}

Note: Kode diatas Sudah Saya Compress

6. Setelah Selesai lalu Cari Lagi kode dibawah

<div id='header-wrapper'>

7. Setelah Ketemu Masukkan Kode dibawah dan Pastekan tepat diatas <div id='header-wrapper'>

<div id='top-nav'>
<ul>
<li><a href='/' title='Kembali ke Beranda'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
<li><a href='#'>Menu 6</a></li>
<li><a href='#'>Menu 7</a></li>
<li><a href='#'>Menu 8</a></li>
</ul>
</div>

8. Sekarang Tinggal Klik Save Template anda .