Beranda Blog & Website Cara Mengganti Warna Address Bar di Browser Mobile pada WordPress

Cara Mengganti Warna Address Bar di Browser Mobile pada WordPress

33
0
BERBAGI
warna address bar pada browser mobile
warna address bar pada browser mobile

Halo sobat blogger dimanapun berada, apa kabar kalian hari ini? Tentu sehat selalu bukan? Pembahasan kali ini Asdar akan memberitahu kalian bagaimana cara mengganti warna address bar di browser mobile pada wordpress.

Mungkin teman-teman pernah berkunjung atau melihat sebuah website di browser mobile kalian, coba teman-teman perhatikan pada bagian address barnya. Terkadang teman-teman akan melihat warna pada address bar browser kalian sama dengan warna dasar dari website yang kalian kunjungi. Lho kok bisa ya?

Anda pasti bertanya-tanya, bagaimana sih cara membuatnya? Nah, pada artikel ini saya akan kasih tau bagaimana cara membuatnya. Lihat caranya pada penjelasan berikut ini.

Cara Mengganti Warna Address Bar di Browser Mobile pada WordPress

Untuk langkah-langkahnya adalah sebagai berikut.

Langkah 1

  1. Pastikan bahasa wordpress kalian adalah bahasa indonesia agar nantinya tidak bingung.
  2. Login ke admin panel wordpress kalian masing-masing.
  3. Pilih menu Tampilan > Editor, kemudian pilih header.php pada list sebelah kanan.header php wordpress
  4. Taruh kode dibawah ini tepat diatas kode </head>.penempatan kode hex mobile browser
    • <!-- Chrome, Firefox OS, Opera and Vivaldi -->
      <meta name="theme-color" content="#1a8200">
      <!-- Windows Phone -->
      <meta name="msapplication-navbutton-color" content="#1a8200">
      <!-- iOS Safari -->
      <meta name="apple-mobile-web-app-status-bar-style" content="#1a8200">
  5. Ganti kode hex #1a8200 sesuai dengan selera anda.
  6. Klik perbarui berkas dan lihat perubahannya pada browser mobile anda.

Langkah 2

Terkadang langkah pertama diatas gagal menyimpan untuk versi wordpress yang terbaru, ini mungkin adalah bentuk proteksi dari tim wordpress untuk keamanan file-file penggunanya. Oleh karena itu, jalan lain adalah dengan mengeditnya melalui file manager di server hosting anda. Langkah-langkahnya adalah sebagai berikut.

  1. Login ke admin panel hosting tempat file wordpress anda disimpan.
  2. Masuk ke menu file manager tempat penyimpanan file wordpress anda.
  3. Masuk ke root file anda, public_html > wp-content > themes > folder tema yang anda gunakan > pilih header.php kemudian edit.
  4. Taruh kode dibawah ini tepat diatas kode </head>.file header php di file manager
    • <!-- Chrome, Firefox OS, Opera and Vivaldi -->
      <meta name="theme-color" content="#1a8200">
      <!-- Windows Phone -->
      <meta name="msapplication-navbutton-color" content="#1a8200">
      <!-- iOS Safari -->
      <meta name="apple-mobile-web-app-status-bar-style" content="#1a8200"> 
  5. Ganti kode hex #1a8200 sesuai dengan selera anda.
  6. Save dan lihat perubahannya pada browser mobile anda.

Catatan: Kode hex diatas ada beberapa tipe browser yang digunakan, anda bisa memberi kode hex yang berbeda-beda pada tiap-tiap browser sesuai selera anda. Jika tidak, cukup seragamkan saja warnanya.

Cara Mendapatkan Kode Hex Warna

Anda bisa mendapatkan kode hex warna dengan berbagai cara, anda bisa menggunakan software editing di komputer anda seperti Adobe Photoshop, Gimp, Paint, dan lain sebagainya. Sebagai contoh saya akan menggunakan software Adobe Photoshop untuk mendapatkan kode hex warna. Pertama-tama siapkan dulu warna yang ingin diambil kode hexnya, gambar dibawah adalah gambar header facebook yang saya ingin ambil kode hex nya.kode hex warna biru facebookEdit gambar facebook diatas dengan Photoshop, pilih menu Color Picker yang terletak dibagian kiri bawah. Lihat arah panah merah diatas. Klik menu Color Picker kemudian klik warna biru facebook yang ingin diambil kode hexnya. Maka akan terlihat kode hex #4167b2 seperti pada gambar diatas.

Nah, kira-kira seperti itulah cara mengganti warna address bar di browser mobile pada wordpress, semoga bisa bermanfaat untuk teman-teman blogger. Jangan lupa share artikel ini jika dirasa bermanfaat untuk orang lain, karena berbagi itu gratis dan berpahala. Sekian artikel kali ini, sampai jumpa di artikel berikutnya.

TINGGALKAN KOMENTAR

Please enter your comment!
Please enter your name here