Untuk mereka yang pakai Chrome yang ter-update di gawai dengan OS Android Kit-Kat keatas, mungkin ga ngeh kalau setiap akses Facebook, Beritagar, Detik atau Kompas dan bahkan web gw ini pun, bagian address bar warna nya selaras dengan tema website nya. Buat kalian yang ingin website wordpressnya (atau web lainnya) tampil seperti gambar di bawah ini:

Color theme browser

Tampilan browser akan berwarna mengikuti tema website.

Kalau kalian lihat diatas, tampilan browsernya berwarna sesuai warna tema dari masing masing website. Tanya: Emang tampilan browser kaya apa sih kalau ga sewarna? Contohnya seperti ini:

Tampilan Kaskus

 

Website Kaskus kalau di akses melalui Chrome, tampilan browsernya putih seperti biasa.

OK. Pertanyaan selanjutnya, sepenting apa sih browser berwarna kaya gitu?

Website populer berbasis wordpress sekarang banyak yang menggunakan theme yang mobile responsive. Artinya, tampilan website akan menyesuaikan besar layar  gadget visitornya. Tampilan lebih ringkas tapi tidak mengurangi kenyamanan dalam mengakses situs

Menyamakan warna seperti ini membuat pembacanya merasa menggunakan aplikasi bawaan dan hal ini bisa dimanfaatkan untuk membuat pengunjung yang pertama kali mengakses, bisa mengakses kembali situs tersebut yang artinya ini bisa mendongkrak penjualan kalau situs lo adalah e-Commerce.

Tapi inget, untuk tutorial ini hanya bisa dilihat di browser Google Chrome terbaru yang OS gadgetnya Kit Kat keatas.

Cara ubah warna address bar di mobile browser untuk selaras dengan WordPress mu

Address bar color in mobile browser for WordPress site

Simpel banget, tambahkan kode dibawah ini di dalam file header.php sebelum tag </head>;

<meta name="theme-color" content="#ff6600" />

Line ini adalah tag HTML meta tag yang digunakan Chrome oleh Google Chrome di Android untuk mengubah warna address bar di browser mobile lo. Didalam kode diatas terdapat Hex Code untuk menentukan warnanya. #ff6600 adalah salah satu contohnya dan warna ini disesuaikan dengan warna tema web lo. Gw yakin dibagian ini lo ga bingung buat nempatin meta tag di header web lo.

Tanya: Gimana caranya cara tahu hex code dari warna tertentu?

Jawab: Ada banyak cara buat liat Hex Code dari warna tertentu. Diantaranya adalah:

  1. Image Editing Software. Adobe Photoshop, Ms. Paint, Gimp bisa kasih tahu kode yang lo mau. Tinggal pilih warna nanti ada kotak informasi yang nunjukin Hex Code nya.
mspaint

Hex Code dari Ms. Paint

 

  1. HTML color picker tools
  2. Colorzilla. Kalau lo mau ambil contoh warna yang ada di web page orang lain, lo bisa pakai site ini untuk dapatin Hex Codenya.

Well, itu caranya, simpel kan? Kalau ada yang mau ditanyain, silahkan drop pertanyaan lo di komen.

Source