Tips Membuat Sticky Widget Blog Melayang di Sidebar

Tips Blogger, Membuat Sticky Widget Blog Melayang di Sidebar - Salam hangat untuk para pengunjung blog umarweb.com. Pada kesempatan kali ini, Saya akan menuliskan artikel tentang bagaimana tips atau cara untuk membuat sebuah sticky widget pada blog atau website Anda agar tetap melayang saat halaman blog Anda di scroll ke bawah. Karena sticky widget itu sendiri secara sederhana merupakan widget dalam keadaan statis meskipun harus di scroll ke bawah oleh pengunjung blog Anda. Hal ini akan cukup menguntungkan bagi Anda yang sedang meningkatkan pundi-pundi uang dari media online, seperti Google Adsense.

Bagi Anda yang sudah berpengalaman dalam dunia IT khususnya HTML dan Java Script tentunya hal ini tidaklah sulit bahkan cenderung sudah memahaminya. Namun, bagi Anda sorang blogger pemula tidak perlu khawatir karena pada artikel ini akan diuraikan caranya dengan cukup jelas tentang bagaimana mempraktekannya.

Oke, langsung saja ke prakteknya berikut ini ;

Tips Membuat sticky Widget Blog Melayang di Sidebar

  1. Langkah pertama silahkan masuk pada halaman utama Blogger Anda.
  2. Langkah kedua masuk ke menu Template/Tema > Edit HTML.
  3. Langkah selanjutnya silahkan cari kode ]]></b:skin> untuk memudahkan pencariannya ketikan CTRL + F pada halaman tema/template Blog Anda dan apabila sudah ditemukan kode tersebut, selanjutnya silahkan copy kode CSS di bawah ini tepat di atas kode tersebut.
    .sticky {
      position:fixed;
      top:10px;
      z-index: 100;
    }
  4. Langkah selanjutnya silahkan copy kode berikut inipada tema/template blog Anda tepat diatas kode </body>, untuk memudahkan pencariannya silahkan lakukan seperti cara diatas

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

    Catatan penting :
    Perhatikan pada kode "HTML11" diatas yang berwarna merah, silahkan ganti dengan kode HTML widget blog Anda yang akan dijadikan sebagai widget dengan mode Sticky.

    Untuk dapat melihat kode widget blog Anda, silahkan perhatikan gambar dibawah ini ;



    Baca juga : Cara Mencari Kata Kunci Yang Populer Saat Ini

    Nah, apabila sudah dapat Anda implementasikan pada widget blog Anda, silahkan save kemudian lihatlah hasilnya. Apabila widget tertentu Anda sudah menjadi Sticky widget berarti Anda berhasil menerapkan tips tentang membuat sticky widget blog melayang di sidebar pada postingan artikel Saya ini. Demikianlah uraian tentang tips untuk blogger kali ini, dan salam hangat untuk semua.

0 Response to "Tips Membuat Sticky Widget Blog Melayang di Sidebar"

Post a Comment