membuat floating menu vertikal

Beberapa hari yang lalu Tutorial For You pernah share tentang bagaimana membuat  menu vertikal dengan css, dan hari ini tutorial for you share  tentang cara bagaimana membuat floating menu vertikal, untuk melihat tampilannya silahkan klik tombol demo di bawah ini

LIHAT DEMONYA

Bagaimana apa kamu tertarik untuk mencobanya? Langsung saja kita ikuti tutorial berikut ini :

1.    Login ke Blogger

2.    Pilih tab Deisgn > Edit HTML

3.    Cari kode ]]></b:skin>

4.    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; }

5.    Kemudian cari lagi kode </head>

6.    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>

7.    Setelah itu cari kode </body>

8.    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>

9.    Kemudian simpan template sobat dan lihat hasilnya

Selesai sudah tutorial Cara Membuat Floating Menu Vertikal,
selamat mencoba, semoga berhasil dan bermanfaat.