Baca Juga
 |
| Menu Melayang di Blogspot |
Bismillah... pada kesempatan ini saya akan tulis tentang cara membuat menu melayang di blogspot. menu melayang ini bukanlah menu yang bisa terbang seperti burung twitter yang sering sobat saksikan di blog tetangga, tapi menu melayang disini diartikan menu yang tetap pada posisinya jika blog di geser ke bawah dan ke atas.
Sekarang kita langsung saja ke cara membuat menu melayang, langkah pertama seperti biasa yaitu :
- Login Ke Blogger
- Terus Sobat Masuk ke Area Rancangan/Design Blog
- Setelah itu sobat masuk ke area Edit HTML
- Terus Centang Expand Widget
- Langkah Selanjutnya sobat cari tag </head>
- Setelah ketemu, sobat copy kode CSS di bawah ini dan paste di atas tag </head>
<style>Setelah Itu sobat cari tag <body> dan masukan kode di bawah ini di bawah tag <body>
div.menu-melayang {
position: fixed;
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
border: 1px solid #000;
width: 180px;
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.menu-melayang a, div.menu-melayang h3 {
display: block;
margin: 0 0.5em;
color:#FFF; }
div.menu-melayang a:hover {
color:#FF0000;
background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
background: -moz-linear-gradient(top, #aa1317, #ed1c24);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
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>
<div class="menu-melayang">
<h3>Menu Melayang</h3>
<a href="http://alamat-url/">Anchor Link</a>
<a href="http://alamat-url/">Anchor Link</a>
<a href="http://alamat-url/">Anchor Link</a>
<a href="http://alamat-url/">Anchor Link</a>
</div>
Sebelum template blog sobat di save ganti url (http://alamat-url/) dengan url milik sobat. Setelah itu tekan tombol save dan lihat hasilnya, Good Luck Happy Blogging
Post A Comment:
0 comments: