2 Trik Membuat Sticky Widget di Sidebar WordPress

Pembahasan kita pada kali ini tentang tuitorial CMS WordPress yaitu trik membuat sticky widget di sidebar pada WordPress.

Di sini Aku akan share ke teman-teman cara membuat sticky sidebar menggunakan plugin dan tanpa plugin.

Dan kita bahas juga dua jenis sticky sidebar widget:

1. Sticky Sidebar di Awal Widget, dan
2. Sticky Sidebar di Akhir Widget

2 Trik Membuat Sticky Sidebar di WordPress

Sidebar merupakan salah satu bagian terpenting dari suatu website. Dengan begitu, ketika klita menggunakan widget yang berbeda di sidebar dapat membuat situs web atau blog Sobat lebih menarik.

Yang dimaksud dengan Sticky Sidebar atau Floating adalah Sidebar yang mana ketika website atau blog digulir kebawah tidak akan ikut (tidak bergerak.)

Biasanya ini sangat berguna apabila Sobat memiliki postingan yang panjang. Kalau misalnya Sticky Sidebar itu tidak kita gunakan pada artikel yang panjang, maka sidebarnya akan kosong setika blog di scroll hingga ke bawah.

Manfaat Menggunakan Sticky Sidebar adalah membantu meningkatkan Click Through Rate (CTR) situs web.

Seperti pada blog Androkit.com ini. Kami sengaja menggunakan sticky sidebar di Awal Widget. Supaya pembaca terus dapat melihat widget yang ada di Sidebar.

Seperti yang sudah Aku singgung di atas, Kita akan menggunakan 2 cara untuk membuat sticky widget.

• Membuat Sticky Widget Menggunakan Plugin, dan
• Membuat Sticky Widget tanpa Menggunakan Plugin

Oh ya, Pada studi kasus kita kali ini, Aku akan mempraktekkan cara membuat sticky Sidebar dengan menggunakan theme GeneratePress versi Premium. Salah satu theme WordPress terbaik dan populer.

Selain itu, Anda dapat menggunakan Sticky Sidebar di situs Sobat untuk tujuan seperti pada berikut ini:

• Tampilkan Postingan Populer.
• Untuk Menampilkan Tampilkan Postingan Populer.
• Sematkan Kotak Obrolan
• Sematkan Widget Subscribe.
• Menampilkan Spanduk Affiliasi
• Membuat Tampilan Postingan Terbaru.
• Ikon Berbagi Sosial.
• Kotak Iklan.
• Kode Kupon.
• Tempelkan atau Apungkan widget apa pun.

Buat Sticky Widget di Sidebar Menggunakan Plugin

Plugin Fixed Widget untuk WordPress merupakan teknik yang sangat populer dan banyak digunakan untuk membuat sidebar Sobat lengket. Untuk ini, Sobat hanya tinggal menginstal plugin Q2W3 Fixed Widget. Sobat dapat pakai plugin WordPress Q2w3 di theme WordPress lainnya juga.

Fixed Widget and Sticky Elements for WordPress

Mari kita instal dan implementasikan di tema GeneratePress.

• Buka Plugin > Tambah Baru
• Cari Plugin Q2W3 Fixed Widget.
• Instal dan Aktifkan.
• Pergi ke Appearance > Widget.
• Pilih Sidebar Kanan (right sidebar)
• Pilih widget bagian terakhir dan Sobat akan melihat Fixed Widget. Ceklis untuk mengaktifkan.
• Klik Tombol Save.
• Juga, Buka Penampilan> Fixed Widget Option
• Sesuaikan pengaturan Widget sesuai dengan kebutuhan tema Sobat.

Buat Sticky Widget Terakhir di GeneratePress tanpa Plugin

Membuat Sticky Widget di sidebar di bagian akhir adalah hal yang mudah di GeneratePress menggunakan kode CSS. Dengan menambahkan sedikit kode CSS khusus GeneratePress ini kita bisa membuat sticky widget yang baik.

Jika sobat menggunakan tema WordPress dari Astra, sobat juga bisa Cara Buat Sticky Sidebar di Tema Astra

Mari kita buat fixed widget terakhir menggunakan kode CSS di Tema GeneratePress

Di bawah ini adalah kode untuk sidebar kanan. Perhatikan kodenya jika ingin digunakan pada bagian sidebar kiri.

Jika Sobat pakai sidebar Kiri, silahkan ganti kata right menjadi left

Copy Code

@media (min-width: 769px) {
.site-content {
  display: flex;
	}
	
.inside-right-sidebar {
  height: 100%;
	}
	
.inside-right-sidebar aside:last-child {
	position: -webkit-sticky;
	position: sticky;
	top: 70px; /*Adjust position */
  }
}

• Pergi ke Appearance> Customize> Addtional CSS Tambahan.
• Salin dan Tempel kode CSS di atas
• Sesuaikan nilai di properti CSS teratas jika diperlukan.
• Tekan Tombol Publikasikan.

Jika ingin membuat sticky widget di awal sidebar (bukan di widget bagian akhir) caranya cukup menghapus kode aside:last-child

Copy Code

@media (min-width: 769px) {
.site-content {
  display: flex;
	}
	
.inside-right-sidebar {
  height: 100%;
	}
	
.inside-right-sidebar {
	position: -webkit-sticky;
	position: sticky;
	top: 70px; /*Adjust position */
  }
}

Kesimpulan

Jadi metode membuat sticky widget sidebar mana yang ingin Sobat coba?

Jika Sobat tidak terbiasa dengan kode tersebut (tanpa plugin), maka Sobat dapat menggunakan plugin Q2W3 Fixed Widget.

Secara pribadi, Aku telah menggunakan Kode CSS di blog androkit kami karena kami dapat memeriksa widget terakhir di sidebar kanan.