Cara Membuat Menu Vertikal Floating Slide Out

Pada kesempatan kali Tutorial For You 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 

Live Demo

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/AVvXsEhjVqGU5mALdhPO9PB7Fd5UNFWbYpwEIEe_Hl1SOTCKm2mipoZ6qCiT7cRFSViVf0H-84XhuFhwrjhYSpF3uwu6HAGB_DLm5EISqn12U8VeLkQGYC8aUm8gHNa0dxpNQbnyzaBEirbxU-lq/s1600/sprite-icons.png);background-position: 25px -100px;}
ul#navigation .dashboard a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVqGU5mALdhPO9PB7Fd5UNFWbYpwEIEe_Hl1SOTCKm2mipoZ6qCiT7cRFSViVf0H-84XhuFhwrjhYSpF3uwu6HAGB_DLm5EISqn12U8VeLkQGYC8aUm8gHNa0dxpNQbnyzaBEirbxU-lq/s1600/sprite-icons.png);background-position: 25px -200px;}
ul#navigation .follow a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVqGU5mALdhPO9PB7Fd5UNFWbYpwEIEe_Hl1SOTCKm2mipoZ6qCiT7cRFSViVf0H-84XhuFhwrjhYSpF3uwu6HAGB_DLm5EISqn12U8VeLkQGYC8aUm8gHNa0dxpNQbnyzaBEirbxU-lq/s1600/sprite-icons.png);background-position: 25px -0px;}
ul#navigation .link a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVqGU5mALdhPO9PB7Fd5UNFWbYpwEIEe_Hl1SOTCKm2mipoZ6qCiT7cRFSViVf0H-84XhuFhwrjhYSpF3uwu6HAGB_DLm5EISqn12U8VeLkQGYC8aUm8gHNa0dxpNQbnyzaBEirbxU-lq/s1600/sprite-icons.png);background-position: 25px -50px;}
ul#navigation .folder a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVqGU5mALdhPO9PB7Fd5UNFWbYpwEIEe_Hl1SOTCKm2mipoZ6qCiT7cRFSViVf0H-84XhuFhwrjhYSpF3uwu6HAGB_DLm5EISqn12U8VeLkQGYC8aUm8gHNa0dxpNQbnyzaBEirbxU-lq/s1600/sprite-icons.png);background-position: 25px -150px;}
ul#navigation .guestbook a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVqGU5mALdhPO9PB7Fd5UNFWbYpwEIEe_Hl1SOTCKm2mipoZ6qCiT7cRFSViVf0H-84XhuFhwrjhYSpF3uwu6HAGB_DLm5EISqn12U8VeLkQGYC8aUm8gHNa0dxpNQbnyzaBEirbxU-lq/s1600/sprite-icons.png);background-position: 25px -300px;}
ul#navigation .rss a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVqGU5mALdhPO9PB7Fd5UNFWbYpwEIEe_Hl1SOTCKm2mipoZ6qCiT7cRFSViVf0H-84XhuFhwrjhYSpF3uwu6HAGB_DLm5EISqn12U8VeLkQGYC8aUm8gHNa0dxpNQbnyzaBEirbxU-lq/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://www.tutorial-4u.com/" title="Home"></a></li>  
            <li class="follow"><a href="http://www.blogger.com/follow-blog.g?blogID=6991180571082534270" title="Follow"></a></li>           
            <li class="link"><a href="http://www.tutorial-4u.com/2012/03/link-exchange.html" title="Links Exchange"></a></li>
            <li class="folder"><a href="http://www.tutorial-4u.com/p/daftar-isi.html" title="Sitemap"></a></li>
            <li class="guestbook"><a href="http://www.tutorial-4u.com/p/buku-tamu.html" title="Guest Book"></a></li>
            <li class="rss"><a href="http://feeds.feedburner.com/tutorial-4u/Coto" 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

Sumber 

Salam Blogger

Read more: Cara Membuat Menu Vertikal Floating Slide Out | Tutorial For You http://www.tutorial-4u.com/2013/01/menu-vertikal-floating-slide-out.html#ixzz2PxoMuxmC
Under Creative Commons License: Attribution Non-Commercial Share Alike
Follow us: @tutorialforyou2 on Twitter | tutorialforu on Facebook