Mengubah Warna Address Bar Website pada Browser Smartphone

Kategori: Blogging

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

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

Contohnya website yang warna address barnya mengikuti warna website adalah www.sribulancer.com.

Beruntung ketika sedang menjelajahi website stackoverflow.com saya menemukan cara membuat warna address bar mengikuti warna utama website (Saya lupa url sumbernya).

Google Chrome & Opera

Caranya sangat mudah, cukup menambahkan satu baris kode meta tag pada bagian tag <head> yang ada dalam template website.

Kodenya seperti ini.

<meta name="theme-color" content="#f77737">

Windows Phone Browser

Selain pada browser Android, 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="#f77737">

Safari Browser (iOS)

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

Jika pada browser Google Chrome Andorid maupun browser Windows Phone menggunakan satu baris kode meta tag, maka pada browser Safari iOS menggunakan dua baris kode meta tag.

Kode untuk browser Safari iOS.

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

Agar Support Semua Browser

Agar warna address bar tersebut dapat support di berbagai macam browser baik Google Chrome Android, browser Windows Phone maupun Safari iOS maka tambahkan kode lengkap meta tag tersebut.

Berikut kode lengkapnya.

<!-- Untuk Google Chrome, Firefox & Opera -->
<meta name="theme-color" content="#f77737">
<!-- Untuk Windows Phone -->
<meta name="msapplication-navbutton-color" content="#f77737">
<!-- Untuk Safari iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f77737">

Perhatikan bagian kode #f77737. Itu adalah kode warna yang digunakan pada halaman depan blog ini, Anda dapat menggantinya sesuai dengan keinginan.

Penerapan pada WordPress

Kode meta tag tersebut juga dapat diterapkan pada website yang dibuat dengan WordPress (selfhosted). Caranya seperti ini.

  • Silakan login ke halaman admin WordPress.
  • Kemudian buka menu Appearance lalu pilih Editor.
  • Kemudian cari file header.php (Theme Header) pada bagian sebelah kanan.
  • Lalu tambahkan kode meta tag lengkap pada bagian antara tag <head> dan tag </head>.
  • Kemudian simpan (tekan tombol Update file).

Penerapan pada Blogger/Blogspot

Cara menerapkan pada blog yang dibuat dengan blogger/blogspot.

  • Login ke halaman dashboard blogger.
  • Kemudian pilih Tema.
  • Lalu pada bagian Seluler tekan ikon Gear (gerigi).
  • Setelah itu akan muncul pop up pilih tema seluler. Pada bagian ini silakan pilih "Tidak. Tampilkan tema desktop di perangkat seluler" lalu simpan.
  • Langkah berikutnya silakan pilih Edit HTML.
  • Lalu tambahkan kode meta tag lengkap pada bagian antara tag <head> dan tag </head>.
  • Kemudian Simpan Tema.

Selain pada WordPress (selfhosted), Blogger/Blogspot dan HTMLy (platform yang digunakan blog ini) cara di atas juga dapat diterapkan pada platform website lainnya. Dengan syarat memiliki akses ke kode sumber template website.

Menarik untuk disimak: Cara Mengatasi "Briefly Unavailable For Scheduled Maintenance Check back In a Minute" pada WordPress

Diposting pada Apr 06, 2017

Simak Juga: