Cara Membuat Warna pada Address Bar dan Toolbar Chrome Android

GULANGGULING.COM | KODING – Wuuuiiih akhirnya nulis babagan koding lagi. Kali ini mau berbagi sekalian mencatat soal ilmu atau cara membuat browser Chrome berwarna jika mengakses website kita.

Semenjak Android memasuki versi Lollipop dan Chrome diatas versi 39, kita sudah diperbolehkan mengubah style warna dari address bar browser dan toolbar dari sistem Android itu sendiri.

Jika anda sering mengakses situs tertentu dengan Google Chrome di Android, maka kadang anda akan melihat beberapa situs tampil dengan warna address bar dan toolbar yang seragam dengan situs mereka. Nah pertanyaannya bagaimanakah cara membuat website atau situs kita memiliki kemampuan untuk mengganti warna dari address bar dan toolbar tersebut?

Google Developers merilis bahwa fitur ini dapat kita gunakan dan pasang di setiap website untuk mengubah warna style tersebut. Caranya cukup mudah. Untuk mengubah warna address bar dan toolbar pada browser google chrome kita cukup menambahkan kode meta yang bernama “theme-color” pada header seperti code dibawah :

<meta name="theme-color" content="#4285f4">

Nah, dengan kode diatas kita sudah dapat melihat tampilan website kita mampu membuat warna style yang berbeda pada browser Chrome.

Pengaturan Meta Theme color ini ternyata tidak hanya berlaku pada Android, namun juga berlaku pada sistem Windows Phone dan IOS Apple, walaupun ada script atau kode tersendiri yang harus kita tambahkan lagi. Theme color juga tidak hanya untuk browser Chrome, browser seperti Firefox OS, Safari, Internet Explorer and Opera juga sudah dibekali kemampuan untuk mengenali meta tag ini.

Untuk dapat mengatur theme color pada windows phone dan IoS kita hanya perlu menambahkan meta tag lagi pada header seperti berikut:

<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Jika ingin lengkap, maka masukan saja semua tag meta theme color dibawah ini pada header website anda, maka niscaya akan bewarna disetiap OS..Hehehe.

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

 

Sekian dulu dan semoga bermanfaat.

Salam!

 

Source |  Bacaan Soal Koding lainnya disini