Cara Membuat Dan Memasang Menu Sticky DI Blogspot


Cara sederhana paling mudah untuk membuat dan memasang menu sticky ( Populart post melayang ) Di blogger Blogspot - Memasang menu melayang atau sering di namakan sticky untuk blogspot dapat di lakukan dengan menerapkan beberapa langkah di bawah ini.Menu sticky ini sering di temui pada laman blog seperti blogooblook dan yang lainnya.Menu sticky ini bertujuan untuk memperbanyak kunjungan halaman dengan mode selalu menampilkan daftar postingan pilihan,yang biasa di temui berada di samping kiri blog dan apabila kita melakukan scroll pada blog tersebut,Menu di samping tersebut tidak ikut di scroll atau tertutup oleh menu bar pada browser.

Cara mudah membuat menu sticky ini dapat di praktekan dengan mencoba tutorial mbloginfo pada kali ini.Jika sebelumnya kamu ingin memasang menu sticky pada blogmu namun tidak berhasil,Mungkin dengan mencoba praktekan tutorial kali ini,Menu sticky pada blogmu bisa berhasil atau work 100%.

Kamu mungkin akan mencari cara dan kode seperti apa saja yang di butuhkan untuk memasang sticky menu pada blog,Dan tentunya kali ini mbloginfo akan memberikan sebuah tutorialnya ,semoga mudah di pahami dan di mengerti ya.Bagi kamu para blogger pemula yang ingin menampilkan populart post tetap tampil dan melayang di sisi blogmu,Berikut ini cara membuatnya.silahkan di simak.

Cara paling mudah memasang dan membuat menu sticky pada blog blogspot ( Blogger ).

1) . Langkah pertama yang harus di lakuka ialah ,Membuat sebuah populer post dengan cara masuk ke blogger pilih tata letak dan pilih populart post.[ Perhatian ,agar penerapan tutorialnya bisa berjalan lancar dan berhasil work,Sebaiknya kamu hanya memasang satu buah widget di Tata letak blogmu,Dan bisa saja itu hanyalah sebuah widget postingan populer.]


2). Jika suah langkah selanjutnya menuju ke bagian template ,Disini tujuan menuju template ialah untuk mendapatkan nama ID postingan populart post yang sudah di kamu buat barusn,Caranya silahkan buka Dasbhord blogger ,Lalu pilih tema dan klik edit Html,Jika sudah tekan ctrl f dan masukan tag <div id untuk mempermudah menemukan Nama ID widget yang kamu buat tadi.
Ingat juga nama label untuk postingan populer yang kamu buat tadi,Pokoknya setlah menekan enter,Jika ada bilang populart post,itulah ID widget yang kamu buat tadi,seperti gambar di bawah ini,jangan lupa copy kodenya.


3). jika ID widget sudah kamu ketahui ,kemudian copy kode di bawah in ,dan ganti Populartpost1 dengan ID yang kamu temukan tadi.

  <script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#PopularPosts1').length) { // Ganti "#Postingan-Populer" dengan ID tertentu
    var el = $('#PopularPosts1');
    var stickyTop = $('#PopularPosts1').offset().top;
    var stickyHeight = $('#PopularPosts1').height();
    $(window).scroll(function() {
      var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper"
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        el.css({       
position: 'fixed',
          top: 20 // Jarak atau margin sticky dari atas
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>

4). Jika sudah di ganti dan di edit ID populartposnya ,Langkah selanjutnya copy kode tersebut dan pastekan ke ata tag <body> dalam template blogmu.

5). Jika suah Klik simpan template dan lihat hasilnya pada blogmu.

Itulah cara paling mudah membuat tampilan navigasi melayang dengan memasang kode javascript sticky pada blog di platform Blogger.Tutorial di atas bisa kamu cermati dengan teliti agar hasil dari stickynya bisa berjalan lancar dan work 100%,Tambahan juga ,agar tampilan menu sticky di blogmu terlihat cukup dinamis dan sesuai dengan layar,Gunakan saja satu buah widget seperti memasang widget postingan populer saja.

Dengan begitu ,Tampilan sticky melayangnya akan terlihat lebih bagus dan enak saat artikel blog di scroll atau sedang di baca baik itu kamu sendiri atau pengunjung blo.Mungkin hanya ini saja artikel pada kali ini,semoga artikel ini bisa bermanfaat dan menambah wawasan ilmu mu di bagian Blog ,mohon maaf bila ada kesilapan dan kesalahan.

Author

Blogger Awam Blogger Awam Fiksioner is a free template that suitable for personal blogging because the layout is like a journal.

Post a Comment