Menu Navigasi Melayang. Ok sobat kali ini saya akan membagikan lagi widget blog untuk anda. Widget ini merupakan widget navigasi melayang yang muncul disudut kanan blog. Menu ini juga dapat anda edit sesuai kebutuhan, mau dibuat seperti daftar menu, daftar kategori atau diisi dengan link yang kamu inginkan, intinya seperti menu-menu blog pada umumnya, hanya saja letaknya yang berbeda.

Menu Navigasi Melayang Disudut Blog
Fixed Menu Accordion

Cara memasang menu ini di Blogger.

Menu ini bisa kamu letakan di dalam html template, misalnya di atas </body> atau kamu tambahkan saja pada widget HTML template blog kamu. Berikut jika kamu ingin menambahkannya sebagai widget.

1. Buka blog kamu di blogger.com,
2. Pada menu, pilih "tata letak" > pilih "tambahkan gadget" > pilih HTML/Javascipt.
3. Masukan kode dibawah ini pada kotak yang tersedia.
<div class='fixed-nav-seocips'>
  <div id='cssmenu'>
<ul>
   <li><a href='http://www.seocips.com/'><span>Home</span></a></li>
   <li class='active has-sub'><a href='http://www.seocips.com/search/label/Widget%20Blog?&max-results=6'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
  </div>
<style>
.fixed-nav-seocips { background:#fff; margin:0; padding:0; text-align:center; position:fixed; bottom:2%; right:2%; z-index:9999; box-shadow:0 3px 4px #ddd; border:1px solid #ddd; }
.fixed-nav-seocips { padding:10px; color:#fff; }
.fixed-nav-seocips a:link,.fixed-nav-seocips a:visited { color:#ffcc00; }
.fixed-nav-seocips a:hover { color:#fff; }
#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a { margin:0; padding:0; border:0; list-style:none; line-height:1; display:block; position:relative; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
#cssmenu { width:200px; font-family:Helvetica,Arial,sans-serif; color:#ffffff; }
#cssmenu ul ul { display:none; }
.align-right { float:right; }
#cssmenu > ul > li > a { padding:15px 20px; border-left:1px solid #1682ba; border-right:1px solid #1682ba; border-top:1px solid #1682ba; cursor:pointer; z-index:2; font-size:14px; font-weight:bold; text-decoration:none; color:#ffffff; text-shadow:0 1px 1px rgba(0,0,0,0.35); background:#36aae7; background:-webkit-linear-gradient(#36aae7,#1fa0e4); background:-moz-linear-gradient(#36aae7,#1fa0e4); background:-o-linear-gradient(#36aae7,#1fa0e4); background:-ms-linear-gradient(#36aae7,#1fa0e4); background:linear-gradient(#36aae7,#1fa0e4); box-shadow:inset 0 1px 0 rgba(255,255,255,0.15); }
#cssmenu > ul > li > a:hover,#cssmenu > ul > li.active > a,#cssmenu > ul > li.open > a { color:#eeeeee; background:#1fa0e4; background:-webkit-linear-gradient(#1fa0e4,#1992d1); background:-moz-linear-gradient(#1fa0e4,#1992d1); background:-o-linear-gradient(#1fa0e4,#1992d1); background:-ms-linear-gradient(#1fa0e4,#1992d1); background:linear-gradient(#1fa0e4,#1992d1); }
#cssmenu > ul > li.open > a { box-shadow:inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.15); border-bottom:1px solid #1682ba; }
#cssmenu > ul > li:last-child > a,#cssmenu > ul > li.last > a { border-bottom:1px solid #1682ba; }
.holder { width:0; height:0; position:absolute; top:0; right:0; }
.holder::after,.holder::before { display:block; position:absolute; content:""; width:6px; height:6px; right:20px; z-index:10; -webkit-transform:rotate(-135deg); -moz-transform:rotate(-135deg); -ms-transform:rotate(-135deg); -o-transform:rotate(-135deg); transform:rotate(-135deg); }
.holder::after { top:17px; border-top:2px solid #ffffff; border-left:2px solid #ffffff; }
#cssmenu > ul > li > a:hover > span::after,#cssmenu > ul > li.active > a > span::after,#cssmenu > ul > li.open > a > span::after { border-color:#eeeeee; }
.holder::before { top:18px; border-top:2px solid; border-left:2px solid; border-top-color:inherit; border-left-color:inherit; }
#cssmenu ul ul li a { cursor:pointer; border-bottom:1px solid #32373e; border-left:1px solid #32373e; border-right:1px solid #32373e; padding:10px 20px; z-index:1; text-decoration:none; font-size:13px; color:#eeeeee; background:#49505a; box-shadow:inset 0 1px 0 rgba(255,255,255,0.1); }
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.open > a,#cssmenu ul ul li.active > a { background:#424852; color:#ffffff; }
#cssmenu ul ul li:first-child > a { box-shadow:none; }
#cssmenu ul ul ul li:first-child > a { box-shadow:inset 0 1px 0 rgba(255,255,255,0.1); }
#cssmenu ul ul ul li a { padding-left:30px; }
#cssmenu > ul > li > ul > li:last-child > a,#cssmenu > ul > li > ul > li.last > a { border-bottom:0; }
#cssmenu > ul > li > ul > li.open:last-child > a,#cssmenu > ul > li > ul > li.last.open > a { border-bottom:1px solid #32373e; }
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a { border-bottom:0; }
#cssmenu ul ul li.has-sub > a::after { display:block; position:absolute; content:""; width:5px; height:5px; right:20px; z-index:10; top:11.5px; border-top:2px solid #eeeeee; border-left:2px solid #eeeeee; -webkit-transform:rotate(-135deg); -moz-transform:rotate(-135deg); -ms-transform:rotate(-135deg); -o-transform:rotate(-135deg); transform:rotate(-135deg); }
#cssmenu ul ul li.active > a::after,#cssmenu ul ul li.open > a::after,#cssmenu ul ul li > a:hover::after { border-color:#ffffff; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
<script src='https://cdn.rawgit.com/Brando07/share/newbe/fixed-menu-accor.js' type='text/javascript'></script>
4. Ganti semua kode berwarna merah di atas dengan url/link yang kamu inginkan
5. Ganti tulisan berwarna biru diatas dengan judul/nama yang kamu inginkan.
6. Simpan, dan selesai.



Sebenarnya ini, adalah menu accordion yang saya tambahkan css postion fixed, agar letaknya tetap dan tidak berubah. Jika kamu ingin menambahkan efek animasi slide dengan css keyframe seperti pada demo, coba baca postingan; Css Keyframe.

Ok sobat, sekian, semoga bermanfaat.
3 Komentar untuk "Cara Membuat Menu Navigasi Melayang Disudut Blog"