Membuat Menu Melayang | Tutorial Blog
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 Design/Rancangan > Edit HTML.
- Beri tanda centang pada Expand Template Widget.Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
- 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 sobat cari kode <body> dan masukan kode di bawah ini di bawah <body>. <div class="floating-menu">Ganti http://alamat-url/ dan Anchor Text,
<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> - Terakhir klik Save / Simpan Template.
