Kali ini saya akan berbagi tips cara membuat menu muncul setelah di scroll atau Sticky Menu,
Dimana jika halaman blog kita scroll maka menu akan muncul di atas.
Untuk lihat contohnya, bisa lihat di blog saya yg lain, klik disini untuk melihat contoh di blog saya yg lain, dan coba scroll.
Nah bagi agan yang ingin memasang Sticky Menu, berikut caranya:
- Masuk dashbor blog agan, kemudian di bagian Template pilih Edit HTML
- Letakan code berikut dia atas kode </head>
- Kemudian masih di edit HTML, cari bagian header, Kalau di blogspot untuk mencarinya mudah, tinggal klik tombol 'lompat ke widget" kemudian pilih header1 perhatikan tag penutupnya yaitu </header>
- Nah setelah ketemu, agan letakan kode HTML berikut dibawahnya,
- Terkahir save template
Catatan: Yang saya kasih warna biru, silahkan agan sesuaikan menurut kebutuhan, seperti nilai CSS dan Conten menunya.
Oh ya hampir lupa, Satu lagi, ini memerlukan binary Jquery, jika agan belum pasang jquery versi berapa pun di blognya, Pasang jquery nya dengan meletakan script external jquery versi 1.8.3 berikut dibawah kode <head>
<script type='text/javascript' src='//code.jquery.com/jquery-1.8.3.js'></script>
Tapi jika sudah agan pasang sebelumnya, seperti jquery versi 2.0.0, agan gak perlu pasang script jquery di atas, Tidak boleh lebih dari satu versi jquery dipasang di blog, selain akan membuat berat, juga tidak bekerja dengan baik, rebutan gajih mungkin hehehe..
Selamat mencoba..
Dimana jika halaman blog kita scroll maka menu akan muncul di atas.
Untuk lihat contohnya, bisa lihat di blog saya yg lain, klik disini untuk melihat contoh di blog saya yg lain, dan coba scroll.
Nah bagi agan yang ingin memasang Sticky Menu, berikut caranya:
- Masuk dashbor blog agan, kemudian di bagian Template pilih Edit HTML
- Letakan code berikut dia atas kode </head>
<style type='text/css'>
.rajawally {
width:100%;
background-color:#4b497a;
color:white;
text-align:center;
height:50px;
line-height:50px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('$(c).e(6(){3 8=$(\'.5\').f().4;3 1=6(){3 2=$(7).2();d(2>8){$(\'.5\').a({\'9\':\'g\',\'4\':0,\'k-h\':m})}l{$(\'.5\').a({\'9\':\'i\',\'4\':-j,\'n\':0})}};1();$(7).b(6(){1()})});',24,24,'|stickyrajawally|scrollTop|var|top|rajawally|function|window|stickyrajawallyTop|position|css|scroll|document|if|ready|offset|fixed|index|absolute|300|z|else|9999|left'.split('|'),0,{}))
//]]>
</script>
.rajawally {
width:100%;
background-color:#4b497a;
color:white;
text-align:center;
height:50px;
line-height:50px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('$(c).e(6(){3 8=$(\'.5\').f().4;3 1=6(){3 2=$(7).2();d(2>8){$(\'.5\').a({\'9\':\'g\',\'4\':0,\'k-h\':m})}l{$(\'.5\').a({\'9\':\'i\',\'4\':-j,\'n\':0})}};1();$(7).b(6(){1()})});',24,24,'|stickyrajawally|scrollTop|var|top|rajawally|function|window|stickyrajawallyTop|position|css|scroll|document|if|ready|offset|fixed|index|absolute|300|z|else|9999|left'.split('|'),0,{}))
//]]>
</script>
- Nah setelah ketemu, agan letakan kode HTML berikut dibawahnya,
<div class='rajawally'>
<span style='margin-right:20px'>Menu1</span>Menu2
</div>
<span style='margin-right:20px'>Menu1</span>Menu2
</div>
- Terkahir save template
Catatan: Yang saya kasih warna biru, silahkan agan sesuaikan menurut kebutuhan, seperti nilai CSS dan Conten menunya.
Oh ya hampir lupa, Satu lagi, ini memerlukan binary Jquery, jika agan belum pasang jquery versi berapa pun di blognya, Pasang jquery nya dengan meletakan script external jquery versi 1.8.3 berikut dibawah kode <head>
<script type='text/javascript' src='//code.jquery.com/jquery-1.8.3.js'></script>
Tapi jika sudah agan pasang sebelumnya, seperti jquery versi 2.0.0, agan gak perlu pasang script jquery di atas, Tidak boleh lebih dari satu versi jquery dipasang di blog, selain akan membuat berat, juga tidak bekerja dengan baik, rebutan gajih mungkin hehehe..
Selamat mencoba..
