» » » Membuat Menu Melayang
,

Membuat Menu Melayang

Membuat Menu Melayang - Hallo guys,mimin mau share nih Tutorial Blog di Blogrenanda, Pada sharing Tutorial Blog kali ini yang berjudul Membuat Menu Melayang, saya telah menyediakan Tutorial Blog lengkap seperti Membuat Menu Melayang . mudah-mudahan isi postingan tutorial yang mimin tulis ini dapat anda pahami. okelah, ini dia tutorialnya.

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.


Demikianlah Artikel Membuat Menu Melayang

Sekian Tutorial dari Blogrenanda Membuat Menu Melayang, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingan dari BlogRenanda.

lihat juga


Membuat Menu Melayang


Anda sedang membaca artikel Membuat Menu Melayang dan artikel ini url permalinknya adalah https://blogrenanda.blogspot.com/2011/12/membuat-menu-melayang.html Semoga artikel ini bisa bermanfaat.
Share on Facebook
Share on Twitter
Share on Google+
Share on LinkedIn

Subscribe to receive free email updates:

0 Response to "Membuat Menu Melayang"

Post a Comment

Subscribe to: Post Comments (Atom)