Cara Membuat Menu Melayang Di Atas Header-Sudah lama gak update , sekarang saya akan memberikan tutorial cara membuat menu floating , ini merupakan cara kang ismet yang saya modif supaya valid HTML5
dan seo
Berikut cara membuat menu floating :
1. Cari kode ]]></b:skin>
2. Letakan kode di bawah ini di atas kode ]]></b:skin>
/* Floating Menu Minimalis*/
#ki_floating_menu_black{background-color: #333;box-shadow: 0px 1px 3px rgba(0,0,0,0.4);height:34px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #000;}
#ki_floating_menu_black ul{list-style: none;margin:0 auto;width:970px;}
#ki_floating_menu_black ul li{float:left}
#ki_floating_menu_black ul li a{line-height:34px;padding:0 15px;color:#cacaca;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #000;display:block;text-decoration:none;border-right: 1px solid #555;}
#ki_floating_menu_black ul li a:hover{background-color:#666;color:white;}
3. Cari kode <body>
4. Letakan kode di bawah ini di sesudah kode <body>
<!-- Floating Menu-->
<div id='ki_floating_menu_black'>
<ul>
<li style='border-left:1px solid #555'><a href='/'><img alt='Home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZEmS3OkCS70SdwSKcon9xnXzzhxIBchPo4TaOMM0udGCm4FiUrTWsrMLT8AKBNcIyxQ7ULk_s0JuV0uCQPDQOW7JkkYOwcCcdWf_7fm4-yeHzA-pKMMhCAzf5TChiKRttflOXG8GTRZI/s1600/home2.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>
5. Simpan template dan lihat hasilnya
Tidak ada komentar:
Posting Komentar