Mengubah Warna Address Bar Website pada Browser Smartphone

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

Misalnya warna dominan website biru, maka warna address bar pada browser menjadi biru. Padahal warna address bar standar adalah berwarna putih.

Contohnya website yang warna address bar-nya mengikuti warna utama website adalah detik.com.

Beruntung ketika sedang menjelajahi website stackoverflow.com saya menemukan cara membuat warna address bar mengikuti warna utama website, dan berikut ini saya kasih contoh website saya berubah warna hijau.

app app

 

Chrome & Opera

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

<meta name="theme-color" content="#2aa387">

Windows Phone browser

Selain pada Chrome browser, cara ini juga dapat diterapkan pada browser Windows Phone namun dengan kode yang berbeda.

Kode untuk browser Windows Phone:

<meta name="msapplication-navbutton-color" content="#2aa387">

Safari browser (iOS)

Untuk browser Safari (iOS) caranya juga sama, namun kodenya berbeda dengan Chrome dan Windows Phone browser.

Kode untuk browser Safari:

<meta name="apple-mobile-web-app-status-bar-style" content="#2aa387">

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="#2aa387" /> <!-- URL Theme Color untuk Windows Phone --> 
<meta name="msapplication-navbutton-color" content="#2aa387" /> <!-- 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="#2aa387" /> 

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>
Baca Juga:  5 Tools Cara Kompres Foto Paling Mudah

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>
Avatar photo
Bang Yogi

Saya ingin melihat-lihat untuk mendapatkan ide segar dan kadang-kadang hanya duduk dan bekerja di depan komputer berjam-jam.

Articles: 528

Leave a Reply

Your email address will not be published. Required fields are marked *