Slide Out Navigation Menu Jquery 2

Tutorial kali ini sama dengan tutorial sebelumnya tentang "Slide Out Navigasi Menu Floating Jquery Di Atas Halaman Blog", hanya saja perbedaannya adalah kita akan mencoba memasangnya disamping halaman blog. Silahkan lihat preview dan demonya dibawah ini.

Langkah-langkah membuatnya :
1. Seperti biasa login terlebih dahulu ke akun blog anda
2. Klik Rancangan > Elemen Laman > Edit HTML
3. Download Template Lengkap terlebih dahulu
4. Cari kode  ]]></b:skin> kemudian copy-paste kode CSS dibawah ini sebelum kode ]]></b:skin> 

ul#navslide {
position: fixed;
margin: 0px;
padding: 0px;
top: 200px;
left: 0px;
list-style: none;
z-index:9999;
}

ul#navslide li {
width: 120px;
}

ul#navslide li a {
display: block;
margin-left: -50px;
width: 100px;
height: 58px;   
background-color:#000;
background-repeat:no-repeat;
background-position:50px center;
border:1px solid #FFF;
-moz-border-radius:0px 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;

opacity: 0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}

ul#navslide .slide1 a{
background-image: url(http://i1182.photobucket.com/albums/x453/marioadit/navigasi%20menu/home.png);
}
ul#navslide .slide2 a      {
background-image: url(http://i1182.photobucket.com/albums/x453/marioadit/navigasi%20menu/about.png);
}

ul#navslide .slide3 a      {
background-image: url(http://i1182.photobucket.com/albums/x453/marioadit/navigasi%20menu/fb.png);
}

ul#navslide .slide4 a   {
background-image: url(http://i1182.photobucket.com/albums/x453/marioadit/navigasi%20menu/rss.png);
}

ul#navslide .slide5 a     {
background-image: url(http://i1182.photobucket.com/albums/x453/marioadit/navigasi%20menu/contact.png);
}

5. Kemudian cari lagi kode </head> dan copy-paste kode javascript dan jquery dibawah ini tepat di atas kode </head>

<script type="text/javascript" src="https://sites.google.com/site/mariozoner/gb-mario/jquery-1.3.2.js"></script>

<script type="text/javascript">
$(function() {
$('#navslide a').stop().animate({'marginLeft':'-50px'},1000);
$('#navslide > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);
});
</script>

6. Klik SIMPAN TEMPLATE
7. Beralih ke menu Rancangan > Elemen Laman > Tambah Gadget > HTML/JavaScript
8. Silahkan anda copy-paste kode HTML di bawah ini

<!---modified by Mario Zoner--->
<ul id="navslide">
<li class="slide1"><a href="link tujuan"  title="Main Page"></a></li>
<li class="slide2"><a href="link tujuan"  title="About"></a></li>
<li class="slide3"><a href="link tujuan"  title="My Facebook"></a></li>
<li class="slide4"><a href="link tujuan"  title="RSS"></a></li>
<li class="slide5"><a href="link tujuan"  title="Contact Me"></a></li>
</ul>

Setting

• Kode yang berwarna hijau adalah alamat url gambar. Anda bisa menggantinya dengan gambar yang anda inginkan.
• Gantilah kode berwarna biru dengan link tujuan yang anda inginkan. misalnya http://mariozoner.blogspot.com
• Untuk kode yang berwarna merah silahkan anda ganti dengan tittle (judul) yang anda inginkan.
• Apabila dalam template anda sudah terdapat kode jquery-1.3.2, maka kode tersebut tidak perlu ditambahkan.

9. Jangan lupa klik Simpan dan lihat hasilnya.

Related Post