Sedikit Info Seputar
Cara Membuat Menu Navigasi Tetap Walaupun di Scroll
Terbaru 2017
- Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Cara Membuat Menu Navigasi Tetap Walaupun di Scroll, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang
Artikel CSS,
Artikel Tutorial Blog, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
Cara Membuat Menu Navigasi Tetap Walaupun di Scroll
Terbaru
link: Cara Membuat Menu Navigasi Tetap Walaupun di Scroll
Berbagi Cara Membuat Menu Navigasi Tetap Walaupun di Scroll Terbaru dan Terlengkap 2017
Cara Membuat Menu Navigasi Statis atau Sticky di Blog,- Template adalah sebuah elemen dasar yang membangun sebuah blog atau web yang berisi dari semua fitur seperti Sidebar, Header, Post, footer dan lain-lain. atau bisa dikatekan bahwa template adalah sebuah wadah untuk eleman lain dari blog serta sebagai tampilan sebuah website.atau blog.Template blog juga sangat mempengaruhi kesuksesan sebuah blog, karenanya silahkan pilih template yang sudah terbukti Seo friendly atau disukai mesin penelusuran google. namun dari semua elemen yang membangun template seperti sidebar, Header, Footer dan lain-lain. disini saya akan membagikan sedikit tutorial yang mungkin bermanfaat untuk anda yaitu Cara membuat menu navigasi tetap walaupun di scroll kebawah.
Sebenarnya tutorial ini saya peruntukan bagi yang ingin sekali membuat menu navigasi sticky seperti blog lain yang menggunakan, dan cara ini bisa dibilang sedikit rumit, oleh karena itu silahkan di simak baik-baik. berikut tutrialnya:
Cara Membuat Menu Navigasi Tetap walaupun di Scroll
1. Pertama silahkan masuk ke Blogger - Template - Edit Html.
2. Kemudian Silahkan cari kode Menu navigasi, pada setiap blog kodenya berbeda-beda namun yang pasti terdapat kode (nav), sebagai contoh kode blog saya adalah #navitions.
3. Silahkan catat atau hafalkan kode tersebut, kemudian silahkan cari kode </body>, jika sudah ketemu copy kode dibawah ini dan paste diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var stickyNavTop = $('#nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('#nav').css({ 'position': 'relative' });
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>
4. Selanjutnya ganti kode #nav diatas dengan kode menu navigasi yang sebelumnya ada hafalkan atau catat.
5. Biasanya menu tersebut akan berantakan, untuk mengatasinya silahkan ganti width:100%; yang ada pada kode menu seperti langkah no 2, dengan width:950px; atau jika tidak ada silahkan tambahkan sendiri. dan untuk menyesuaikanya dengan template anda bisa diganti 950px dengan ukuran lain.
Itulah cara membuat menu navigasi tetap walaupun di scroll kebawah, sekian tips blog yang dapat saya bagikan dan Semoga berhasil.