Hi Web Developer! kembali lagi bersama dengan guru design. Kali ini guru design akan berbagi tutorial cara nengubah warna address bar pada browser mengikuti warna website. Kalian pasti pernah melihat di saat mebuka website tertentu di smartphone kalian lalu ada yang beda, ternyata warna address bar nya ikut berubah, contohnya pada website guru design seperti dibawah ini.
Normalnya pada setiap browser hanya berwana putih atau abu-abu saja, jika ini yang kalian inginkan maka ok lanjut ke tutorial:
Pertama
Buka sorce code HTML kalian baik dari blogger, wordpress ataupun framework lainnya kemuadian cari tag head pembuka <head> atau head penutup </head>. Jika sudah ketemu lanjut ke tahap berikutnya.Kedua
Tambahkan tag meta berikut diantara head pembuka <head> dan head penutup </head><!-- Support Google Chrome, Firefox & Opera -->
<meta name="theme-color" content="Isi-dengan-kode-warna"/>
<!-- Support Windows Phone -->
<meta name="msapplication-navbutton-color" content="Isi-dengan-kode-warna"/>
<!-- Support Safari iOS -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="Isi-dengan-kode-warna"/>Untuk kode warna bisa pilih disini
Penerapan
<head>
<!-- Support Google Chrome, Firefox & Opera -->
<meta name="theme-color" content="#039be5"/>
<!-- Support Windows Phone -->
<meta name="msapplication-navbutton-color" content="#039be5"/>
<!-- Support Safari iOS -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="#039be5"/>
</head>Terakhir
Simpan source code kalian kemudian test di buka di smartphone masing-masing.Sekian semoga bermanfaat terimakasih.