Ketika mengunjungi sebuah website menggunakan smartphone, kadang kita menemukan fenomena warna address bar browser mengikuti warna utama website tersebut.
Misalnya warna dominan website biru, maka warna address bar pada browser menjadi biru. Padahal warna address bar standar adalah berwarna putih.
Contohnya website yang warna address bar-nya mengikuti warna utama website adalah detik.com.
Beruntung ketika sedang menjelajahi website stackoverflow.com saya menemukan cara membuat warna address bar mengikuti warna utama website, dan berikut ini saya kasih contoh website saya berubah warna hijau.
Chrome & Opera
Untuk mengubah warna address bar pada browser Chrome, tambahkan kode di bawah ini pada template website dan letakkan di antara tag <head>
dan </head>
lalu simpan.
<meta name="theme-color" content="#2aa387">
Windows Phone browser
Selain pada Chrome browser, cara ini juga dapat diterapkan pada browser Windows Phone namun dengan kode yang berbeda.
Kode untuk browser Windows Phone:
<meta name="msapplication-navbutton-color" content="#2aa387">
Safari browser (iOS)
Untuk browser Safari (iOS) caranya juga sama, namun kodenya berbeda dengan Chrome dan Windows Phone browser.
Kode untuk browser Safari:
<meta name="apple-mobile-web-app-status-bar-style" content="#2aa387">
Kode lengkapnya
Jadi kode lengkap yang bisa Anda taruh di bagian head pada kode HTML website agar bisa support berbagai browser tersebut adalah sebagai berikut.
<!-- URL Theme Color untuk Chrome, Firefox OS, Opera dan Vivaldi --> <meta name="theme-color" content="
#2aa387
" /><!-- URL Theme Color untuk Windows Phone --> <meta name="msapplication-navbutton-color" content="
#2aa387
" /> <!-- URL Theme Color untuk iOS Safari --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="#2aa387
" />
Penerapan di WordPress
- Untuk pengguna WordPress cukup masuk ke menu Appearance -> Editor.
- Kemudian pilih Theme Header di bagian kanan, lalu ketik kode diantara tag <head> dan </head>
Penerapan di Blogger
- Untuk pengguna Blogger / Blogspot, masuk ke menu Dashboard Blogger, pilih Template. Pada bagian template, cari gambar gear (gerigi) pada tampilan seluler.
- Pada opsi pilihan template seluler, pilih Khusus. Lalu klik Simpan
- Kemudian masukan kode tersebuat diantara tag <head> dan </head>