Cara Membuat Menu Melayang di Atas Header

Sebelumnya sobat bisa melihat di blog saya ini ada menu bar di atas yang meskipun kita scrol ke bawah, menu tersebut tetap pada tempatnya. Ini yang disebut dengan Menu Melayang. Untuk membuat menu melayang di blog anda diperlukan dua kode terpisah, yang pertama adalah perintah dan yang kedua adalah eksekusinya.

Langkah-langkah memasang Menu Melayang di Blog Sobat
1. Log in ke blogger
2. Pilih Template >> Lalu klik Edit HTML
3. Cari dengan CTRl+F kode ]]></b:skin>
4. Copy kode pertama di bawah ini dan paste kan di atas kode ]]></b:skin>

Kode pertama :

/* Floating Menu */ #ki_floating_menu{background-color: #1484CE;background: #1484ce;background: -moz-linear-gradient(top, #1484ce 0%, #1274b5 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1484ce), color-stop(100%,#1274b5));background: -webkit-linear-gradient(top, #1484ce 0%,#1274b5 100%);background: -o-linear-gradient(top, #1484ce 0%,#1274b5 100%);background: -ms-linear-gradient(top, #1484ce 0%,#1274b5 100%);background: linear-gradient(to bottom, #1484ce 0%,#1274b5 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1484ce', endColorstr='#1274b5',GradientType=0 );border-bottom: 1px solid rgba(255, 255, 255, 0.1);box-shadow: 0 2px 0 #0E5A8C;box-shadow: 0px 2px 0px #0e5a8c;height:34px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #2a8fd2;} #ki_floating_menu ul{list-style: none;margin:0 auto;width:970px;} #ki_floating_menu ul li{float:left} #ki_floating_menu ul li a{line-height:34px;padding:0 15px;color:#f0e8e5;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #0f669f;display:block;text-decoration:none;border-right: 1px solid #1470ad;border-left:1px solid #2a88c6;} #ki_floating_menu ul li a:hover{background-color:rgba(255,255,255,0.125);color:white;}

5. Cari kode </head>
6. Copy kode kedua di bawah ini dan paste kan di bawah kode </head>

 Kode kedua :

<div id='ki_floating_menu'>

<ul>

  <li style='border-left:1px solid rgba(30, 30, 30, 0.125);'><a href='/'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjazZsdjmlqem0Uigy-lnSNgBxbJ7dHCFj3xh9urHGSH8AGK8G198x-4fz26v3XmnrKRV_iQWHkm2Nbxdjr52GU7gQtb4N0DFyyHon70__p4gF9ZPOq6Gf-cu4lgftBas3FYN709BzljX8/s1600/home.png' style='padding:0px;'/></a></li>

<li><a href'='#'>MENU1</a></li>

<li><a href='#'>MENU2</a></li>

<li><a href='#'>MENU3</a></li>

<li><a href='#'>MENU4</a></li>

<li><a href='#'>MENU5</a></li>

<li><a href='#'>MENU6</a></li>

</ul>

</div>

CATATAN: tanda # diganti dengan link URL blog anda dan tulisan MENU1 dst…. bisa diganti sesuka anda

7. Simpan dan lihat hasilnya.