Cara Membuat Menu Melayang di Blogspot

Cara membuat menu melayang di blogspot merupakan sebuah upaya untuk lebih mempercantik blog, selain mempercantik blog ternyata menu melayang berfungsi juga sebagai penuntun arah pengunjung blog, mengapa demikian? Karena dengan menu melayang bisa memudahkan pengunjung dalam mengeksplorasi blog tanpa harus naik-turun scroll. Dengan begini diharapkan bisa membantu meningkatkan pageview blog, dengan alasan itulah mengapa sebagian berpendapat bahwa menu melayang membuat blog lebih seo.

Menu melayang atau disebut juga sticky widget membuat tampilan blog anda menjadi semakin menarik, cara pembuatannya juga sangat mudah. Berikut cara membuat menu melayang di blogspot :

1.  Login ke dashboard blogspot
2.  Pilih template dan edit HTML
3.  Cari kode </body>
4.  Copy dan paste-kan kode berikut tepat diatas kode </body>

    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky yaitu .nav
    var stickyNavTop = $('.nav').offset().top;
    var stickyNav = function(){
    var scrollTop = $(window).scrollTop();
    // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya
    if (scrollTop > stickyNavTop) {
    $('.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
    } else {
    $('.nav').css({ 'position': 'relative' });
    }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
    stickyNav();
    });
    });
    //]]>
    </script>

5.    Simpan template.

Yang sangat perlu diperhatikan yaitu penentuan selectornya, dalam script tersebut selectornya ada pada .nav. Jadi anda perhatikan baik-baik apa nama selector yang ada pada template anda, ini sangat penting, jika anda salah maka script ini tidak bisa bekerja dengan baik dan jika tidak bekerja dengan baik itu artinya hasilnya tidak bisa sesuai dengan contoh. Lalu mana contohnya? Contohnya bisa anda lihat di blogoonline ini, perhatikan jika anda scroll kebawah, maka menu diatas akan ikut terbawa kebawah seperti melayang bukan?

Cara untuk mencari menu selector, anda bisa cari kode menu di edit HTML template anda. Cari di kode CSS nya, untuk template saya ini kodenya bukan .nav melainkan #menu. Jadi anda perlu teliti betul-betul untuk kode selector ini ya..

Demikian artikel tentang cara membuat menu melayang di blogspot, semoga bermanfaat. Baca juga cara membuat artikel terkait dibawah posting blogspot.