MasRud.com
11 November 2018 / Blogging

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 hijau, maka warna address bar pada browser menjadi hijau. Padahal warna address bar standar adalah berwarna putih.

Contohnya website yang warna address barnya mengikuti warna website adalah blog ini.

Beruntung ketika sedang menjelajahi website stackoverflow.com saya menemukan cara membuat warna address bar mengikuti warna utama website.

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="#f77737">

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="#f77737">

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="#f77737">

Agar support semua browser

Agar warna address bar tersebut dapat support di berbagai macam browser baik Chrome, browser Windows Phone maupun Safari maka tambahkan ketiga kode meta tag tersebut pada template website.

Berikut kode lengkapnya:

Perhatikan kode #f77737 Itu adalah kode warna yang akan ditampilkan pada address bar browser, kita dapat menggantinya sesuai dengan keinginan.

Referensi:

- https://stackoverflow.com/questions/26960703/how-to-change-the-color-of-header-bar-and-address-bar-in-newest-chrome-version-o

Tutorial Membuat Format Rupiah pada Input HTML

Mengatasi Dashboard WordPress Blank Setelah Update

Membuat Format Rupiah dengan PHP

Trik Minify Kode HTML Menggunakan PHP

Membuat Tombol Share dan Chat WhatsApp pada Website

Terbaru ☺️

Tutorial Installasi Postman pada Ubuntu/Linux Mint

Membuat Format Tanggal Ala Instagram dengan PHP

Tutorial Kirim Email dengan SMTP SendGrid pada CodeIgniter

Disqus Comments