Pada posting kali ini saya akan membagikan tutorial tentang cara
mempercantik blog anda dengan membuat menu melayang/floating. Menu
melayang ini maksudnya adalah menu yang ketika halamannya di scroll
tetap terlihat pada posisinya, tidak ikut tenggelam kebawah. Contohnya
adalah menu pada blog ini (lihat diatas). Saya akan membuatnya dengan 2
style, yaitu style gelap(Hitam transparan) dan style terang(Putih
transparan). Anda tinggal memilihnya sesuai tampilan blog anda. Caranya
adalah sebagai berikut.
Membuat Menu Melayang di Blogspot
1.
Login ke dashboard blog anda > pilih menu “Template”. 2. Lalu “edit
HTML”, maka akan muncul editor yang berisi kode blog anda. 3. Letakkan
kursor anda pada editor dan klik CTRL+F sehingga muncul kolom pencarian
pada editor tersebut. 4. Cari kode <body>, lalu letakkan kode
berikut dibawahnya :
<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>
<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 :
– 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>
– 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; }
Demo Style Gelap
Ini adalah konten blog anda, termasuk header, artikel, sidebar dan footer.
Demo Style Terang
Ini adalah konten blog anda, termasuk header, artikel, sidebar dan footer.
Gimana? tertarik? Semoga bermanfaat :), jangan lupa di share..
0 Comments