Artikel menarikCara Membuat Widget Sidebar Blog Menjadi Sticky (Menempel) - Black Exotic - Hallo friend Black Exotic, Pada kesempatan ini, friend akan membaca Artikel yang dengan judul Artikel menarikCara Membuat Widget Sidebar Blog Menjadi Sticky (Menempel) - Black Exotic, tim kami telah mengemas artikel ini dengan baik untuk anda simak dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogging, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Artikel menarikCara Membuat Widget Sidebar Blog Menjadi Sticky (Menempel) - Black Exotic
link : Artikel menarikCara Membuat Widget Sidebar Blog Menjadi Sticky (Menempel) - Black Exotic

Artikel menarikCara Membuat Widget Sidebar Blog Menjadi Sticky (Menempel) - Black Exotic

Selain kolom utama untuk menampilkan postingan, blog dengan layout dua atau tiga kolom tentu memiliki lebih banyak pilihan ruang untuk pemasangan widget-widget tertentu pada bagian sisi sampingnya, atau yang biasa disebut dengan istilah sidebar. Beberapa blogger biasanya menggunakan bagian sidebar ini untuk pemasangan widget-widget seperti recent post, populer post, random post atau bahkan untuk pemasangan iklan.

Posisi sidebar blog memang cukup bagus untuk dimaksimalkan agar fungsi dari masing-masing widget tersebut dapat berperan dengan baik dalam menarik perhatian pengunjung. Sedangkan untuk pemasangan iklan, keberadaan iklan yang dipasang di bagian sidebar juga diyakini cukup ampuh dalam meningkatkan jumlah klik untuk penghasilan blog kita. Oleh karenanya, pengelolaan bagian sidebar juga mesti diperhatikan dengan baik agar tidak sia-sia belaka. 

Pada postingan kali ini, saya akan membagikan sebuah cara untuk membuat widget pada sidebar atau bahkan bagian sidebar secara keseluruhan agar menjadi sticky atau tetap muncul saat halaman digulir. Dengan membuatnya menjadi sticky, maka pengunjung akan selalu melihat keberadaan elemen tersebut sehingga lebih berpeluang untuk diklik oleh mereka. Sebagai ilustrasi, berikut ini contoh screenshot widget popular post yang dibuat menjadi sticky. 

popular post tetap muncul saat halaman digulir

Agar lebih jelas terlihat hasilnya, silahkan anda bisa praktekkan langsung sesuai langkah-langkah di bawah ini. 

Cara Membuat Sidebar Blog Agar Menjadi Sticky

1. Buka akun blogger anda.

2. Pilih menu thema dan klik edit html.

3. Cari kode </body> dan letakkan kode berikut ini di atasnya.

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>

<script type='text/javascript'>

//<![CDATA[

$(function() {

  if ($('#PopularPosts1').length) { // Ganti "#PopularPosts1" dengan ID Widget tertentu

    var el = $('#PopularPosts1');

    var stickyTop = $('#PopularPosts1').offset().top;

    var stickyHeight = $('#PopularPosts1').height();

    $(window).scroll(function() {

      var limit = $('#footer-wrapper').offset().top - stickyHeight - 10; // Jarak berhenti di "#footer-wrapper"

      var windowTop = $(window).scrollTop();

      if (stickyTop < windowTop) {

        el.css({

          position: 'fixed',

          top: 10 // Jarak atau margin sticky dari atas

        });

      } else {

        el.css('position', 'static');

      }

      if (limit < windowTop) {

        var diff = limit - windowTop;

        el.css({

          top: diff

        });

      }

    });

  }

});

//]]>

</script>

</b:if>

Keterangan:

• Silahkan ganti yang ditandai warnai merah di atas (PopularPosts1) dengan ID dari widget atau iklan sidebar yang akan dibuat sticky. Bisa juga diganti dengan ID sidebarnya sekalian agar seluruh bagian sidebar (termasuk widget-widgetnya) menjadi sticky. 
• Script di atas hanya bekerja pada tampilan web/ desktop sehingga tampilan mobile tidak akan menjadi berantakan.
• Mungkin trik ini kurang cocok jika diterapkan pada blog yang memiliki header sticky. 

4. Simpan kembali template anda.

Silahkan anda bisa lihat hasilnya pada tampilan blog versi web. Tampilan widget sidebar pun kini menjadi sticky sehingga selalu terlihat meski halaman digulir ke bawah. Demikian. Semoga bermanfaat.

Demikianlah Artikel Artikel menarikCara Membuat Widget Sidebar Blog Menjadi Sticky (Menempel) - Black Exotic

Cukup sampai disini artikel Artikel menarikCara Membuat Widget Sidebar Blog Menjadi Sticky (Menempel) - Black Exotic kali ini, semoga dapat memberi manfaat untuk friend semua. baiklah, jangan lupa membaca artikel lainnya.

Artikel yang sedang anda baca Artikel menarikCara Membuat Widget Sidebar Blog Menjadi Sticky (Menempel) - Black Exotic dengan alamat link https://blackexotic.blogspot.com/2020/11/artikel-menarikcara-membuat-widget.html

Share this post