<div class=”float-menu-wrap”>
<ul class=”float-menu”>
<li><a href=”#url-menu-anda“>Beranda</a></li>
<li><a href=”#url-menu-anda“>Tentang Saya</a></li>
<li><a href=”#url-menu-anda“>Kontak Saya</a></li>
</ul>
</div>
Keterangan Kode :<ul class=”float-menu”>
<li><a href=”#url-menu-anda“>Beranda</a></li>
<li><a href=”#url-menu-anda“>Tentang Saya</a></li>
<li><a href=”#url-menu-anda“>Kontak Saya</a></li>
</ul>
</div>
– Kode warna merah harus anda ganti dengan url menu anda, URL harus diawali dengan http://, contoh url : http://www.syakirurohman.net
– Kode warna hijau disebut anchor text, Gantilah sesuai dengan nama halaman yang di tuju oleh URL.
– Anda juga bisa menambahkan menu lain dengan menambah baris baru, misal : <li><a href=”#url”>menu baru</a></li>, tepat datas kode </ul>
5. Setelah memasukkan kode tersebut, cari lagi kode */]]></b:skin>, lalu masukkan kode CSS dibawah ini tepat diatas kode */]]></b:skin>
Kode untuk Style gelap
.float-menu-wrap { padding: 0; width: 100%; position: fixed; top: 0; left: 0; right: 0; background: rgba(10,10,10,0.5); z-index: 9999; } ul.float-menu { display: block; position: relative; margin: 0; padding: 0; margin-left: 50px; margin-right: 50px; } .float-menu li { list-style: none; display: inline-block; margin: 0; position: relative; padding: 9px 0; font-size: 16px; } .float-menu li a { color: #ddd; padding: 15px; font-family: georgia; font-weight: 500; } .float-menu li a:hover { background: rgba(10,10,10,0.5); color: #fff; }
Kode untuk Style terang
.float-menu-wrap { padding: 0; width: 100%; position: fixed; top: 0; left: 0; right: 0; background: rgba(240,240,240,0.5); z-index: 9999;box-shadow:#ddd 1px 0 3px 0; } ul.float-menu { display: block; position: relative; margin: 0; padding: 0; margin-left: 50px; margin-right: 50px; } .float-menu li { list-style: none; display: inline-block; margin: 0; position: relative; padding: 9px 0; font-size: 16px; } .float-menu li a { color: #777; padding: 15px; font-family: georgia; font-weight: 500; } .float-menu li a:hover { background: rgba(240,240,240,0.5); color: #333; }
Tidak ada komentar:
Posting Komentar