Cara Membuat Fix Navigasi Menu

By Unknown

Friday, September 14, 2012

Slide Out Fixed Navigasi Menus adalah menu yang tersusun pada sisi blog dengan posisi tetap atau fix. Untuk memasangnya pada blogspot sangat mudah sekali. Copy script berikut dan letakkan pada HTML/JAVASCRIPT GADGET.

Kode yang dibutuhkan adalah:

<!--start navigation fixed menu-->
<style type="text/css">
ul#navigation{position:fixed;margin:0px;padding:0px;top:100px;left:0px;list-style:none;z-index:9999;}
ul#navigation li{width:100px;padding:0;margin:0;}
ul#navigation li a{display:block;margin-left:-2px;width:100px;height:50px;background-color:rgba(0,0,0,.5);background-repeat:no-repeat;background-position:center;border:1px solid #afafaf;-moz-border-radius:0 10px 10px 0px;-webkit-border-bottom-right-radius:10px;-webkit-border-top-right-radius:10px;-khtml-border-bottom-right-radius:10px;-khtml-border-top-right-radius:10px;-moz-box-shadow:0 4px 3px #000;-webkit-box-shadow:0 4px 3px #000;opacity:0.6;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);}
ul#navigation .home a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Qk_WYkcI7MPy28uUojnf5UhnXM4bFnTBkpGhVAdvab1ZVOrIA2Vm85pNtDgq0TbvaazT0fpAqN-bmD3zPD83xwUx-djeTV02-vmqN-sFvyJY9nNvsV_zC_EzePkcNXlkZu694vDe83UE/s1600/sprite-icons.png);background-position: 25px -100px;}
ul#navigation .dashboard a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Qk_WYkcI7MPy28uUojnf5UhnXM4bFnTBkpGhVAdvab1ZVOrIA2Vm85pNtDgq0TbvaazT0fpAqN-bmD3zPD83xwUx-djeTV02-vmqN-sFvyJY9nNvsV_zC_EzePkcNXlkZu694vDe83UE/s1600/sprite-icons.png);background-position: 25px -200px;}
ul#navigation .follow a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Qk_WYkcI7MPy28uUojnf5UhnXM4bFnTBkpGhVAdvab1ZVOrIA2Vm85pNtDgq0TbvaazT0fpAqN-bmD3zPD83xwUx-djeTV02-vmqN-sFvyJY9nNvsV_zC_EzePkcNXlkZu694vDe83UE/s1600/sprite-icons.png);background-position: 25px -0px;}
ul#navigation .link a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Qk_WYkcI7MPy28uUojnf5UhnXM4bFnTBkpGhVAdvab1ZVOrIA2Vm85pNtDgq0TbvaazT0fpAqN-bmD3zPD83xwUx-djeTV02-vmqN-sFvyJY9nNvsV_zC_EzePkcNXlkZu694vDe83UE/s1600/sprite-icons.png);background-position: 25px -50px;}
ul#navigation .folder a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Qk_WYkcI7MPy28uUojnf5UhnXM4bFnTBkpGhVAdvab1ZVOrIA2Vm85pNtDgq0TbvaazT0fpAqN-bmD3zPD83xwUx-djeTV02-vmqN-sFvyJY9nNvsV_zC_EzePkcNXlkZu694vDe83UE/s1600/sprite-icons.png);background-position: 25px -150px;}
ul#navigation .category a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Qk_WYkcI7MPy28uUojnf5UhnXM4bFnTBkpGhVAdvab1ZVOrIA2Vm85pNtDgq0TbvaazT0fpAqN-bmD3zPD83xwUx-djeTV02-vmqN-sFvyJY9nNvsV_zC_EzePkcNXlkZu694vDe83UE/s1600/sprite-icons.png);background-position: 25px -300px;}
ul#navigation .rss a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Qk_WYkcI7MPy28uUojnf5UhnXM4bFnTBkpGhVAdvab1ZVOrIA2Vm85pNtDgq0TbvaazT0fpAqN-bmD3zPD83xwUx-djeTV02-vmqN-sFvyJY9nNvsV_zC_EzePkcNXlkZu694vDe83UE/s1600/sprite-icons.png);background-position: 25px -250px;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>
        <ul id="navigation">
            <li class="home"><a href="http://alamat-blog-anda.blogspot.com" title="Home"></a></li>   
            <li class="follow"><a href="http://www.blogger.com/follow-blog.g?blogID=9185008735754037625" title="Follow"></a></li>            
            <li class="link"><a href="http://alamat-blog-anda.blogspot.com/p/links" title="Links"></a></li>
            <li class="folder"><a href="http://alamat-blog-anda.blogspot.com/p/sitemap.html" title="Sitemap"></a></li>
            <li class="category"><a href="http://alamat-blog-anda.blogspot.com/#" title="Archives"></a></li>
            <li class="rss"><a href="http://alamat-blog-anda.blogspot.com/feeds/posts/default" title="RSS Feeds"></a></li>
   <li class="dashboard"><a href="http://blogger.com/home" title="Dashboard"></a></li>
        </ul>
<!--end navigation fixed menu-->
<!--start jquery navigation fixed menu-->
<script type="text/javascript">
$(function(){$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);$('#navigation > li').hover(function(){$('a',$(this)).stop().animate({'marginLeft':'-2px'},200)},function(){$('a',$(this)).stop().animate({'marginLeft':'-85px'},200)})});
</script>
<!--end jquery navigation fixed menu-->

Share :

Facebook Twitter Google+