Download Now Download Themes Gratis WordPress Responsive!

Cara Ganti Warna Address Bar di Mobile Browser WordPress

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 warna 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 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 mengubah 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 sama dengan warna 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.

address-bar-warna-blog

Ā 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 .

<!-- Chrome, Firefox OS, Opera and Vivaldi -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">

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 (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.

color-picker-adobe-photoshop

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 Google+.

Daftar isi Tutorial Wordpress Terlengkap Gratis
10 top hosting!

Register Now: TOP 10 Hosting

Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals

Bluehost Hosting

$2.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

iPage Hosting

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

SiteGround Hosting

$3.45/Month Free Domain, Unlimited Space & Bandwidth Get Host

WebHostingPad

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

Hostgator

$3.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

Must Read...!
Theme WordPress Photo Gallery Responsive Free

Photo Free adalah theme wordpress responsive gratis, Photo free merupakan template yang di desain...

Cara Install dan Settings Contact Form 7 di WordPress

Jika Anda saat ini sedang membuat website atau blog dengan Wordpress yang akan Anda...

Close