Membuat Menu Melayang

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.
    Membuat Menu Melayang
  • Beri tanda centang pada Expand Template Widget.
    Membuat Menu Melayang
    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=&#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>
  • Setelah itu sobat 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> 
    Ganti http://alamat-url/ dan Anchor Text,
  • Terakhir klik Save / Simpan Template.
    Membuat Menu Melayang
Selamat mencoba dan semoga berhasil Membuat Menu Melayang.

0 komentar