Navigasi Efek Slide Out dengan jQuery


Langkah 1
Login ke Blogger
Langkah 2
Masuk ke “Tata Letak – Edit HTML”
Langkah 3
Klik “Expand Template Widget”
Langkah 4
Cari kode dibawah ini:
]]>

Langkah 5
Masukan (copypaste) kode CSS dibawah ini diatas kode pada langkah 4:

ul#menusisi {
position: fixed;
margin: 0px;
padding: 0px;
top: 50px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#menusisi li {
width: 100px;
}
ul#menusisi li a {
display: block;
margin-left: -50px;
width: 100px;
height: 55px; 
background-color:#141414;
background-repeat:no-repeat;
background-position:48px center;
border:1px solid #cfcfcf;
-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;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ul#menusisi .beranda a{
}
ul#menusisi .tentang a{
}
ul#menusisi .cari a{
}
ul#menusisi .komentar a{
}
ul#menusisi .rssfeed a{
}
ul#menusisi .alat a{
}
ul#menusisi .kontak a{
}

Langkah 6
Cari kode dibawah ini:

Langkah 7
Masukan (copypaste) kode jQuery dibawah ini diatas kode pada langkah 6:

google.load("jquery", "1.3.2");
$(function() {
$(‘#menusisi a’).stop().animate({‘marginLeft’:’-50px’},1000);
$(‘#menusisi > li’).hover(
function () {
$(‘a’,$(this)).stop().animate({‘marginLeft’:’-2px’},200);
},
function () {
$(‘a’,$(this)).stop().animate({‘marginLeft’:’-50px’},200);
}
);
});

Langkah 9
Masukan (copypaste) kode dibawah ini diatas kode pada langkah 8:


  • Langkah 10
    Simpan template dan preview blog anda…

    untuk lebih lanjut, langsung ke sumbernya
    disini dan saya ucapkan terima kasih kepada http://modification-blog.blogspot.com karena triks ini bagus banget

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s