cara mengganti warna tab browser pada tampilan mobile

cara mengganti warna tab browser pada tampilan mobile blog - Habis berkunjung keberbagai macam blog tiba - tiba merasa ada yang aneh dari tampilan blog - blog terebut contonya seperti situs kompas.com misalnya. saat di telusuri oleh prambanan mobile menggunakan chrome. disana saya melihat pada bagian address bar / header browser tersebut berubah menjadi warna tertentu. Padahal normalnya berwarna putih abu-abu, namun ada juga pada beberapa website yang berwarna merah, hitam atau warna lainnya. Alhasil sayapun penasaran dan mencoba untuk mencari tau, dan ternyata Warna header browser mobile tersebut memang bisa kita atur dengan menuliskan kode warnanya pada meta tag dibagian [head] di kode html. Untuk contoh warna Address Bar Website di Browser Mobile kalian bisa lihat di Screnshoot dibawah ini yang merupakan tampilan blog ini saat  di telusuri oleh Browser Smartphone

cara ini sangat bagus diterapkan apabila kalian ingin membuat warna Address Bar Mengikuti Warna Blog saat dikunjungi pengunjung terutama yang menggunakan browser pada smartphone


cara mengubah warna address bar website di browser mobile

Cara merubah warna Address Bar dan Header Bar Website di Browser Smartphone ini bisa Sobat terapkan pada semua web yang berbasis html, jadi baik itu wordpress ataupun blogger pasti bisa. lalu bagaimana cara menerapkanya di blog kita? bagi sobat yang ingin menggunakan ini pada blognya bisa langsung mengikuti langkah - langkah dibawah ini untuk mengganti warna address bar

Penerapan di WordPress


  • Untuk pengguna WordPress cukup masuk ke menu Appearance -> Editor.
  • Kemudian pilih Theme Header di bagian kanan, lalu ketik kode diantara tag <head> dan </head>

Penerapan di Blogger

Untuk pengguna Blogger / Blogspot,

  • masuk ke menu Dashboard Blogger, pilih Template. Pada bagian template, cari gambar gear (gerigi) pada tampilan seluler.
  • Pada opsi pilihan template seluler, pilih Khusus. Lalu klik Simpan
  • Kemudian masukan kode tersebuat diantara tag <head> dan </head>

<meta content='#222222' name='theme-color'/>

<meta content='#3BB53D' name='msapplication-navbutton-color'/>

<meta content='#FFD026' name='apple-mobile-web-app-status-bar-style'/>

Ubah kode warna yang saya tandai di atas dengan kode warna yang sobat inginkan atau yang sesuai dengan warna blog sobat 

  • Simpan 

Keterangan tambahan kode di atas

theme-color
meta tag untuk tema warna pada chrome mobile, untuk mengganti warna cukup dengan mengubah kode warna pada bagian meta content.
msapplication-navbutton-color
meta tag untuk tema warna pada windowsphone (Internet Explorer), untuk mengganti warna cukup dengan mengubah kode warna pada bagian meta content.
apple-mobile-web-app-status-bar-style
meta tag untuk tema browser iOS (Safari), dengan menggunakan black-translucent maka bagian teratas halaman akan naik hingga area status bar.Cara Agar Warna Address Bar Mengikuti Warna Blog Cara mengubah warna address bar website pada browser Chrome & Opera
Setelah selesai menambahkan kode diatas  sekarang waktunya untuk mencoba membuka halaman blog kita masing - masing dan melihat pada bagian Warna Tab Browser Chrome Di Tampilan Mobile menggunakan aplikasi Chrome pada ponsel atau tablet Android, perhatikan warna kolom bagian address bar seharusnya akan menampakan warna sesuai dengan kode warna yang diketikkan.

Oke Sampai disini dulu artikel mengenai cara Mengganti Warna Tema Browser Mobile, semoga dengan informasi trik seperti ini dapat membuat kita lebih semangat untuk mempelajari dunia Perbloggeran.
Terima kasih.
Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Beri Komentar Tutup comment

Disqus Comments