Cara mengubah warna address bar website di browser mobile | Pernah tidak ketika Anda membuka sebuah website dengan menggunakan browser (Google Chrome) dari smartphone dan terlihat pada bagian address bar / header browser tersebut berubah menjadi warna tertentu.

Normannya berwarna putih abu-abu, namun pada beberapa website ada yang berwarna merah, hitam atau warna lainnya.

Warna header browser mobile tersebut ternyata bisa kita atur dengan menuliskan kode warnanya pada meta tag dibagian [head] di kode html.

Warna Address bar browser website

Warna tersebut bisa digunakan untuk penanda sebuah website, jika website tersebut dominan warna merah maka ada baiknya menyertakan warna merah untuk address bar / header browsernya.

Cara mengubah warna address bar website pada browser Chrome & Opera

Caranya sangat mudah, kita cukup menambahkan satu baris kode meta tag pada bagian [head] di kode html, seperti berikut ini.

<meta name="theme-color" content="#001b2a">

Warna #001b2a diatas adalah yang kami gunakan pada website jurnalweb.com ini, Anda bisa melihat perbedaannya dengan membuka website jurnalweb.com dari browser Google Chrome, atau Opera melalui smartphone Anda.

Cara mengganti warna address bar browser website di Windows Phone

Bukan hanya pada smartphone Android, namun Windows Phone juga sudah mendukung pergantian warna address bar ini, namun caranya sedikit berbeda, karena menggunakan meta tag dengan nama msapplication-navbutton-color.

Maka kodenya adalah sebagai berikut

<meta name="msapplication-navbutton-color" content="KODE_WARNA_AND" />

Misalnya

<meta name="msapplication-navbutton-color" content="#001b2a" />

Cara mengganti warna address bar website pada browser Safari

Pada Browser Safari caranya juga berbeda, karena dua baris meta tag, dengan nama apple-mobile-web-app-status-bar-style dan apple-mobile-web-app-capable, untuk baris yang kedua cukup mengisi dengan yes saja.

Contoh kodenya seperti ini

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="#001b2a" />

—

Kode lengkapnya

Jadi kode lengkap yang bisa Anda taruh di bagian head pada kode HTML website agar bisa support berbagai browser tersebut adalah sebagai berikut.

<!-- URL Theme Color untuk Chrome, Firefox OS, Opera dan Vivaldi -->
<meta name="theme-color" content="#001b2a" />
<!-- URL Theme Color untuk Windows Phone -->
<meta name="msapplication-navbutton-color" content="#001b2a" />
<!-- URL Theme Color untuk iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="#001b2a" />

Penerapan di WordPress

  1. Untuk pengguna WordPress cukup masuk ke menu Appearance -> Editor.
  2. Kemudian pilih Theme Header di bagian kanan, lalu ketik kode diantara tag <head> dan </head>

Penerapan di Blogger

  1. Untuk pengguna Blogger / Blogspot, masuk ke menu Dashboard Blogger, pilih Template. Pada bagian template, cari gambar gear (gerigi) pada tampilan seluler.
  2. Pada opsi pilihan template seluler, pilih Khusus. Lalu klik Simpan
  3. Kemudian masukan kode tersebuat diantara tag <head> dan </head>

Hasil / Demo

Untuk hasilnya Anda bisa membuka website Jurnalweb.com pada browser Google Chrome yang ada di smartphone Anda.

Artikel Lain:

redesign websiteTips Mengganti Theme Web Untuk Menambah Pengunjung google maps embed codeCara Mendapatkan Kode Embed Google Maps pdf htmlCara Menampilkan File PDF di Website dengan HTML show hide passwordCara Show Hide Password dengan Javascript sliding menu css htmlTutorial Cara Membuat Sliding Menu dengan CSS dan HTML tabel responsiveCara Membuat Tabel Responsive Dengan CSS dan HTML efek salju html5Membuat Efek Salju dengan HTML5 Canvas dan Javascript background video html5Cara Membuat Background Video Full-Screen dengan HTML5 & Jquery kunci konten website jqueryKunci Konten Web Agar Tidak Bisa di Edit di Inspect Element / Developer Tool background slideshow dengan jqueryCara Membuat Background Slideshow dengan Jquery user friendly website10 Ciri Website User Friendly Universitas Padjajaran UNPAD15 Website Universitas di Indonesia yang dibuat dengan WordPress