Cara Termudah membuat menu sticky menu melayang Pada Blog






Mengedit tampilan bilah sisi blog dan bagian navigasi pada blog yang berupa Home,panel lainnya yang apabila konten blog sedang di baca dan digeser/scroll menuju bawah ,

Tampilan pada home tetap ikut tampil dan melayang di bawah bar browser.Inilah yang di namakan dengan menu sticky pada blog/website.

Membuat menu ini bermaksud agar menu yang di sticky tetap tampil saat dilakukannya pergeseran cursor mulai dari atas ke bawah.

Menu sticky sering kali di artikan dengan menu tampilan melayang pada bagian tertentu sebuah blog,dengan tampilan dan perpaduan template,Blog akan terlihat lebih bagus dari tampilan biasanya.
Menu sticky ini biasanya di pasangkan pada blog yang banyak visitor,disamping itu sticky menu ini dapat di artikan untuk mempermudah setiap pengunjung untuk menemukan pintasan yang ada pada blog tersebut.

Apa dampak jika memasang menu sticky pada blog ?
Sepertinya dampak memasang sticky pada blog tidak begitu berbahaya bagi Seo sebuah blog,Dan menurut saya jika blog memasang sticky,Loading blog akan terasa lebih lambat,apalagi dengan banyaknya tampilan gadget seperti gambar dan iklan lainnya yang secara otomatis.

Apa manfaat memasang sticky pada blog/website?
Blog/website akan mendapatkan jumlah tayangan pengunjung yang banyak,karena prosedur sticky yang selalu menampilkan semua artikel yang selalu berderet dan bersamaan dengan konten yang sedang di baca oleh setiap pengunjung blog/website kalian.

Bagaimanakah cara membuat menu sticky pada blog ?
Cara membuatnya adalah membutuhkan sebuah kode pemanggil seperti Html/javascript yang bisa di dapatkan pada blog-blog yang menyediakan berbagai tutorial untuk blog itu sendiri,Dan pada postingan ini akan menguraikan cara pembuatannya.

Kode Html Untuk membuat menu sticky pada Blog blogger
Langkah yang bisa di gunakan untuk menghasilkan sebuah tampilan melayang/sticky pada blog hanya satu-satunya yaitu dengan menyisipkan html tertentu di bagian template blog,dengan cara sebagai berikut.
  • Silahkan LOgin ke akun blogger
  • Pilih theme 
  • Klik edit template
  • di bagian template ,jika anda menggunakan laptop/komputer tekan Ctrl F untuk mudah menemukan tag yang akan di tambahkan atau gantikan.
Berikut ini adalah kode html yang dapat di gunakan untuk menghasilkan sebuah tampilan dengan mode menu sticky/melayang pada blog.

1.Copy kode di bawah ini dan tempelkan di template Blogger dengan menekan Ctrl F dan masukan Tag ]]></b:skin> tempelkan kode tepat di atasnya.

.sticky {
  position:fixed;
  top:10px;/* jarak dari atas*/
  z-index: 100;
}

2.jika sudah memasang kode di atas ,selanjutnya ialah memasang kode html/java script untuk menghasilkan bagian menu yang akan di buat menjadi sticky.Dengan catatan mengganti Id navigasi yang akan di buat menjadi tampilan sticky.


<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#Ganti ID').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop(); 
if (scrollTop > stickyWidgetTop) {
    $('#Ganti ID').addClass('sticky');
} else {
    $('#Ganti ID').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
    stickyWidget();
});
});
</script>

3.Ingat,Sebelum melakukan copy paste kode di atas,Silahkan salin Ganti ID dengan ID nav/widget yang akan di jadikan menjadi melayang/sticky/ngambang untuk blog.dengan cara mengettikan/mengedit di halaman edit template Ctrl F dan masukan Tag <nav id ,ID yang muncul,copy dan pastekan pada ganti id kode html di atas.seperti gambar di bawah ini.

4.Cara untuk mengetahui ID widget pada blogger sangat mudah untuk di ketahui,caranya adalah masuk ke dasbor blogger,Pilih layout dan klik widget yang ingin di cari ID nya seperti gambar di bawah ini.misalkan mencari ID widget Popular post .


5.Melihat hasil apakah menu stickynya sudah berhasil untuk di pasangkan atau tidak,Jika tidak bisa mungkin ada yang salah dalam memasukan ID nav class template anda,Dan untuk di ketahui beda template juga beda ID.

Kesimpulan:Diatas adalah cara memasang menu melayang/sticky pada blog blogger yang hasilnya dapat di artikan dengan,Apabila konten blog di scroll maka bagian navigasi seperti Home tidak ikut tergeser dan tertutup oleh bar browser,Melainkan home navigasi tetap berada di bagian atas.pembuatannya membutuhkan sebuah kode html/javascript yang cocok atau work.


Artikel Terkait

Postingan populer dari blog ini

Begini Cara Memasang iklan penelusuran bersponsor google adsense Di Blog

Membuat Related Post Grid Untuk Template AMP Blogger

Cara Mengatasi Gagal Install Driver VGA Pada windows 7 All version

Cara membuat Link Model no follow dan Do follow

Cara Membuat Akun Google Adsense Hosted Terbaru

Tutorial Full Flash Smartphone OPPO A37 ,Lupa Pola

Cara Menampilkan Traffic Data Koneksi Internet Pada Laptop

Kumpulan Kode Html Javascript Untuk Edit Tampilan Blog

Cara memasang artikel "Baca juga" ditengah postingan blog

Cara Mengatasi Tombol Edit Yang Hilang Pada Tata Letak Blog