Membuat Widget Melayang Ketika Di Scroll (Sticky) Dan Berhenti Di atas Footer

widget-sticky-berhenti-diatas-footer

Memasang Widget Sticky Di Sidebar Blog Melayang Dan Berhenti Diatas Footer

Tutorial Cara Membuat Widget Sticky / Melayang Ketika Di Scroll Dan Berhenti Di Atas Footer, Tutorial kali ini blog mas tamvan akan memberikan tutorial memasang widget melayang di sidebar dan tentunya tidak menghalangi footer / widget sticky ini akan berhenti di atas footer.

Sebenarnya udah banyak yang share tutorial cara membuat widget melayang (sticky)ini, tapi banyak yang bertanya di postingan blog saya, gimana cara memasang widget sticky seperti blog agan yang berhenti di atas footer. Saya sudah sarankan cari di google tapi katanya tidak paham.

Jangan lupa gan mampir ke tutorial lainnya ya :)



Moga di tutorial saya ini dapat di mengerti, karena tutorialnya juga sama, cara pemasangannya juga sama :3

Langsung saja ke tutorial cara pemasangan widget sticky yang berhenti di atas footer....

Widget Sticky Sidebar Berhenti Diatas Footer


  • Seperti biasa kalian harus login terlebih dahulu ke akun blogger kalian
  • Setelah login kalian masuk ke menu Template, Edit HTML
  • Selanjutnya cari kode </body>
  • Kalo udah ketemu, masukan script dibawah ini tepat diatas kode body tadi
  • 
    <script type='text/javascript'>
        //<![CDATA[
        // Script Widget Sticky
    $(function(){if($("#HTML9").length){var o=$("#HTML9"),t=$("#HTML9").offset().top,i=$("#HTML9").height();$(window).scroll(function(){var s=$("#footer-wrapper").offset().top-i-70,f=$(window).scrollTop();if(f>t?o.css({position:"fixed",top:0}):o.css("position","static"),f>s){var n=s-f;o.css({top:n})}})}});
        //]]>
    </script>
    
    <style type='text/css'>
        #HTML9 {
            width: 298px;
        }
    </style>
    

    Yang perlu kalian ganti adalah #HTML9 ada ada 5 yang harus d ganti
    Sesuaikan #HTML9 dengan id dari widget yang ingin dijadikan Sticky / melayang.
    Bisa d ganti dengan PopularPosts1, #HTML1 sampai n
    sesuaikan juga #footer-wrapper dengan id footer kalian gan
    kalian juga harus mengatur width: 298px; sesuaikan nilainya dengan ukuran sidebar kalian.
Bagi kalian yang tidak tau cara mengetahui id dari widget kalian, caranya cukp mudah, silahkan ikuti langkah-langkah dibawah ini..

Cara Mengetahui Id Dari Widget Yang Ada Di Blog

  • Kalian masuk ke Tataletak
  • lalu cari widget yang ingin dijadikan sticky, setelah ketemu klik Edit nanti nanti keluar pop up lihat URLnya, liat url paling akhir di situ nanti ada id=id widget kalian
  • Lebih jelasnya lihat gambar....

  • Cara Mengetahui Id Dari Widget Yang Ada Di Blog
  • Nah mudah bukan, kalian tinggal copy dan masukan ke script widget stickynya :)
  • Okeh cukup sampai di sini n selesai.

Cukup sekian dan terima kasih, semoga artikel tentang Tutorial cara memasang widget sticky dan berhenti diatas footer ini bermanfaat ya :)

apabila masih ada yang tidak dimengerti, silahkan bertanya di kolom komentar :)
6 komentar
  1. gan supaya di hp ga aktif stickynya gimana?

    ReplyDelete
    Replies
    1. Agan bisa pake Tag Kondisional Atau Tambahin Css
      kalo pake tag kondisional bisa cari d blogsaya
      Tag Kondisional

      Kalo pake css agan bisa menggunakan
      @media screen adn (max-width:ukuranlayar{
      #HTML9{
      display:none
      }
      }

      Delete
    2. @media screen adn (max-width:ukuranlayar){
      #HTML9{
      display:none
      }
      }

      Delete
  2. Thanks mas untuk tutorialnya, nyoba yang lain gagal terus.. disini doang yang cocok.. hehe...

    ReplyDelete
  3. cara menghentikan flying menu gimana ya?

    ReplyDelete