Cara Mengubah Warna Address Bar Browser Sesuai Warna Blog

Rafiqi, S.Kom.
Rafiqi, S.Kom.
Juli 19, 2024
2
Tutorial Mengubah Warna Address Bar Browser Sesuai Dengan Warna Website
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.

Tutorial Mengubah Warna Address Bar Browser Sesuai Dengan Warna Website


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.
Rafiqi, S.Kom.