Cara Membuat Floating Menu Di Blog

Cara Membuat Floating Menu Di Blog

Sebenarnya Cara Membuat Floating Menu Di Blog ini tidak terlalu sulit, namun terkadang floating menu ini tidak sesuai dengan template yang kita gunakan, karena struktur templatenya yang berbeda.

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

1. Klik Tata Letak.
2. Klik Tambah Gadget.
3. Pilih Gadget HTML/Javascript.
4. Kemudian (copy & paste Kode di bawah ini untuk memasukkan widget ini pada blog kamu).

<style media='screen' type='text/css'>
/*----- TOP -----*/
#top {background:#000000; color:transparent; font-size:11px; line-height:30px; border-bottom:1px solid #00ff00;
opacity:.85;
filter:alpha(opacity=85);
-moz-opacity:.85;
position: fixed;
align: center;
top:0;left:0;
width:100%;
}
#top li a:hover{ background-color:#333; color:#fff; }
/*----- TOP NAV -----*/
.topnav ul li{ margin:0;}
.topnav li { float:left; width:auto; }
.topnav li a { padding:6px 11px; font-size:11px; line-height:16px; border-right:1px solid #00ff00; text-decoration:none; }
/* search form */
#search { display:inline; float:right; height:14px; margin:3px 15px 0px 0px; }
#search input { float:left; background:#fff; width:160px; padding:2px 5px 3px 5px; font-family:Arial,serif; font-size:12px; font-style:italic; color:#999; line-height:12px; border:1px solid #ECEDE8; }
#search input:focus { background:#fff; border:1px solid #ddd; }
#search input.btn { background:none; border:none; margin:4px 0px 0px -23px; padding:0px; width:auto; }
</style>
<div id='top'>
<div id='search'>
<form action='/search' id='searchform' method='get'>
<input class='field' id='s' name='q' type='text' value=''/>
<input class='submit btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfxD4MvVdRc6R14sYjG2I5SpHYBwG6knuMODGLXITRN5FABFFSwkdOvMFO6TltqbeJ-cSDQdYUPHy8iab06DFFbBWSWNOovgUMzYqfSOlujiOWfxDJySxdyJPlMs52_Wx61PbxDr5nuME/s1600/iconsearchr.gif' type='image' value='Go'/>
</form>
</div><!--end #search -->
<div class='topnav'>  
<ul class='topnav' id='page-nav'>
<li><a href='/'>Home</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
</ul>              
</div>
<div class='clear'/>
</div>
<small><a href="http://enoparnoabiezz.blogspot.com/2013/05/cara-membuat-floating-menu-di-blog.html" target="_blank">Cara Membuat Floating Menu Di Blog</a></small>

Keterangan :

• #top {background:#000000; adalah warna background, silahkan kamu ganti dengan selera yang kamu mau.
• color:transparent; adalah warna icon bulat, silahkan kamu ganti dengan selera yang kamu mau.
• solid #00ff00; adalah warna garis pinggir, silahkan kamu ganti dengan selera yang kamu mau.
• Agar lebih mudah menemukan kode warna yang kamu nginkan : Klik Di Sini
• Silahkan kamu ganti # dengan URL halaman yang kamu mau. (contoh : URL label, URL postingan, atau URL yang mengarah ke situs lain).
• Silahkan kamu ganti ? dengan nama menu yang kamu mau.

5. Simpan Pengaturan.

Catatan :

• Letakkan widget ini di tempat yang sesuai = biasanya di atas gadget Atribusi.

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat :)