Home » , » Membuat menu melayang di Blogger

Membuat menu melayang di Blogger

    Menu melayang disini maksudnya menu yang tetap pada posisinya walaupun blog di geser keatas dan kebawah.Berikut cara Membuat Menu Melayang :
1. Login ke Blogger, Klik Template > Edit HTML.
2. 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=&#39;#000000&#39;, endColorstr=&#39;#999999&#39;);
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=&#39;#0088ff&#39;, endColorstr=&#39;#bbddff&#39;);
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>

3. Setelah itu cari kode <body> dan masukan kode di bawah ini di bawah <body>.

<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> 

4. Ganti http://alamat-url/ dan Anchor Text.

5. Terakhir klik Save / Simpan Template.


Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

0 komentar:

Posting Komentar

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. KerTosoNoFilm - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger