Catatan ady arwah: Membuat menu melayang

Menu melayang disini maksudnya menu yang tetap pada posisinya walaupun blog di geser keatas dan kebawah.
Berikut cara Membuat Menu Melayang :
Login ke Blogger, Klik Template > Edit HTML.

Selanjutnya cari kode </head>,dan letakan kode berikut diatasnya :

<style>
div.floating-menu {
position: fixed;
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#666));
background: -moz-linear-gradient(top, #000, #666);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#999999');
border: 1px solid #000;
width: 150px;
z-index: 500;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
border:none;
padding:10px 10px 10px 10px;
}
div.floating-menu a, div.floating-menu h4 {
display: block;
margin: 0 0.5em;
color:#FFF; }
div.floating-menu a:hover {
color:#0000FF;
background: -webkit-gradient(linear, left top, left bottom, from(#0088ff), to(#bbddff));
background: -moz-linear-gradient(top, #0088ff, #bbddff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088ff', endColorstr='#bbddff');
color:#FFF;
cursor: pointer;
text-decoration: none;
padding: 5px 5px 5px 5px;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
</style>

Setelah itu cari kode <body> dan masukan kode di bawah ini di bawah <body>.

<div class="floating-menu">
<h4>Menu</h4>
<a href="http://alamat-url/">Anchor Text</a>
<a href="http://alamat-url/">Anchor Text</a>
<a href="http://alamat-url/">Anchor Text</a>
<a href="http://alamat-url/">Anchor Text</a>
</div>

Ganti http://alamat-url/ dan Anchor Text,
Terakhir klik Save / Simpan Template.

Catatan ady arwah

Jumat, 29 Juni 2012

Membuat menu melayang

Tidak ada komentar:

Posting Komentar