Cara Membuat menu ikut naik turun floating menu

Tutorial blogger tentang menu di blogger tepatnya menu floating atau menu yang ikut naik turun jika halaman di geser kebawah tampilan menu tetap kelihatan
Tampilan untuk Menu pada blogger sebenarnya sudah disediakan oleh penyedia jasa situs yaitu www.blogger.com .

blogger yang masih domain gratis seperti blogspot atau yang sudah premium dotcom keduanya sudah disediakan fitur untuk menampilkan menu dari blogger tersebut akan tetapi tampilan bawaan menu yang dari blogger jika halaman di scroll atau di gulir kebawah maka tampilan menu nya akan menghilang dan hal ini jika postinganya sangat panjang maka untuk mau berganti atau pindah menu yang lain harus dikembalikan lagi digulir keatas dan juga untuk pengunjung mau lihat-lihat daftar menu apa saja di blog yang sedang dikunjungi akan merasa kesulitan , oleh karena itu saya sebagai Admin Bloger wonogiri pada kesempatan ini akan berbagi cara yaitu Cara membuat floating menu 

seperti apasih Tampilan menu nya yang ikut bergulir kebawah jika di scroll , untuk lebih jelasnya lihat gambarnya di bawah ini

Gambar diatas sebagai contoh tampilan menunya dan jika ingin melihat Demonya silahkan lihat Demo menu ikut bergulir disini

Gambar dan demo sudah saya sertakan di atas dan jika diantara kalian ingin membuatnya floating menu silahkan simak panduanya dii bawah ini :

1. Buka blog anda klik desain untuk menuju dashboard blog

2. pilih Template lalu klik edit HTML 

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

4. lalu copy kode di bawah ini dan letahkan kedalam HTML di atas kode ]]></b:skin> 

/* 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:#FFFFFF;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. jika sudah meletahkan kode di atas sesuai panduan , sekarang cari lagi kode di dalam HTML kode ini </head>

6. lalu copy lagi kode di bawah ini dan letakan atau pastekan kedalam HTML di bawah kode </head>

<!-- Floating Menu-->

<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/AVvXsEgcJgZiqLbAtAphpqZnP3ZzGoZr_uLXfbUb0c090rXIiPKT-Xr068A-UpDHrXg8yE-0kTsSbrhT4qja0rbA1opm52J-yJkCcwIxsRCklzzSifa41XMiRaWTYbYbBPCwDycJcAB-m4PK9ZU/s1600/home.jpg' style='padding:0px;'/></a></li>

<li><a href='url anda'>Menu 1</a></li>

<li><a href='url anda'>menu 2</a></li>

<li><a href='url anda'>Menu 3</a></li>

<li ><a href='http://jatisronopule.blogspot.com/p/sitemap.html'>Download</a></li>

<li><a href='/'>Tutorial Blogger </a></li>

<li><a href='https://jatisronopule.blogspot.com/p/ingin-bikin-web.html'>Jasa murah bikin Blog </a></li>

</ul>

</div>

Keterangan kode :

- kode di atas yang warna merah adalah url Tujuan menu

- kode yang warna pink adalah nama menu nya

- kode di atas yang warna hijau sebagai contoh url dari menunya ( boleh di ganti tapi kalau ga di ganti juga tidak apa-apa )

7. jika sudah meletahkan ke dua kode di atas sesuai panduanya silahkan klik Pratinjau template dulu fungsinya untuk mengecek template nya eror atau tidak / meletahkan kodenya sudah benar atau belum

8. jika sudah benar /  tidak eror lalu simpan template nya

9. selesai..

untuk mengecek pembuatan menunya atau menu floating silahkan buka beranda blog 

demikian Tentang  Cara membuat Menu floating atau menu yang ikut jika di scrol kebawah ke atas , semoga berguna . Terimaksih