Tentukan sendiri jalan cerita selanjutnya.

Tentukan sendiri jalan cerita selanjutnya.
SET YOURSELF THE NEXT STORY

Ads : 1 USD forever

This blog started to be written January 11, 2015.
Advertise your products and services here.
With 1 USD then your ad posted in the article forever.
1 USD per article forever.

A story with tens of thousands of articles.

A story with tens of thousands of articles.
life and death, blessing and cursing, from the main character in the hands of readers.

Campaign : Support my book "The ultimate guide to get life on earth as in heaven."

Campaign : Support my book "The ultimate guide to get life on earth as in heaven."
Campaign started October 17, 2015 (45 days)

Your contribution to my campaign

Thursday, March 5, 2015

Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll.


Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll


sticky menu navigasi blog
Cara menampilkan menu statis, sticky, atau melayang (floating).

KALI ini CB berbagi tentang cara membuat Menu Navigasi blog statis yang tetap muncul (melayang) di bagian atas, saat halaman discroll ke bawah.

Contohnya? Ya... blog ini! Coba scroll ke bawah, lalu lihatlah... menunya tetap ada di bagian atas 'kan?

Menu Navigasi (Navigation Menu) yaitu menu blog yang biasa ada di deretan Home, About, dan seterusnya. Menu navigasi sangat penting bagi pengunjung agar bisa dengan mudah "berselancar" (surf) dan "baca-baca" (browse) blog kita lebih lama.

Awalnya CB "ngiri" sama menu navigasi situs Hongkiat. Saat kita scroll, menunya tetap muncul di atas. Setelah "search" di sana, ternyata Hongkiat berbagi tips cara membuatnya: Sticky Position (Bar) With CSS Or JQuery.

CB hanya ambil kodenya saja agar Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll. Cara membuatnya mudah banget.

Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll

1. Template > Edit HTML
2. Cari (CTRL+F) kode </body>
3. Copy kode berikut ini dan Paste di atas 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. JANGAN LUPA! Sebelum klik "Save", Ganti elemen .nav dengan elemen/kode yang menjadi Navigasi Menu blog Anda. Di blog CB (New Johny Wuss), kodenya bernama #menu, sehingga kodenya menjadi:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('#menu').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $('#menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#menu').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

Anda pengguna template New Johny Wuss, yang ingin Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll, tinggal COPAS saja kode yang digunakan CB di atas. Tapi jangan lupa, ubah angka 99% di bagian #menu{background:#343434;width:99%;margin:0 5px 0 5px;color menjadi 950px.

Good Luck dan Happy Blogging!
sumber : http://contohblognih.blogspot.com/2014/05/menu-navigasi-blog-tetap-muncul-melayang.html



No comments:

Post a Comment

Related Posts

Related Posts Plugin for WordPress, Blogger...