Cara membuat menu yang ikut naik turun

Membuat menu yang ikut naik turun jika halaman di gulir kebawah dan ke atas itu bahasa simpelnya dan ada orang yang bilang juga ini adalah sebagai menu floating .
apapun namanya jika kalian suadah paham dan suka silahkan simak cara pembuatanya , kalau kemaren saya sudah membuat artikel yang sama hal menu yang ikut naik turun jika di gulir namun perbedaan nya kalau postinagan yang kemaren menunya hanya ada di deretan sebelah kiri untuk melihat lebih jelas silahkan kunjungi Cara membuat menu yang bisa naik turun , dan kalau yang ingin saya bagikan disini menunya ada dua di kanan dan kiri untuk lebih jelasnya lihat gambar contoh dibawah ini

keterangan di atas sudah cukup jelas sekarang saatnya langkah pembuatanya :

1.buka blog lalu klik desain untuk menuju dashboard blog 

2.pilih template dan klik edit HTML 

3.lalu cari kode di dalam HTML kode ini  ]]></b:skin>

4.lalu selanjutnya copy kode di bawah ini dan letakan/pastekan di atas kode ]]></b:skin>

/*-- floting menu

------------------*/
.bilah-menu-atas {
width: 100%;
min-width: 960px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 30px;
font-size: 13px;
z-index: 99;
white-space: nowrap;
background-color: #66CCFF;
background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #66CCFF 100%);
box-shadow: 0px 0px 0px rgb(14, 90, 140);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.kolom-utama {
-moz-transition: all 0.2s linear 0s;
width: 960px;
height: auto;
margin: 1px auto;
}
.kolom-menu {
width: 521px;
height: auto;
margin: 0px 0px 0px -41px;
float: left;
display: inline;
}
.kolom-menu ul {
height: auto;
margin-top: 0px;
}
.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: #ffffff;
font-weight: bold;
text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
text-decoration: none;
display: inline-block;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
position: relative;
border-right: 1px solid rgba(30, 30, 30, 0.125);
box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
}
.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
background-color: rgba(255, 255, 255, 0.125);
}

5.selanjutnya cari lagi kode di HTML kode ini </head>
6.dan copy kode di bawah ini lalu pastekan / letakan di bawah kode </head>

<div class='bilah-menu-atas' id='bilahmenuatas'>
<div class='kolom-utama'>
<div class='kolom-menu'>
<ul>
<li><a href='/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgza41dANBkm1JbreIlzO2aMErNEKi_K94HwRxHslZwNYhJE_Q2FMMZs2l9tD_bS5oqR9NcC_hLi24aY8dkllSCpG6jqKOcvLta4nI5PmgPDGg5pQ5HxYh_dq9tUMFJSNSJ_gNugKqMixQ/s800/Beranda.png' width='20px'/></a></li>
<li><a href='url'>Menu Kiri 1</a></li>
<li><a href='url'>Menu Kiri 2</a></li>

<li><a href='url'>Menu Kiri 2</a></li>

<li><a href='url'>Menu Kiri 2</a></li>
</ul>
</div>
<div class='kolom-menu'>
<ul style='float: right'>
<li><a href='url'>Menu Kanan 1</a></li>
<li><a href='url'>Menu Kanan 2</a></li>

<li><a href='url'>Menu Kanan 2</a></li>
</ul>
</div>
</div>
</div>

Keterangan :
- tulisan berwarna merah ganti dengan url tujuan menunya
- tulisan berwarna pink ganti dengan nama menu yang di inginkanya

7. selanjutnya klik pratinjau dulu fungsinya untuk melihat eror atau tidaknya template nya
8. jika tidak eror lalu simpan template anda , tapi jik eror jangan di simpan periksa lagi cara menempatkan kodenya sudah benar atau belum , silahkan cek dan ulangi dari awal.

sampai disini panduan Blogger Tentang cara membuat menu yang ikut naik turun jika halaman di gulir dan jika ada kesulitan silahkan bertanya saja , terimakasih - semoga berguna