Sebenarnya cara ini sudah lama saya gunakan sampai saya sendiri lupa website yang membuat trik ini yang pasti websitenya bukan dari blogger Indonesia ,jadi mohon maaf jika saya tidak meletakkan link sumber Script yang saya gunakan .Beberapa waktu lalu ada seorang sahabat blogger menanyakan tentang cara membuat menu Navigasi yang apa bila di scroll menjadi fixed untuk contohnya silahkan lihat screenshot gambar di bawah ini atau coba scrool ke atas pada bagian homepage atau post page maka menu navigasi horisontal yang saya gunakan pada ketinggian 0px maka menu akan menjadi Fixed/tetap berikut gambar nya:
Untuk cara membuat Navigasi Menu With Animasi Scroll yang saya contohkan di atas sobat harus mengenali dulu Navigasi menu yang sobat pakei ,misal kita menggunakan Navigasi menu horisontal yang ada pada template johny wuss contoh menunya seperti di bawah ini :
Coba perhatikan kode berwarna merah di atas ,karena kode pemanggilan nya berbentuk ID maka secara otomatis kode css nya pasti menggunakan tanda # di depan kode , maka kode jquery yang hrus sobat gunakan harus seperti contoh di bawah ini dan letakkan tepat di atas kode </body> :
Untuk cara membuat Navigasi Menu With Animasi Scroll yang saya contohkan di atas sobat harus mengenali dulu Navigasi menu yang sobat pakei ,misal kita menggunakan Navigasi menu horisontal yang ada pada template johny wuss contoh menunya seperti di bawah ini :
<div id='toppic'>
<div id='topwrapper'>
<ul id='top'>
bla bla bla --------
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
</ul>
<br class='clearit'/>
</div>
</div>
Coba perhatikan kode berwarna merah di atas ,karena kode pemanggilan nya berbentuk ID maka secara otomatis kode css nya pasti menggunakan tanda # di depan kode , maka kode jquery yang hrus sobat gunakan harus seperti contoh di bawah ini dan letakkan tepat di atas kode </body> :
<script type='text/javascript'>Dan yang terakhir letakkan kode Css berikut ini tepat di atas kode ]]></b:skin> berikut kodenya :
//<![CDATA[
var num = 50; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('#toppic').addClass('fixed');
} else {
$('#toppic').removeClass('fixed');
}
});
//]]>
</script>
.fixed{position:fixed;top:0;z-index:9999}
Jika sobat ada kesulitan tentang cara membuat Navigasi Menu With Animasi Scroll silahkan ajukan pertanyaan pada form komentar atau add saya di facebook Judul Artikel :Navigasi Menu With Animasi Scroll
15 komentar
ijin belajar kode disini sob , soalnya saya suka galau mulu pengen utak atik mulu dengan tampilannya yg baru hehehe... menunya keren tuh :D
admin "Variasi Blogger"
saya juga minta izin buat memplajarinya mas mahfid siapa tau bisa berkreasi dari script ini mas....
oh ya mas blognya kok gak bisa di akses ya..?
Bagus Tutornya mas,,
Oh iya kode yang berwarna merah bisa diganti dengan id elemen yang akan kita buat fixed ya mas?
betul soalnya kadang menu navigasi sering berbentuk Class juga
tadi saya setting pembaca blognya mas untuk pribadi maklum lagi saya perbaiki tapi alhamdulillah sekarang sudah selesai dan udah normal kembali....
Silahkan sob saling berbagi dan mengingatkan siapa tahu ada kode yang salah ..he he
Masih sayang sama template navigasi menu bawaan, tapi kalo butuh bisa mampir ke sini lagi.
Bang kok Ga bisa... ?
di luar topic dulu mas siapa tahu berhubungan langsung saya lihat di blog mas ada 3 jquery dengan type yang sama contohnya kaya gini
pakei yang versi terbaru saja mas yang 1.9.2/jquery-ui.min.js yang lain hapus aja ...karena sebaiknya dalam 1 template hanya ada 1 jquery
berarti kalau cuman 1 jquery baru bisa ?
kan saya sudah bilang di luar topic sob untuk bisa tidaknya saya tidak bisa menjamin coba konsultasi pada yang lebih ahli Mas kompi atau kang Ismet atau bahkan ama DTE pasti mereka bilang sangat berpengaruh ama looding atau kinerja blog jika kita pasang lebih dari 1 jquery dengan type yang sama
Ok Ok deh ... :D
Kang gimana cara mempercepat loading blogg..
coba check yang punya saya lama banget loadingnya!! mohon pencerahannya
http://artikelblogsaipul.blogspot.com/
menambahkan widget pada sebuah blog sah sah saja mas tapi kalau terlalu banyak gak baik juga buat looding blog...coba kurangi dulu beberapa widget yang tidak terlalu penting
Posting Komentar
Terima Kasih Sobat Sudah:
1. Berkomentar Dengan Sopan
2. Tidak Memasukkan Link Aktif Dalam Form Komentar
3. Berkomentar Sesuai Artikel/Postingan
4. Berilah Informasi Kepada Admin Jika ada script yang Sudah tidak berfungsi
5. komentar Jorok/kasar /berbau Sara/Porno /saya anggap sebagai SPAM
6.untuk memasukkan gambar gunakan <i rel="image">URL Gambar</i>