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.
Tidak ada komentar:
Posting Komentar
Anda diperkenankan untuk meninggalkan komentar.
Semua komentar yang masuk tanpa melalui proses seleksi sehingga komentar tidak mewakili opini dari blog ini
Silahkan klik Poskan Komentar atau Form Komentar jika kotak komentar belum muncul