Saat Anda mengujungi situs web populer seperti Facebook dan situs populer lainnya melalui browser mobile atau smartphone Anda, coba perhatikan pada bagian Address Bar nya, maka Anda akan melihat Address Bar mempunyai warna yang sama dengan warna dasar dari desain website tersebut atau sesuai dengan warna merek yang dimiliki oleh situs web tersebut, misal saat Anda mengakses facebook melalui browser di smartphone Anda maka pada Address Bar akan berwarna biru.

Lalu bagaimana jika Anda ingin mengganti warna address bar di web browser mobile atau smartphone Anda agar sesuai dengan tema website atau blog WordPress Anda? Caranya cukup mudah, karena pada artikel ini, saya akan menunjukkan cara untuk mengganti warna address bar di browser mobile agar sesuai dengan warna tema situs WordPress Anda.

Baca : 30+ Font Pilihan Terbaik untuk Desain [Gratis]

Mengapa Perlu Mengganti Warna Pada Address Bar di Mobile Browser?

Sejak smartphone mulai banyak digunakan oleh semua orang dan semakin mudahnya mengakses internet melalui mobile menjadikan para pengembang tema WordPress membuat desain tema yang mendukung dengan berbagai ukuran perangkat yang sekarang disebut dengan desain responsive. Dengan memiliki tema yang responsif membuat situs web Anda menjadi terlihat lebih profesional dan memudahkan pengguna saat mengakses situs melalui berbagai perangkat yang memiliki ukuran layar berbeda-beda. Namun, kebanyakan desain tema responsive WordPress masih terlihat dan terasa seperti sebuah website bukan aplikasi.

Dengan mengganti warna Address Bar situs WordPress Anda, ini akan memberikan rasa seperti Anda memiliki aplikasi mobile khusus untuk situs web Anda. Hal ini selain akan meningkatkan pengalaman pengguna, juga akan menjadikan situs Anda terlihat lebih profesional lagi dan terlihat elegan. Saya juga sudah menerapkan cara ini pada blog centerklik, saya mengganti kode warna Address bar mobile browser seperti yang terlihat pada gambar screenshot dibawah ini. Atau Anda bisa mencoba mengakses blog centerklik melalui browser di perangkat android Anda.

 Mengganti Warna Address Bar pada Mobile Browser pada Theme WordPress

Seperti yang saya bilang di awal tadi untuk melakukan perubahan warna address bar ini cukuplah mudah, Anda hanya perlu menambahkan tiga baris kode ini dalam tema Anda, lebih tepatnya di file header.php sebelum tag penutup .

Untuk browser Chrome, Firefox And Opera

<meta name=”theme-color” content=”Hex Color Code” />

contoh :

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

Masukkan kode warna hex Anda di bagian ‘Content’ dari cuplikan kode.

Untuk Windows Phone

<meta name="msapplication-navbutton-color" content="#00e7d9">

Untuk IOS Safari 

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

Untuk mengubah warna address bar di browser mobile. Bagian content memiliki kode hex untuk warna yang ingin Anda gunakan sebagai warna tema.

Cara mendapatkan kode HEX warna?

Anda bisa mendapatkan nilai HEX warna dengan mudah menggunakan perangkat lunak atau software editing gambar seperti Adobe Photoshop, Gimp, Paint, dll. Sebagai contoh saya ingin mendapatkan warna dari blog centerklik menggunakan Adobe Photoshop, maka saya akses blog centerklik dan saya print screen, lalu saya membuat file baru pada Adobe Photoshop dan saya paste atau ctrl+v pada halaman baru tersebut. Selanjutnya saya klik pada icon warna color picker dan saya arahkan kursor berbentuk pensil tersebut pada warna utama blog centerklik untuk mencari kode HEX dari warna tersebut. Dan setelah itu Anda bisa mencopy kode HEX warna pada bagian bawah tersebut untuk Anda masukkan pada tag HTML diatas tadi.

Anda juga dapat memilih warna dengan mudah menggunakan tool HTML color picker secara online.

Jika Anda ingin memilih warna dari halaman web, maka Anda dapat menggunakan ekstensi atau Add-ons browser seperti ColorZilla.

Baca : Cara Memilih Warna Yang Tepat Untuk Desain Web

Dan itulah cara mudah mengganti warna Address Bar agar sesuai dengan warna tema WordPress Anda atau dengan waran sesuai keinginan Anda sendiri. Semoga artikel ini bermanfaat dan sekarang Anda sudah memiliki warna yang sesuai saat mengakses situs WordPress Anda melalui mobile browser. Selamat mencoba 🙂

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Facebook+.