Cara Membuat Floating Menu Vertikal

Satu lagi tips blog untuk sobat blogger yang ingin mempercantik tampilan menu blognya, kali ini menu yang akan saya share adalah cara membuat floating menu vertikal. Floating menu ini posisinya melayang disebelah sidebar blog sobat dan akan mengikuti naik turun mouse yang sobat gerakkan.

Bagaiman cara membuat floating menu vertikal ini ? ikuti langkah-langkah dibawah ini :

Copy kode script di bawah ini dan pastekan tepat di atas kode ]]></b:skin>

#floatMenu { position:absolute; top:170px; left:65%; margin-left:290px; width:70px;} #floatMenu ul {list-style-type: none;} #floatMenu ul li a { display:block; background:-moz-linear-gradient(-90deg, #222, #2b2b2b) repeat scroll 0 0 transparent; background:-webkit-gradient(linear, left top, left bottom, from(#222), to(#2b2b2b)); border:0px solid #99; border-left:3px solid #fff; text-decoration:none; color:#fff; padding:5px 5px 5px 25px; width:80px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -webkit-transition: all 0.6s ease-out; box-shadow: #333 0px 0px 10px; -moz-box-shadow: #333 0px 0px 10px; -webkit-box-shadow: #333 0px 0px 10px; } #floatMenu ul li a:hover { color:#AD3D29; background-color: #000; border-right:3px solid #999; width:100px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 5px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 0px; } #floatMenu ul.menu1 li a:hover {border-color:#bdbdbd;} #s { background:#AD3D29; color:#00ff00; width:230px; padding-left:15px; font-weight:bold; font-size:10px; padding:1px; border-bottom:1px solid #F0F0F0; border-right:1px solid #F0F0F0; border-top:1px solid #F0F0F0; border-left:0; font-family: Verdana; }

Kemudian cari lagi kode </head>. Copy kode script di bawah dan pastekan tepat di atas kode </head>

<script language='javascript' src='https://sites.google.com/site/tutorialseoblogger/file/jquery_mini.js'></script> <script language='javascript' src='https://sites.google.com/site/tutorialseoblogger/file/jquery.dimensions.js'></script> <script language='javascript'> var name = "#floatMenu"; var menuYloc = null; $(document).ready(function(){ menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px"))) $(window).scroll(function () { offset = menuYloc+$(document).scrollTop()+"px"; $(name).animate({top:offset},{duration:500,queue:false}); }); }); </script>

Setelah itu cari kode </body>.  Copy kode script di bawah dan pastekan tepat di atas kode </body>
 

<div id='floatMenu'> <ul class='menu1'> <li><a href='#' title='Link 1'> Link 1 </a></li> <li><a href='#' title='Link 2'> Link 2</a></li> <li><a href='#' title='Link 3'> Link 3 </a></li> <li><a href='#' title='Link 4'> Link 4</a></li> <li><a href='#' title='Link 5'>Link 5</a></li> <li><a href='#' onclick='MGJS.goTop();return false;'> Back to top </a></li> </ul> </div>

Kemudian save template dan lihat hasilnya.
Cukup sekian tips blog kali ini  Cara Membuat Floating Menu Vertikal . Semoga Bermanfaat

Tweet