Cara mengubah warna address bar website di browser mobile | Pernah tidak ketika Anda membuka sebuah website dengan menggunakan browser (Google Chrome) dari smartphone dan terlihat pada bagian address bar / header browser tersebut berubah menjadi warna tertentu.
Normannya berwarna putih abu-abu, namun pada beberapa website ada yang berwarna merah, hitam atau warna lainnya.
Warna header browser mobile tersebut ternyata bisa kita atur dengan menuliskan kode warnanya pada meta tag dibagian [head] di kode html.
Warna tersebut bisa digunakan untuk penanda sebuah website, jika website tersebut dominan warna merah maka ada baiknya menyertakan warna merah untuk address bar / header browsernya.
Cara mengubah warna address bar website pada browser Chrome & Opera
Caranya sangat mudah, kita cukup menambahkan satu baris kode meta tag pada bagian [head] di kode html, seperti berikut ini.
Warna #001b2a diatas adalah yang kami gunakan pada website jurnalweb.com ini, Anda bisa melihat perbedaannya dengan membuka website jurnalweb.com dari browser Google Chrome, atau Opera melalui smartphone Anda.
Cara mengganti warna address bar browser website di Windows Phone
Bukan hanya pada smartphone Android, namun Windows Phone juga sudah mendukung pergantian warna address bar ini, namun caranya sedikit berbeda, karena menggunakan meta tag dengan nama msapplication-navbutton-color.
Maka kodenya adalah sebagai berikut
Misalnya
Cara mengganti warna address bar website pada browser Safari
Pada Browser Safari caranya juga berbeda, karena dua baris meta tag, dengan nama apple-mobile-web-app-status-bar-style dan apple-mobile-web-app-capable, untuk baris yang kedua cukup mengisi dengan yes saja.
Contoh kodenya seperti ini
—
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.
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>
Hasil / Demo
Untuk hasilnya Anda bisa membuka website Jurnalweb.com pada browser Google Chrome yang ada di smartphone Anda.
Terimakasih atas tutorialnya. Sangat membantu dan sudah saya terapkan di blog saya. Ternyata hanya menambahkan meta, kirain kodenya banyak :D
Akhirnya ni ketemu,Memang bagus tuh ganti warna pas di url supaya blog terlihat lebih menarik
kak, boleh salin materinya gak buat di blog?
ga semua kok, yang penting pentingnya aja, ntar dikasih refrensi :3
boleh ya kak hehe ^^)/
terima kasih.
Jangan karena akan terjadi duplikasi data di internet, kalau mau jadikan referensi tulisan saja, atau kutipan lalu berikan sumber. Bukan 100% copypaste
Mantap guns, sudah dicoba
Gan ini mempengaruhi kecepatan website gak ya? Terima kasih
Tidak kok
Terima kasih banyak untuk Jurnalweb, saya sudah mempraktekkan tips nya. Hasilnya keren!
Ini dia yang di cari-cari, saya pikir cuma buat template AMP saja yang bisa di kasih warna begini, izin coba praktek di blog saya gan. Thank master ilmunya.
mantap, ini yang saya cari hehe :)
btw, ini ga bikin web jadi lemot kan mas ? ._.
Bagaimana dengan ini min?
saya coba tarun di atas kode tapi error gak bisa di save?
Makasih kk, jadi keren skrng blognya hoho
ini dia tutorial yg ane cari gan. makasih udah share. sukses buat bloggingnya. salam hangat..
izin share informasinya ya gan. hatur nuhun..
Joss.. udah saya praktekin
Thanks kak,,
sukses petunjuknya,, sudah saya terapin di web,, hehe
Thanks so much