Mengubah warna address bar website pada browser smartphone

Warna address bar website

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

Contohnya adalah website sribulancer.com.

Ketika kita membuka website sribulancer.com maka warna address bar browser yang biasanya hanya putih atau hitam berubah menjadi biru sama seperti warna utama website sribulancer.com.

Sangat menarik bukan?

Untuk membuat hal demikian tidaklah sulit, kita hanya perlu menambahkan sedikit kode tag html ke dalam template website.

Chrome & Opera

Untuk mengubah warna address bar pada browser Chrome dan Opera, salin kode di bawah ini dan letakkan di antara tag <head> dan </head> pada template website lalu simpan.

<meta name="theme-color" content="#3b82f6"/>

Safari browser (iOS)

Selain pada Chrome, cara ini juga dapat diterapkan pada browser Safari iOS namun dengan kode yang sedikit berbeda.

Kode untuk browser Safari:

<meta name="apple-mobile-web-app-status-bar-style" content="#3b82f6"/>

Windows Phone browser

Untuk browser Windows Phone caranya juga sama. Berikut kodenya:

<meta name="msapplication-navbutton-color" content="#3b82f6"/>

Semua browser

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

Berikut kode lengkapnya:

<!-- Untuk Chrome & Opera -->
<meta name="theme-color" content="#3b82f6"/>
<!-- Untuk Safari iOS -->
<meta name="apple-mobile-web-app-status-bar-style" content="#3b82f6"/>
<!-- Untuk Windows Phone -->
<meta name="msapplication-navbutton-color" content="#3b82f6"/>

Kode #3b82f6 adalah kode warna yang akan ditampilkan pada address bar browser, kita dapat menggantinya sesuai dengan keinginan.