Pada kesempatan kali ini saya akan share Cara
Membuat Menu Vertikal Floating Slide Out, Menu ini sangant cocok untuk blog anda yang ingin kelihatan minimalis. oke langasung saja ikuti langkah demi langkah berikut.
Caranya 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/AVvXsEhCwq2CCbTEUzUZ6PS1zdWaIMAy7liRUJ6HnJs4gsO1QKMolCEj3Dj52GeWuuwb6RVAVBTylOarGTfAtUorvgWth9h8LA9ohwpnHjYq-EOhnuXltTQidMa3dZX4AznW3Hac8IK1xyiizGuR/s1600/sprite-icons.png);background-position:
25px -100px;}
ul#navigation .dashboard
a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCwq2CCbTEUzUZ6PS1zdWaIMAy7liRUJ6HnJs4gsO1QKMolCEj3Dj52GeWuuwb6RVAVBTylOarGTfAtUorvgWth9h8LA9ohwpnHjYq-EOhnuXltTQidMa3dZX4AznW3Hac8IK1xyiizGuR/s1600/sprite-icons.png);background-position:
25px -200px;}
ul#navigation .follow
a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCwq2CCbTEUzUZ6PS1zdWaIMAy7liRUJ6HnJs4gsO1QKMolCEj3Dj52GeWuuwb6RVAVBTylOarGTfAtUorvgWth9h8LA9ohwpnHjYq-EOhnuXltTQidMa3dZX4AznW3Hac8IK1xyiizGuR/s1600/sprite-icons.png);background-position:
25px -0px;}
ul#navigation .link a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCwq2CCbTEUzUZ6PS1zdWaIMAy7liRUJ6HnJs4gsO1QKMolCEj3Dj52GeWuuwb6RVAVBTylOarGTfAtUorvgWth9h8LA9ohwpnHjYq-EOhnuXltTQidMa3dZX4AznW3Hac8IK1xyiizGuR/s1600/sprite-icons.png);background-position:
25px -50px;}
ul#navigation .folder
a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCwq2CCbTEUzUZ6PS1zdWaIMAy7liRUJ6HnJs4gsO1QKMolCEj3Dj52GeWuuwb6RVAVBTylOarGTfAtUorvgWth9h8LA9ohwpnHjYq-EOhnuXltTQidMa3dZX4AznW3Hac8IK1xyiizGuR/s1600/sprite-icons.png);background-position:
25px -150px;}
ul#navigation .guestbook
a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCwq2CCbTEUzUZ6PS1zdWaIMAy7liRUJ6HnJs4gsO1QKMolCEj3Dj52GeWuuwb6RVAVBTylOarGTfAtUorvgWth9h8LA9ohwpnHjYq-EOhnuXltTQidMa3dZX4AznW3Hac8IK1xyiizGuR/s1600/sprite-icons.png);background-position:
25px -300px;}
ul#navigation .rss
a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCwq2CCbTEUzUZ6PS1zdWaIMAy7liRUJ6HnJs4gsO1QKMolCEj3Dj52GeWuuwb6RVAVBTylOarGTfAtUorvgWth9h8LA9ohwpnHjYq-EOhnuXltTQidMa3dZX4AznW3Hac8IK1xyiizGuR/s1600/sprite-icons.png);background-position:
25px -250px;}
</style>
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
Title : Cara Membuat Menu Vertikal Floating Slide Out
Description : Pada kesempatan kali ini saya akan share Cara Membuat Menu Vertikal Floating Slide Out , Menu ini sangant cocok untuk blog anda yang ing...