Cara Membuat Sticky Widget Iklan Adsense Responsive di Blog - Cari Aja Disini

Cara Membuat Sticky Widget Iklan Adsense Responsive di Blog

Sticky Widget Adsense

Sticky widget adalah widget yang sudah di beri fungsi khusus agar berada pada  posisi yang tetap saat halaman blog di scroll (melayang). Hal ini biasa di lakukan untuk mengisi sisi tampilan blog agar tidak kosong sehingga lebih enak di lihat dan menarik perhatian pengunjung blog untuk memperhatikan area sticky widget.

Tentu kalian sudah pernah melihat situs besar yang ada di Indonesia, seperti situs portal berita menggunakan widget sticky di sisi tampilannya, pasti perhatian kalian secara tidak langsung memperhatikan objek yang bergulir saat menscroll halaman. Nah hal tersebut bisa di jadikan self promotion agar pengunjung mau berlama-lama mengakses blog dengan konten yang kita tawarkan pada widget yang di buat sticky. Misalnya kita membuat Sticky Widget Artikel Terbaru bertujuan untuk menawarkan pengunjung untuk membaca artikel yang paling terbaru.

Membuat Sticky Widget Di Blogger


Bagi kamu pengguna blogger yang ingin tahu bagaimana membuat sticky widget, disini akan dijelaskan secara detail caranya. Kalian dapat memilih widget apa saja yang mau dijadikan sticky (melayang) yang sekiranya penting untuk kenyamanan pengunjung blog.

1. Buka dashboard blogger
2. Pilih Tata Letak, kemudian klik Edit pada widget yang di inginkan
3. Copy ID widget seperti dibawah ini. ID nantinya digunakan sebagai parameter widget yang akan dijadikan sticky

Sticky Widget Blog

4. Kemudian pilih Tema, lalu Edit HTML
5. Cari kode HTML Footer blog kamu, Copy ID Footernya, seperti dibawah ini

Sticky Widget Blog

6. Pastekan kode dibawah ini sebelum tag </body>


<script type='text/javascript'>

//<![CDATA[

$(function() {

  if ($('#HTML5').length) { // Ganti "#sticky-sidebar" dengan ID tertentu

    var el = $('#HTML5');

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

    var stickyHeight = $('#HTML5').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>

Keterangan:
- Ganti tulisan yang bewarna merah dengan ID widget yang sudah di copy tadi
- Ganti tulisan bewarna biru dengan ID Footer yang sudah di copy tadi

7. Kemudian letakan kode dibawah ini pada CSS atau Style blog kamu. Untuk menentukan lebar widget yang dibuat sticky. Kamu bisa menyesuaikan lebarnya sesuai dengan ukuran sidebar blog kamu.

#HTML5{width:100%;max-width:300px}

8. Nah setelah itu klik Simpan tema, Kemudian buka blog kamu maka widget akan menjadi sticky.

Klik Tombol Demo dibawah, untuk melihat contoh Tampilan Sticky Widget

Untuk membuat iklan adsense menjadi sticky, caranya sama seperti di atas. Tinggal merubah ID Widget iklan adsense nya saja. Cukup mudah kan? Jika memiliki kesulitan silahkan tulis apa kendalanya di kolom komentar.

Baca Juga:
Tips SEO Artikel Page One Google
Tips Riset Keyword Yang Benar Untuk SEO Blog
Template Blogger Responsive SEO Friendly Terbaik
Cara Membuat Iklan Adsense Valid Template AMP Blog

Cara Membuat Sticky Widget Di Wordpress


Untuk pengguna wordpress caranya tentu berbeda dengan blogger, namun jika kamu paham Bahasa pemrograman HTML kamu bisa menggunakan kode di atas walau cukup sulit karna harus mengedit satu persatu. Disini ada cara yang lebih mudah hanya dengan sekali klik, widget apapun akan menjadi sticky. Yaitu menggunakan Plugin yang bernama Q2W3 Fixed Widget. Cara lengkapnya sebagai berikut:

1. Login ke dashboard admin wordpress
2. Pilih Tambah Plugin, cari plugin Q2W3 Fixed Widget



Sticky Widget Blog Wordpress

3. Kemudian pilih Instal dan Aktifkan
4. Setelah itu buka menu Tampilan, pilih Widget. Cari widget yang akan kamu jadikan sticky
5. Lalu untuk menjadikan widget itu sticky kalian hanya perlu mencentang atau menceklis kotak Fixed Widget.


Sticky Widget Blog Wordpress

6. Setelah itu klik Simpan, kemudian buka blog kamu dan lihat perubahannya.

Nah itu tadi penjelasan bagaimana cara membuat sticky widget di blogger maupun wordpress. Kedua cara di atas juga bisa di aplikasi kan untuk iklan adsense yang ingin di buat sticky. Gunakan Sticky Widget seperlunya agar tetap menjaga kenyamanan pengunjung blog. Semoga artikel ini membantu dan bermanfaat. Jika ada pertanyaan atau kesulitan bisa tulis di kolom komentar.

Belum ada Komentar untuk "Cara Membuat Sticky Widget Iklan Adsense Responsive di Blog"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel