Monday, July 11, 2011
Sweet Menu Navigasi "Slide out effect" ( jQuery )
Bisa Lihat Demonya Disini
Berikut langkah - langkah project latihan kita kali ini.
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.
6. Setelah Itu Beralihlah dan cari kode <body>
Jika Sudah, taruh kode dibawah ini sebelum atau diatas kode <body>
7. Silahkan anda priview dulu dari hasil latihan ini ,apabila semua berjalan dengan sempurna barulah anda save project latihan ini.
Berikut langkah - langkah project latihan kita kali ini.
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.
<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>
<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 dulu dari hasil latihan ini ,apabila semua berjalan dengan sempurna barulah anda save project latihan ini.
Labels:
jQuery
Subscribe to:
Post Comments (Atom)
Blog Archive
- 2012 (7)
-
2011
(362)
- December(5)
- November(6)
- October(5)
- September(9)
- August(20)
-
July(227)
- Tips Cara Ganti Warna Tampilan Microsoft Office 2007
- Confirmasi PayPal Agar bisa Menerima Pembayaran
- Manfaat Menjalankan Shalat
- Daftar Paypal Gratis dan Tanpa Credit Card
- TuneUp Utilities 2011 Full Version + Serial Number
- Auto Hide IP 5.1.7.2 Full Crack
- Template Transparent 2.0 design by Rizky Wardiansyah
- Black Devil Red Horns Emoticon
- Template Transparent 1.0 design by Rizky Wardiansyah
- Boaz dan Busthomi Langsung Diminati Klub Malaysia
- Any Video Converter 3.25
- Bor Gigi Bisa Bernyanyi
- Cara Pasang Widget (Buku Tamu) Facebook
- Menyembunyikan Obyek Dengan Kode Overflow:hidden
- "Yang Anggap Rossi Tidak Berusaha, Orang Gila"
- Coleen Buat Wanita Penghibur Rooney Ketakutan
- Windows Media Player 12's surprising new features
- Internet Download Manager 6.07 Build 5 Full Patch
- Cara Memasang Widget Followers di Pojok Blog
- Mempercepat Copy/Paste Dengan Teracopy
- IDM Optimizer Software Untuk Memaksimalkan IDM
- Yuk Nikmati Sahur Bersama OVJ
- City Tunggu Aguero dalam Lima Hari
- Xavi, Messi, dan Ronaldo Berebut Jadi yang Terbaik
- Membuka You Tube Tanpa Blokir
- Cara Jebol Quota Modem Aha (Quota Habis)
- Membuka Blokir Situs Dewasa Pada Modem AHA Dialer ...
- DLL-Files.com Fixer Full Patch
- Lapangan Buruk, Indonesia Hanya Imbang di Babak I
- Pasang About Author Box dengan CSS
- Cara Pasang Iklan di Bawah Posting
- Desktop Windows 7 Layar Hitam??
- Posteriza - Software Buat Print Gambar Besar Dalam...
- Ablewise | Tool Buat Memprediksi PageRank
- Download Game MotoGP 3 URT – Ultimate Racing Techn...
- Update Terbaru Winning Eleven 2011
- Download Winning Eleven 9 PC Portable Gratis
- Google Index Pages Checker
- Setting Macro Mouse A4Tech XL-747H
- Melawan virus pemakan exe
- 3 Penyebab Utama Pc/Komputer Sering Restart Sendiri
- Mengatasi masalah windows yang tidak mau Log On
- Membuat Cd instalan windows(Bootable) Instan Denga...
- Blogger Support Upload Favicon Sendiri
- Firefox 6.0 Beta 2
- Cara Memasang Meta Tag Alexa
- Mendaftarkan Blog dan Memasang Widget Alexa
- Cara Menambah Background di Posting Blog
- Keputusan PSSI Memecat Alfred Riedl Adalah Blunder
- Cara Memasukan Foto ke dalam Template
- Membuat Efek Auto Blend Layer (CS3)
- Link-link di Ilmu Photoshop Yang Mungkin Berguna
- Collection Link Brush Photoshop Gratis dan Unik
- Cara Membuat Langit Berbintang
- Tips Photoshop : Pengaturan Penting Sebelum Mendesain
- Kumpulan Gambar Animasi Bergerak GIF One Piece
- 10 Foto Lucu Bayi yang Baru Lahir (Ng-gemesin Bang...
- Kumpulan Gambar Lucu dan Konyol
- Foto Nakal Syahrini Beredar di Internet
- Foto Ciuman Briptu Norman Beredar Di Internet
- Cara Pasang Kotak Komentar Facebook di Blogger
- Download Koleksi Soundtrack Film 'MOHABBATEIN'
- Download Koleksi LAGU-LAGU SHAHRUK KHAN
- Download Koleksi Soundtrack Film 'KUCH KUCH HOTA HAI'
- Download Koleksi Soundtrack Film 'DILTO PAGAL HAI'
- Download Koleksi Soundtrack Film 'HUM TUMHARE HAIN...
- Download Koleksi Soundtrack Film 'DIL SE'
- Download Koleksi Soundtrack Film 'KOYLA'
- Download Gratis Lagu Peterpan – Dara | Video
- Lagu Briptu Norman Cinta Cinta | Chaiya chaiya Ver...
- Lagu Briptu Norman Cinta Farhat Free Download
- Cara Ganti Template Blogspot Anda
- Cara Merubah Lebar Dan Luas Template
- Worm 3D
- Stronghold Crusader Extreme
- Crazy Frog Racer 2
- Feeding Frenzy 2
- Medal of Honor Limited Edition
- Need For Speed Most Wanted + Crack
- Devil May Cry 4
- Resident Evil 5
- Counter Strike : Source v.60 OrangeBox Engine FULL...
- Counter Strike S.T.A.L.K.E.R. (2010/ENG) PC
- Counter Strike 1.6 Update 2011 (Bots + Skins + 100...
- Counter Strike 1.6 (Update March.2011) Bots - Skin...
- Counter Strike Source 1.6
- Counter Stirke: V5 Xtreme (2011/ENG) 794 MB
- Street Fighter III 3rd Strike Full Version
- X-Men VS Street Fighter
- Cara Install Dota Battle
- Prison Tycoon 4 SuperMax
- FBI Hostage Rescue (ENG/Full/PC)
- SAS Anti Terror Force [Full ISO]
- SAS Anti Terror Force Edition
- Ice Age 3 : Dawn Of The Dinosaurs
- Ice Age 2 : The Meltdown
- Koleksi Template Terbaru 2011
- Collection Template Blogger
- RegistryBooster 2011 6.0.3.6 Full Serial Crack
- Install Windows 7 Melalui USB Flash Disk Tanpa CD-...
- June(90)
About Me
- Sibuk Banget
0 comments:
Post a Comment