DEMONYA SEPERTI GAMBAR DI ATAS
Berikut Cara Membuat Menu Melayang Atau Biasa Di Sebut Menu Floating
1. Masuk Ke Akun Blogger
2. Pilih Template
3. Kemudian Cari Kata EDIT TEMPLATE , Kemudian Klik
5. Cari Kode <body>
6. Letakan kode Di Bawah ini sesudah ( dibawah ) kode <body>
<!-- Floating Menu-->
<div id='yadi_floating_menu_blue'>
<ul>
<li style='border-left:1px solid #555'><a href='/'><img alt='Home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgci0DbSvQ7zeoRth2zt17lDl_TCwigwjyUt8wKFFpceW0lxgV7kQhyccv-7yM7MrqXkggmcl3C51PJ0rNP_mLADgnJ84zzPIXseUIVOz0QdLkUzeI-A2PfYwNU0sZar38eo-k9iYj01pI/s1600/home2.png' style='padding:0px;' title='Beranda'/></a></li>
<li><a href='#' title='Menu1'>Menu 1</a></li>
<li><a href='#' title='Menu1'>Menu 2</a></li>
<li><a href='#' title='Menu1'>Menu 3</a></li>
<li><a href='#' title='Menu1'>Menu 4</a></li>
<li><a href='#' title='Menu1'>Menu 5</a></li>
</ul>
</div>
Keterangan :
Ganti kode # dengan link tujuan anda
Ganti kode Menu 1 dan seterusnya dengan menu yang anda inginkan
7. Langkah berikutnya yaitu cari kode ]]></b:skin>
8. Letakan kode di Bawah ini Diatas kode ]]></b:skin>
/* Floating Menu ahmadsuyadi.blogspot.com*/
#yadi_floating_menu_blue{background-color: #1484CE;box-shadow: 0px 1px 3px rgba(0,0,0,0.4);height:34px;width:100%;min-width:1000px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #000;}
#yadi_floating_menu_blue ul{list-style: none;margin:0 auto;width:1000px;}
#yadi_floating_menu_blue ul li{float:left}
#yadi_floating_menu_blue ul li a{line-height:34px;padding:0 15px;color:#cacaca;font-size:15px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #000;display:block;text-decoration:none;border-right: 1px solid #555;}
#yadi_floating_menu_blue ul li a:hover{background-color:#666;color:white;}
keterangan :
Untuk Menyesesuaikan lebar agar sesuai dengan template anda ganti angka 970
Untuk mengganti warnanya , ganti kode #1484CE; dengan warna selera anda
9. Simpan template dan lihat perubahan yang terjadi