oleh Rudi — 11 November 2018

Mengubah Warna Address Bar Website pada Browser Smartphone

Ketika mengunjungi sebuah website menggunakan smartphone, kadang kita menemukan fenomena warna address bar browser mengikuti warna utama website tersebut.

Misalnya warna dominan website hijau, maka warna address bar pada browser menjadi hijau. Padahal warna address bar standar adalah berwarna putih.

Contohnya website yang warna address barnya mengikuti warna website adalah blog ini.

Beruntung ketika sedang menjelajahi website stackoverflow.com saya menemukan cara membuat warna address bar mengikuti warna utama website.

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="#f77737">

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="#f77737">

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="#f77737">

Agar support semua browser

Agar warna address bar tersebut dapat support di berbagai macam browser baik Chrome, browser Windows Phone maupun Safari maka tambahkan ketiga kode meta tag tersebut pada template website.

Berikut kode lengkapnya:

Perhatikan kode #f77737 Itu adalah kode warna yang akan ditampilkan pada address bar browser, kita dapat menggantinya sesuai dengan keinginan.

Referensi:

- https://stackoverflow.com/questions/26960703/how-to-change-the-color-of-header-bar-and-address-bar-in-newest-chrome-version-o

Kategori: Blogging