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.
Tampilan sebelum diganti
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:
<meta name="theme-color" content="kode-warna-anda" />
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:
<meta name="theme-color" content="#F0E17C" />
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:
<meta name="msapplication-navbutton-color" content="kode-warna-anda" />
Contoh, jika saya ingin memasang dengan kode warna #F0E17C maka kodenya saya isi dengan:
<meta name="msapplication-navbutton-color" content="#F0E17C" />
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:
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="kode-warna-anda" />
Jika saya ingin memasangnya dengan warna #F0E17C , maka kodenya saya isi dengan:
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="#F0E17C" />
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. 😀
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
- Masuklah ke admin panel anda. Pilih icon Tampilan dan klik pada Penyunting/Edit.
- 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.
- Tambahkan kode tag seperti yang saya jelaskan sebelumnya. Pada contoh, saya mengubah untuk semua browser yang support dengan kode berikut:
<!-- URL Theme Color for Chrome, Firefox OS, Opera and Vivaldi --> <meta name="theme-color" content="#F0E17C" /> <!-- URL Theme Color for Windows Phone --> <meta name="msapplication-navbutton-color" content="#F0E17C" /> <!-- URL Theme Color for iOS Safari --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="#F0E17C" />
Kode diletakan diantara tag <head> dan </head> . Jika sudah selesai, simpan hasil perubahan.
- Selesai! Berikut hasilnya…
Pemasangan pada Blogger
Perhatian: Pastikan anda menggunakan template yang sudah support tampilan mobil, karena kita akan mengganti template standar dari blogger.
- Masuk ke Dashboard Blogger, Pilih Template. Pada Pilihan template yang mau diedit, pilih gerigi pada tampilan seluler.
- Pada pilihan template seluler, pilih Khusus. Lalu klik Simpan.
- Sama seperti langkah pada WordPress tadi, pastikan anda copas diantara <head> dan </head> . Kode yang saya gunakan sama seperti langkah-langkah pada WordPress tadi.
- Cek dan lihat hasil dari perubahan tadi menggunakan browser di SmartPhone anda.
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.