Menubar merupakan salah satu penunjang pemirsa untuk mengeksplorasi konten konten pada blog Anda. Tampilan menu bar yang menarik tentu sangat membuat para pengunjung mudah untuk mengakses semua artikel dengan kateogri kategori tertentu di blog Anda. Berikut BPO akan memberikan tutorial bagaimana agar menu bar tersebut floating, alias apabila pengunjung scroll blog Anda ke bawah menu bar-nya tetap ikut.
Untuk membuat hal ini gampang kok. Langkah pertama, seperti biasa, masuk akun blogger dan stand by -lah pada HTML Template Editor. Lalu coba ditekan CTRL+F bersamaan dan ketikkan </body>. Jika telah anda temukan. Sisipkan kode berikut ini DIATAS kode </body> tersebut.
<script type='text/javascript'>Jika telah dipastekan, Simpan Template Blog Anda dan lihat apa yang terjadi. We did it!. Perlu diperhatikan pastikan template blog Anda seminimalis mungkin. Terutama bagian menubar-nya. Karena jika ukuran menu bar terlalu besar ini akan menganggu pengunjung ketika membaca konten blog Anda. Apalagi jika template yang digunakan mobile friendly.
//<![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>
Pengunaan ini akan membuat ruang artikel untuk tampilan ponsel lebih kecil karena ditimpa menu bar yang selalu muncul. Namun disisi baiknya tentu saja ini merupakan sebuah fitu yang membuat blog Anda tampil semakin elegan.
Share Yuk
Related Posts
Loading...