Cara Menciptakan Hidangan Floating Fixed

Cara Membuat Menu Floating Fixed - Floating Menu (Menu Melayang) atau sering juga disebut dengan "Fixed Menu" yang pada dasarnya ialah sajian yang selalu berada di atas, walaupun blog di scroll hingga bawah.

Cara menciptakan floating sajian / fixed sajian ini sudah direquest oleh beberapa sahabat, namun gres ketika ini aku buat tutorialnya. Untuk lebih jelasnya,sahabat sanggup lihat sajian paling atas di blog ini, atau lihat screenshoot dibawah ini :

Cara menciptakan :

1. Masukkan instruksi ini di atas ]]></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:#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;}

2. Ganti 970px dengan ukuran blog sobat. Untuk mendeklarasikannya, simpan instruksi ini di bawah </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/AVvXsEjlFT-bjNqMbttvdFdYyWJuU3IiKSWTsPUDb4yGGl0fXduxGdncOvVIHldruBzYPspJeWLPDa9bLTS3iOKSTVlxBBAzvvqw16Mh69Us8VU9mJ2fzlfE4s8dZkb7ke34fvbEFaNPVt0_QkE/s1600/home.png' style='padding:0px;'/></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> </ul> </div>