Cara Membuat Menu Vertikal Floating Slide Out

Pada kesempatan kali  mau share tentang Cara Membuat Menu Vertikal  

 
Floating Slide Out, dan pada artikel yang lalu tutorial for you pernah share Cara Membuat Floating Menu Vertikal, Cara Membuat Menu Navigation Slide Out Dengan JQuery dan masih banyak lagi menu horizontal dan vertikal lainnya yang pernah tutorial for you share untuk teman-teman blogger.
Menu Vertikal Floating Slide Out sangat simple dan menarik untuk melihat menu ini silahkan klik tombol demo di bawah ini
Bagaimana apakan sobat tertarik untuk membuat Menu Vertikal Floating Slide Out  ini?
Kalau tertarik mari kita ikuti tutorial berikut ini :
1.    Seperti biasa login ke Blogger
2.    Pilih template> Edit HTML > Proses
3.    Cari kode ]]></b:skin>
4.    Copy kode script di bawah ini dan pastekan tepat di bawah kode    ]]></b:skin>

<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/AVvXsEgaUqUB7pifjeAhZog-3bZc7bc507a8YonYBJNdp0eTCm0ERSnxAg6QScc3wlP7CMaEIt2PbqA7CUvEiEkV9AWGfdicpPF7vBuL4Rm6VxgmU2Qxv39mBUVr3n5g6X87GVbQZONZa2dS_ygI/s1600/sprite-icons.png);background-position: 25px -100px;}
ul#navigation .dashboard a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaUqUB7pifjeAhZog-3bZc7bc507a8YonYBJNdp0eTCm0ERSnxAg6QScc3wlP7CMaEIt2PbqA7CUvEiEkV9AWGfdicpPF7vBuL4Rm6VxgmU2Qxv39mBUVr3n5g6X87GVbQZONZa2dS_ygI/s1600/sprite-icons.png);background-position: 25px -200px;}
ul#navigation .follow a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaUqUB7pifjeAhZog-3bZc7bc507a8YonYBJNdp0eTCm0ERSnxAg6QScc3wlP7CMaEIt2PbqA7CUvEiEkV9AWGfdicpPF7vBuL4Rm6VxgmU2Qxv39mBUVr3n5g6X87GVbQZONZa2dS_ygI/s1600/sprite-icons.png);background-position: 25px -0px;}
ul#navigation .link a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaUqUB7pifjeAhZog-3bZc7bc507a8YonYBJNdp0eTCm0ERSnxAg6QScc3wlP7CMaEIt2PbqA7CUvEiEkV9AWGfdicpPF7vBuL4Rm6VxgmU2Qxv39mBUVr3n5g6X87GVbQZONZa2dS_ygI/s1600/sprite-icons.png);background-position: 25px -50px;}
ul#navigation .folder a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaUqUB7pifjeAhZog-3bZc7bc507a8YonYBJNdp0eTCm0ERSnxAg6QScc3wlP7CMaEIt2PbqA7CUvEiEkV9AWGfdicpPF7vBuL4Rm6VxgmU2Qxv39mBUVr3n5g6X87GVbQZONZa2dS_ygI/s1600/sprite-icons.png);background-position: 25px -150px;}
ul#navigation .guestbook a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaUqUB7pifjeAhZog-3bZc7bc507a8YonYBJNdp0eTCm0ERSnxAg6QScc3wlP7CMaEIt2PbqA7CUvEiEkV9AWGfdicpPF7vBuL4Rm6VxgmU2Qxv39mBUVr3n5g6X87GVbQZONZa2dS_ygI/s1600/sprite-icons.png);background-position: 25px -300px;}
ul#navigation .rss a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaUqUB7pifjeAhZog-3bZc7bc507a8YonYBJNdp0eTCm0ERSnxAg6QScc3wlP7CMaEIt2PbqA7CUvEiEkV9AWGfdicpPF7vBuL4Rm6VxgmU2Qxv39mBUVr3n5g6X87GVbQZONZa2dS_ygI/s1600/sprite-icons.png);background-position: 25px -250px;}
</style>

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

<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script> <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>

7.    Setelah selesai simpan template kamu
8.    Pilih Layout >add a Gadget > HTML/Javascript
9.    Copy kode script di bawah ini dan pastekan ke dalam gadget

        <ul id="navigation">
            <li class="home"><a href="http://ikingasaaf.blogspot.com/" title="Home"></a></li>  
            <li class="follow"><a href="http://ikingasaaf.blogspot.com/" title="Follow"></a></li>           
            <li class="link"><a href="http://ikingasaaf.blogspot.com/"></a></li>
            <li class="folder"><a href="http://ikingasaaf.blogspot.com/2013/02/blog-post.html" title="Sitemap"></a></li>
            <li class="guestbook"><a href="http://ikingasaaf.blogspot.com/2013/02/blog-post.html" title="Guest Book"></a></li>
            <li class="rss"><a href="http://ikingasaaf.blogspot.com/2013/02/blog-post.html" title="RSS Feeds"></a></li>
   <li class="dashboard"><a href="http://blogger.com/home" title="Dashboard"></a></li>
        </ul>

10.    Setelah selesai simpan gadget kamu dan lihat hasilnya
Selesai sudah tutorial Cara Membuat Menu Vertikal Floating Slide Out,
selamat mencoba, semoga berhasil dan bermanfaat

Sekian Dan Terimah Kasih