Posted on

Membuat Menu Sticky WordPress Untuk Meningkatkan Konversi Adsense

Membuat Menu Sticky WordPress

wpJakarta.Com – Membuat Menu Sticky WordPress Untuk Meningkatkan Konversi Adsense. Pada artikel kami sebelumnya 5 Cara Memaksimalkan Google Adsense. Salah satu cara memaksimalkan revenue adsense adalah dengan membuat menu sticky wordpress dan anda akan menemui kaitannya dengan meningkatkan konversi adsense.

Membuat menu sticky WordPress dan kaitannya dengan meningkatkan konversi adsense ?

Apa itu sticky menu ? Bagaimana cara membuat menu sticky WordPress. Dan apa hubungannya membuat menu sticky WordPress dengan meningkatkan konversi adsense ?Mungkin sekilas tidak ada hubungan antara membuat menu sticky WordPress dengan meningkatkan konversi adsense. Kebanyakan kita berfikir bahwa sticky menu mungkin sekedar mempercantik tampilan website. Ternyata, ada hal lebih penting dari sebuah sticky menu. Adalah dapat menonjolkan dari fleksibilitas website tersebut.

Bukan tanpa alasan, menu sticky bisa membuat user atau pengunjung website tidak cepat-cepat meninggalkan website anda setelah selesai membaca suatu artikel yang anda buat. Itu berarti sticky menu dapat menambah pengalaman positif pengunjung website anda. Masih belum nyambung antara pengalaman positif pengunjung website dengan meningkatkan konversi adsense ? Memang memberikan fleksibilitas pada website yang anda kelola tidak serta merta meningkatkan konversi atau pendapatan adsense meningkat “sekian rupiah”.

Meningkatkan konversi adsense dengan multiple logic

Tetapi logikanya ketika pengunjung berlama-lama di website anda, maka akan lebih banyak iklan yang tampil. Itu jika satu orang, bagaimana jika trafik website anda, misalnya, 500 orang perhari. jika 70% dari 500 orang tersebut betah untuk “berlama-lama”. Berapa iklan yang akan muncul dalam kurun waktu satu minggu ? atau satu bulan ? Maka dapat di pastikan tipe iklan CPM google adsense juga pasti meningkat.

Benahi website anda dan biarkan google yang mengatur iklannya

Belum lagi dari tipe iklan CPC. Ingat bahwa google sangat “piawai” dalam menempatkan iklan untuk pengunjung website anda. Iklan google adsense yang muncul adalah yang sedang di cari oleh user tersebut bukan ? Ketika misalnya anda sedang mencari sebuah produk melalui google search, iklan yang anda lihat di website yang anda kunjungi adalah yang berkaitan dengan yang anda cari sebelumnya.

Begitu juga dengan iklan adsense yang di tayangkan di website anda, adalah iklan yang memang sedang di cari oleh pengunjung website anda sendiri. Intinya google memang ingin website anda tampil sempurna baik pada segi kecepatan (pagespeed) maupun fleksibilitas (user friendly, mobile friendly). Ketika semuanya sudah sesuai dengan kriteria google maka biarkan google yang akan mengatur penempatan iklannya di website anda.

Meningkatkan konversi adsense dengan memaksimalkan beberapa bagian website

Selain membuat menu sticky WordPress. Ada beberapa hal lagi yang dapat dilakukan untuk meningkatkan konversi adsense. Di antaranya dengan meningkatkan atau membuat loading website anda benar-benar dalam batas yang bisa di optimalkan. Tentang bagaimana untuk memaksimalkan kecepatan loading website, artikel kami berikut, 20 cara ampuh meningkatkan performa website akan dapat membantu anda. Selain memaksimalkan menu navigasi website anda. Bagian sidebar juga dapat di maksimalkan untuk memberikan pengalaman positif pengguna dan meningkatkan konversi adsense (pendapatan google adsense anda). Kunjungi artikel kami berikut tentang bagaimana memaksimalkan sidebar website WordPress untuk meningkatkan konversi adsense.

Tips-trik WordPress lainnya

Kami banyak menulis tentang artikel, tips-trik dan tutorial WordPress. Yang di tulis berdasarkan masalah yang kami temui ketika sedang mengkustomisasi website kami sendiri. Kebanyakan di dapatkan dari sumber lain dengan penyesuaian pada skrip tema website yang kami gunakan.

Membuat menu sticky WordPress secara default pada tema website premium

Kembali ke topik utama tentang bagaimana membuat menu sticky WordPress. Jika anda menggunakan tema website premium, maka anda biasanya tidak perlu lagi untuk membuat menu sticky WordPress. Itu karena tema website WordPress premium kebanyakan sudah memiliki fitur sticky menu secara default, atau sudah ada “dari sononya”. Dari pengaturan customizer biasanya anda hanya cukup mengaktifkan atau menonaktifkan melalui sebuah “toggle”.

Jika memang anda menggunakan tema website yang memiliki fitur tersebut secara default. Maka kami sarankan untuk mengaktifkannya sepanjang waktu. Sticky menu akan membuat konversi atau session pengunjung website anda menjadi lebih baik. Bonus lainnya jika anda menggunakan tema website premium adalah jika menu tersebut sudah mendukung mega menu. Jika ya, aktifkan kemampuan atau fitur mega menu tersebut. Mega menu juga dapat memaksimalkan sesi kunjungan pengguna di website.

Namun anda harus pintar-pintar mengatur menu apa yang ingin anda tempatkan pada menu navigasi. Selain kategori atau halaman, tempatkan juga artikel-artikel unggulan anda pada menu navigasi. Maksimalkan semua lokasi menu yang ada. Biasanya tema website WordPress bisa memiliki 3 lokasi menu (primary, secondary dan tertiary), bahkan 5 lokasi plus untuk menempatkan alamat sosial media (topbar dan footer). memaksimalkan semua lokasi menu navigasi secara benar juga akan dapat meningkatkan konversi adsense anda.

Membuat menu sticky WordPress menggunakan menu navigasi yang ada

Jikapun tema website yang digunakan tidak memiliki fitur sticky menu. Maka anda dapat membuat menu sticky WordPress, hanya dengan menambahkan beberapa kode CSS saja. Membuat menu sticky WordPress dengan menggunakan menu di header yang ada. Atau tergantung selector CSS nya anda bisa menambahkan kode CSS sebagai berikut untuk membuat posisi header menjadi tetap (fixed) meskipun user melakukan scroll. Untuk tema website yang kami gunakan (storefront) secara default selector yang di maksud adalah #masthead. Anda bisa menyesuaikan selector tersebut dengan selector dari tema website yang anda gunakan.

/* sesuaikan selektor di tema masing-masing */
#masthead {
		position: fixed;
		top: 0;
		width: 100%;
}

Membuat menu sticky WordPress menggunakan page builder

Lain halnya juga dengan tema website versi gratis. Tema website WordPress versi gratis memang biasanya cocok untuk di gunakan sebagai blogging platform karena biasanya berukuran ringan. Namun tema website versi gratis biasanya terbatas dalam banyak hal. Termasuk menu sticky, mega menu bahkan sidebar biasanya masuk ke dalam objek terbatas tema website versi gratis. namun anda bisa menggunakan plugin page builder semisal elementor untuk membuat menu sticky WordPress.

Dengan plugin page builder, membuat menu sticky WordPress di bagian header menjadi lebih mudah. Namun biasanya hal tersebut dapat dilakukan pada versi plugin premium. Versi plugin pagebuilder free mungkin memiliki fitur terbatas dan tidak dapat membuat sticky menu. Jika anda menggunakan plugin page builder elementor (versi pro), artikel ini bisa anda ikuti untuk membuat sticky menu. Elementor Team Writes: How to Create a Shrinking Sticky Header With Elementor.

Membuat menu sticky WordPress menggunakan plugin

Jika tema website yang anda gunakan tidak memiliki sticky menu, juga bukan yang harus di khawatirkan. Ingat bahwa jika tema website tidak memiliki suatu fitur, maka ada plugin yang bisa melakukannya. Plugin versi premium tentunya memiliki fitur yang lebih banyak atau membuat tampilan menu sticky menjadi lebih baik. Dan tentu saja itu akan berpengaruh positif terhadap pengalaman pengguna di website anda. Namun banyak juga versi plugin gratis yang bisa anda install. Beberapa plugin yang bisa di coba adalah sebagai berikut.

Membuat menu sticky WordPress tanpa plugin (HTML + CSS)

Tanpa plugin, atau jika pun tema website yang anda gunakan tidak memiliki fitur sticky menu. Tentu kita bisa membuat menu sticky WordPress hanya dengan menggunakan beberapa baris kode HTML dan CSS. Kode HTML di perlukan untuk membuat element <div> menu utama dan sub menunya. Sedangkan CSS akan memberikan posisi fixed juga memberikan style pada element HTML tersebut, seperti warna background, warna font bahkan box-shadow.

Tips-trik WooCommerce lainnya

Kami juga banyak menulis artikel, tips-trik, tutorial WooCommerce dan kustomisasi tema website storefront. Artikel yang juga kami tulis karena masalah yang kami temui dan kustomisasi yang kami lakukan. Lihat selengkapnya artikel-artikel yang di tag sebagai “storefront”.

Membuat menu sticky WordPress dengan membuat element HTML terlebih dulu

Tips-trik membuat menu sticky WordPress yang kami buat ini bersifat sangat sederhana. Tergantung tema website yang anda gunakan tentu anda dapat menyesuaikannya sendiri agar terlihat “look good”. Terutama pada kode CSS, di sini kami membuat menu baru sticky pada tema website “storefront”. Kode HTML berikut kami tambahkan pada widget html di bawah header.

<div class="menu-baru-sticky">
<div class="dropdown">
<button class="dropbtn">Menu Utama 1 »</button>
<div class="dropdown-content">
<a href="">Sub Menu Utama 1-1</a>
<a href="">Sub Menu Utama 1-2</a>
<a href="">Sub Menu Utama 1-3</a>
</div>
<div class="dropdown1">
<button class="dropbtn1">Menu Utama 2 »</button>
<div class="dropdown-content1">
<a href="">Sub Menu Utama 2-1</a>
<a href="">Sub Menu Utama 2-2</a>
<a href="">Sub Menu Utama 2-3</a>
</div>
</div>
<div class="dropdown2">
<button class="dropbtn2">Menu Utama 3 »</button>
<div class="dropdown-content2">
<a href="">Sub Menu Utama 3-1</a>
<a href="">Sub Menu Utama 3-2</a>
<a href="">Sub Menu Utama 3-3</a>
</div>
</div>
</div>

Membuat menu sticky WordPress dengan menambahkan kode css

Berikan stylesheet dengan kode CSS untuk selector element html yang sudah di buat. Terkait properties kode CSS yang di berikan, di perlukan penyesuaian tergantung dari tema website yang anda gunakan.

.menu-baru-sticky, .dropdown-content, .dropdown-content1, .dropdown-content2 {
	box-shadow:0 1px 2px 0 rgba(60,64,67,0.3), 0 2px 6px 2px rgba(60,64,67,0.15);
}

/* div-menu-baru-utama */
.menu-baru-sticky {
	display:block;
	position:fixed;
	top:0;
	width:100%;
	padding-bottom:0;
	background-position:50%;
}

/* menu baru utama */
.dropdown, .dropdown1, .dropdown2 {
	display:inline-block;
	margin-bottom:0.617924em;
}

/* menu-utama */ 
.dropdown-content a, .dropdown-content1 a, .dropdown-content2 a,
.dropbtn, .dropbtn1, .dropbtn2 {
	padding:1em .875em;
}

/* menu-utama-hover */
.menu-baru-sticky,
.dropdown-content, .dropdown-content1, .dropdown-content2,
.dropbtn, .dropbtn1, .dropbtn2,
.dropdown:hover .dropbtn, .dropdown1:hover .dropbtn1, .dropdown2:hover .dropbtn2,
.dropdown-content a, .dropdown-content1 a, .dropdown-content2 a {
	background-color:#fff;
	color:#000;
}

/* z-index-sticky-menu */
.menu-baru-sticky, .dropdown-content, .dropdown-content1, .dropdown-content2 {
	z-index: 1;
}

/* sub-menu */
.dropdown-content, .dropdown-content1, .dropdown-content2 {
  display: none;
  position: absolute;
	min-width: 160px;
}

/* sub-menu-hover */
.dropdown:hover .dropdown-content, .dropdown1:hover .dropdown-content1, .dropdown2:hover .dropdown-content2,
.dropdown-content a, .dropdown-content1 a, .dropdown-content2 a {
	display:block;
}

Artikel lainnya

Artikel selain bikin website WordPress dan WooCommerce. Kami juga suka menulis tentang hal-hal umum selain cara bikin website WordPress WooCommerce. Tentang dunia usaha, komoditas, produktifitas, kreatifitas dan hobi.

Membuat menu sticky WordPress dengan menambahkan kode css

Tips-trik membuat menu sticky WordPress di artikel ini bersifat sangat sederhana. Kami hanya memberikan dasar bagaimana membuat element di dalam <div> html dan tetap tampil (fixed) meskipun user melakukan scroll ke bawah. Namun tidak membuatnya responsif pada tampilan layar yang lebih kecil (Handphone atau tablet). Lihat artikel kami lainnya untuk membuat sticky menu responsive. Dimana kita bisa membuat variasi yang responsif (hamburger atau toggle) agar menu bisa tampil fit di halaman yang lebih kecil.