Sabtu, 15 Januari 2011

Beranda » Sweet Menu Navigasi 2011 "Slide out effect jquery"

Sweet Menu Navigasi 2011 "Slide out effect jquery"

Sweet Menu Navigasi 2011 "Slide out effect jquery" Tapi Kali ini saya tulis yg model original nya:

Liat Gambar



Berikut langkah - langkah nya
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : <head>
5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini sebelum atau diatas kode <head> kalau tidak bisa taruh dibawahnya saja tidak apa.

KODE CSS

<script type="text/javascript" src="http://playground.adambecker.info/sweet-menu/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://playground.adambecker.info/sweet-menu/jquery.easing.js"></script>
<script type="text/javascript" src="http://playground.adambecker.info/sweet-menu/jquery.sweet-menu-1.0.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$('#backMenu').sweetMenu({
top: 40,
padding: 8,
iconSize: 48,
easing: 'easeOutBounce',
duration: 500,
icons: [
'http://playground.adambecker.info/sweet-menu/images/back.png'
]
});

$('#exampleMenu').sweetMenu({
top: 200,
padding: 8,
iconSize: 48,
easing: 'easeOutBounce',
duration: 500,
icons: [
'http://playground.adambecker.info/sweet-menu/images/home.png',
'http://playground.adambecker.info/sweet-menu/images/comments.png',
'http://playground.adambecker.info/sweet-menu/images/red_heart.png',
'http://playground.adambecker.info/sweet-menu/images/male_user.png',
'http://playground.adambecker.info/sweet-menu/images/yellow_mail.png',

]
});
});
</script>

<style type="text/css">
body
{
background: #000000 url('images/bg.jpg') top center no-repeat;
}

.sweetMenuAnchor{
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
color: #0071bb;
font-size: 24px;
font-weight: bold;
text-align: right;
text-transform: uppercase;
font-family: arial;
text-decoration: none;
background-color: #888888;
opacity: 0.6;
}

.sweetMenuAnchor span{
display: block;
padding-top: 10px;
}

h1
{
display: block;
text-align: center;
font-size: 48px;
color: #ffffff;
text-shadow: 0px 0px 12px #000000;
font-family: "Trebuchet MS";
}
</style>


6. Setelah Itu Beralihlah dan cari kode <body>
Jika Sudah, taruh kode dibawah ini sebelum atau diatas kode <body>

KODE

<ul id="backMenu">

</ul>
<ul id="exampleMenu">
<li><a href="alamat url">Beranda</a></li>
<li><a href="alamat url">Blog</a></li>
<li><a href="alamat url">Favorit</a></li>
<li><a href="alamat url">Tentang saya</a></li>
<li><a href="alamat url">Kontak</a></li>

</ul>

7. Silahkan anda priview, apabila semua berjalan dengan sempurna barulah anda save

Keterangan:
Untuk Merubah warna ikon dll bisa di edit di bagian css nya ..
Sumber http://www.japarus.com/

Selamat Mencoba ... 


www.isunuklir.blogspot.com