Mengganti Warna Address Bar dari Browser Chrome dan Lainnya

Anda pernah mengunjungi suatu blog atau situs ternama melalui browser seperti Chrome, lalu tiba-tiba Address Bar (atau juga sering disebut URL Bar) seketika berubah mengikuti tampilan tema dari blog atau web tersebut? Padahal blog atau web lainnya tidak seperti demikian, tetap putih seperti biasa. Menarik bukan? Nah, kali ini saya akan mengupas bagaimana cara memasangnya supaya warna dari Address Bar pengunjung website anda serasi dengan tampilan tema anda untuk anda yang mempunyai web atau blog dengan CMS WordPress self hosting dan juga blogger/blogspot.
Ternyata, sejak Google Chrome versi 39, diikuti berberapa browser lainnya seperti Opera, Safari dan lain-lain, menambahkan elemen meta yang baru dalam tag <head> , yaitu theme-color . Dengan elemen ini, anda menyesuaikan warna Address Bar Browser pengunjung mengikuti warna tema utama atau sesuka anda, tidak mesti harus sama dengan warna tema karena warna dari elemen ini sendiri bisa kita atur sesuka kita. Lumayan kan, bisa pamer ke teman-teman kalau website kita nambah keren :hammers . Saya juga sudah memasangnya pada website yang sedang anda kunjungi ini, meskipun elemen ini tidak berpengaruh jika anda menggunakan browser melalui PC, tetapi anda bisa melihatnya dengan menggunakan browser smartphone yang sebagian besar sudah support. Bagi yang penasaran, lihat saja penampakan berikut ini.
urlb_before01

Tampilan sebelum diganti

urlb_after01

Tampilan setelah diganti

Oke, sebelum kita lanjutkan bagaimana cara memasang di website atau blog kesayangan anda, baca dulu sedikit penjelasan dibawah. :)

Memasang pada Browser Chrome, Firefox OS, Opera dan lainnya

Jika anda memasang target pengunjung yang menggunakan browser yang saya sebutkan di atas, maka anda akan menggunakan tag meta dengan nama theme-color, seperti yang saya sebutkan diatas tadi:

Silahkan ganti  kode-warna-anda pada content dengan warna yang anda inginkan. Bisa menggunakan kode warna dalam bentuk hexadesimal atau dengan bahasa inggris yang disupport oleh standar HTML. Seperti contoh, saya menggunakan warna kuning dengan kode  #F0E17C supaya serasi dengan tema yang saya gunakan, maka saya isi dengan kode sebagai berikut:

Jika target pengunjung anda adalah smartphone berbasis Android atau turunannya, maka kode ini bisa anda pasang.

Memasang pada Browser Windows Phone

Ternyata, Windows Phone juga support mengganti warna Address Bar juga, seperti halnya Chrome dan kawan-kawan. Hanya saja, cara yang ditempuh sedikit berbeda. Anda perlu menambahkan tag meta dengan nama msapplication-navbutton-color  dengan cara yang sama seperti sebelumnya. Kode yang akan kita gunakan sebagai berikut:

Contoh, jika saya ingin memasang dengan kode warna #F0E17C  maka kodenya saya isi dengan:

Jika target pengunjung anda adalah smartphone berbasis Windows Phone seperti Nokia Lumia, maka kode ini bisa anda pasang.

Memasang pada Browser Safari (untuk iOS)

Lain halnya dengan Safari, browser bawaan iOS ini sebenarnya juga support seperti halnya browser-browser lainnya, namun dengan cara yang sedikit berbeda. Safari menggunakan tag meta dengan nama apple-mobile-web-app-status-bar-style  dengan pengisian warna yang tidak berbeda dari sebelumnya. Untuk memastikan warna tersebut bisa terpasang pada address bar pengunjung anda, tambahkan tag meta dengan nama apple-mobile-web-app-capable  dan isi content yes . Berikut adalah kodenya:

Jika saya ingin memasangnya dengan warna #F0E17C , maka kodenya saya isi dengan:

Jika target pengunjung anda pengguna iPhone maupun iPad, maka kode ini bisa anda pasang.

Persiapan!

Setelah kita mengetahui kode yang berbeda-beda pada tiap browser, maka saatnya mengaplikasikan ke website kesayangan anda! Sebagai informasi, ketiga tag yang berbeda tersebut bisa dipasang secara bersamaan. Jadi, jika ingin mengaplikasikan warna address bar ke semua browser yang saya sebut, maka tinggal pasang aja ketiga tag tadi. :D
Jika anda menggunakan WordPress, pilihlah tema yang pas dan direkomendasikan menggunakan warna yang pas. Jika anda menggunakan Blogger, sangat disarankan menggunakan template custom yang cocok untuk mobile. Karena kita tidak bisa mengedit tema mobile bawaan Blogger. Kalau belum, cari aja di Google.

Pemasangan pada WordPress

  1. Masuklah ke admin panel anda. Pilih icon Tampilan dan klik pada Penyunting/Edit.urlb_edit01
  2. Anda sekarang sudah di editor tema yang sedang terpasang pada blog anda. Karena kita akan mengubah sedikit pada header blog, maka pilihlah file header.php.urlb_edit02
  3. Tambahkan kode tag seperti yang saya jelaskan sebelumnya. Pada contoh, saya mengubah untuk semua browser yang support dengan kode berikut:

    Kode diletakan diantara tag <head> dan </head> . Jika sudah selesai, simpan hasil perubahan.urlb_edit03
  4. Selesai! Berikut hasilnya…urlb_after01

Pemasangan pada Blogger

Perhatian: Pastikan anda menggunakan template yang sudah support tampilan mobil, karena kita akan mengganti template standar dari blogger.

  1. Masuk ke Dashboard Blogger, Pilih Template. Pada Pilihan template yang mau diedit, pilih gerigi pada tampilan seluler.urlb_edit04
  2. Pada pilihan template seluler, pilih Khusus. Lalu klik Simpan.urlb_edit05
  3. Sama seperti langkah pada WordPress tadi, pastikan anda copas diantara <head>  dan </head> . Kode yang saya gunakan sama seperti langkah-langkah pada WordPress tadi.urlb_edit06
  4. Cek dan lihat hasil dari perubahan tadi menggunakan browser di SmartPhone anda.urlb_after02

Penutup

Semoga dengan tutorial ini, pengunjung website dan blog anda semakin betah menjelajahi website anda. Jika anda masih kebingungan, anda bisa sharing disini :)
Referensi lebih lanjut bisa anda baca di Stack Overflow.

Related Post

Mengubah tampilan IDE Lazarus seperti Delphi XE Sebelumnya anda sudah mengenal Lazarus? Jika belum, akan saya kenalkan sedikit tentang IDE yang mirip dengan Delphi 7 kebawah ini. Lazarus adalah IDE ...
Konversi MIDI menjadi MP3 atau WAV dengan Foobar 2... Anda pernah mengkoleksi lagu-lagu instrumen yang berbentuk MIDI atau bahkan membuatnya, tapi tidak bisa diputar di pemutar musik kesayangan anda denga...