Senin, 16 Mei 2011

Sweet Menu Navigasi 2011 "Slide out effect jquery"

Lihat Demonya Di atas kiri yang ada ikon merah muter2
liat gambar:


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.
css nya:
<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 nya:
<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 Selamat Mencoba ...

Ket .. untuk Merubah warna ikon dll bisa di edit di bagian css nya .. kalau masih bingung bisa di tanya kan ,..
Diposting oleh di
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)