Cara membuat menu melayang di blog.maksud dari menu melayang di sini adalah menu tetap mengikuti diatas layar computer atau smartphone dan jika kita menggeser halaman blog kebawah maka otomatis menu akan teap mengikuti diatas.sebagai mana yang sudah tertera pada blog-blog lain,semua orang tertarik untuk membuat serti itu, dan sini saya akan memberitahu code dan tutorialnya.
Sebelum kita mulai,pastikan anda mendownload template anda tau backup.supaya nantinya jika terjadi kesalhan kita masih bisa memberi atau upload ulang dan tidak terjadi Error HTMl hal ini dapat menyebabkan blog kita diabaikan oleh Search Google.
Cara membuat menu melayang di blog
Terimakasih.Wassalam
Sebelum kita mulai,pastikan anda mendownload template anda tau backup.supaya nantinya jika terjadi kesalhan kita masih bisa memberi atau upload ulang dan tidak terjadi Error HTMl hal ini dapat menyebabkan blog kita diabaikan oleh Search Google.
Cara membuat menu melayang di blog
- Login ke blogger.com
- Klik dasboard blog anda
- Lalu klik template
- Klik edit HTML
- Selanjutnya cari Code </head> dan letakkan/copas Code berikut di atasnya.
<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> - Lalu cari Code <body> dan letakkan Code berikut dibawahnya
<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> - Terakhir simpan dan lihat hasilnya
Terimakasih.Wassalam
