Metal-Goth [nadakeras] Admin
Post : 90 IDR : 518032 Bank : 19999 Age : 35 Lokasi : Depok Job/hobbies : Mahasiswa
| Subyek: Membuat Menu Melayang 09.09.12 0:43 | |
| 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 : - Spoiler:
- Code:
-
<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> Tips : Biasakan mendownload template untuk membackup template sebelum di edit. Selanjutnya cari kode </head>,dan letakan kode berikut diatasnya : - Spoiler:
- Code:
-
<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>. - Spoiler:
- Code:
-
<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. Selamat mencoba dan semoga berhasil Membuat Menu Melayang. KHUSUS PENGGUNA BLOGGER |
|